eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwTrzymanie się strony na środku
Ilość wypowiedzi w tym wątku: 6

  • 1. Data: 2011-10-18 13:19:06
    Temat: Trzymanie się strony na środku
    Od: Borneq <b...@a...hidden.pl>

    Jak zrobić stronę o ustalonym wymiarze na środku okna przeglądarki?
    Coś takiego jak w http://barolo.pl/
    Mamy główne tło: pionowy pasek gradientowy powtarzany wzdłuż osi x
    Głównym elementem jest ciemnobrązowe pole, które jest powiększonym
    obrazkiem - ciemnobrązowym kwadracikiem.
    Zrobiłem coś takiego
    w html: <img id="tlo_kont" src="tlo_kont.png">
    w css: #tlo_kont {position: absolute; top: 275px; left: 16px; width:
    883px; height: 550px; }
    jednak w takim wypadku obrazek pozostaje oczywiście cały czas przy lewej
    stronie, a chciałbym gdy poszerzę okno przeglądarki, stał na środku
    Mogę zrobić float:right ale nie ma niestety float:center czy
    float:middle, chociaż jest float:left i float: none oba nic nie robiące
    w text-align mogę zrobić center ale to nic mi nie daje bo działa tylko
    dla tekstów a nie dla obrazków
    Zapisałem tą stronę za pomocą Firefoksa (przy zapisie Chrome dodaje 80
    kB czegoś) i patrzyłem w css ale tam jest zupełnie inaczej niż ja
    zacząłem robić:
    div.k0 {position: relative; margin: auto; width: 915px; text-align: center;}
    (zapis css przy IE daje coś zupełnie innego)


  • 2. Data: 2011-10-18 13:29:24
    Temat: Re: Trzymanie się strony na środku
    Od: "Pacio" <p...@o...pl>

    Użytkownik "Borneq" <b...@a...hidden.pl> napisał w wiadomości
    news:j7jubs$hjf$23@news.onet.pl...
    > Jak zrobić stronę o ustalonym wymiarze na środku okna przeglądarki?
    > Coś takiego jak w http://barolo.pl/

    > Zapisałem tą stronę za pomocą Firefoksa (przy zapisie Chrome dodaje 80 kB
    > czegoś) i patrzyłem w css ale tam jest zupełnie inaczej niż ja zacząłem
    > robić:
    > div.k0 {position: relative; margin: auto; width: 915px; text-align:
    > center;} (zapis css przy IE daje coś zupełnie innego)

    Aby wysrodkowac obrazek, musisz dac text-align: center dla rodzica,
    albo zmienic display obrazka na block i dac margin-left i margin-right na
    auto.
    Przy drugiej opcji musisz podac szerokosc, poza tym dotyczy ona wszystkich
    elementow blokowych.

    --
    Pozdrawiam
    Pacio


  • 3. Data: 2011-10-18 13:41:43
    Temat: Re: Trzymanie się strony na środku
    Od: Borneq <b...@a...hidden.pl>

    W dniu 2011-10-18 15:29, Pacio pisze:
    > Aby wysrodkowac obrazek, musisz dac text-align: center dla rodzica,
    > albo zmienic display obrazka na block i dac margin-left i margin-right
    > na auto.
    > Przy drugiej opcji musisz podac szerokosc, poza tym dotyczy ona
    > wszystkich elementow blokowych.

    Dzięki, dało (wraz z position: relative) to:
    #tlo_kont {display:block; position: relative; margin-left: auto;
    margin-right: auto; top: 275px; width: 883px; height: 550px; }


  • 4. Data: 2011-10-18 14:48:50
    Temat: Re: Trzymanie się strony na środku
    Od: Borneq <b...@a...hidden.pl>

    W dniu 2011-10-18 15:41, Borneq pisze:
    > Dzięki, dało (wraz z position: relative) to:
    > #tlo_kont {display:block; position: relative; margin-left: auto;
    > margin-right: auto; top: 275px; width: 883px; height: 550px; }

    Jest problem właśnie z tym że position musi być relative a nie absolute
    aby dało się przesuwac na środek.
    I z tym jest kłopot:
    jeżeli mogę ciemną planszę postawić niżej od górnego obrazka w którym
    wstawiam zdjęcie i napisy:
    html:
    <img id="top_top" src="top00000.png">
    <img id="tlo_kont" src="tlo_kont.png">
    css:
    #top_top {display:block; position: relative; margin-left: auto;
    margin-right: auto;
    top: 0px; left: 0px; width: 915px; height: 275px; }
    #tlo_kont {display:block; position: relative; margin-left: auto;
    margin-right: auto;
    top: 0px; width: 883px; height: 550px; }

    to gorzej jest wstawić zdjęcie:
    <img id="top_foto" src="foto0000.jpg">
    #top_foto {display:block; position: absolute; margin-left: auto;
    margin-right: auto;
    top: 22px; left: 50px; width: 251px; height: 225px; }
    Nie przesuwa się, natomiast gdy zmieniam na relative dało się rozwiązać
    wpisując ujemne współrzędne:
    #top_foto {display:block; position: relative; margin-left: auto;
    margin-right: auto;
    top: -803px; left: -282px; width: 251px; height: 225px; }
    Właściwie kłopot rozwiązany - czy można jeszcze w inny sposób? np 2
    relative do 1 i 3 relative do 1 ?

    -----------------------------------------
    Został drugi problem:
    Centrowanie działa w ten sposób że gdy jest szerokie okno przeglądarki,
    wtedy centruje a gdy jest wąskie ustawia na początek i nie przesuwa.
    Jednak mam trzy bloki, każdy innej szerokości i gdy zwężam tło stoi a
    obrazek przesuwa się i chowa z lewej strony (bo współrzędne left:
    -282px) gdyby było coś jako position: relative-y


  • 5. Data: 2011-10-18 14:54:05
    Temat: Re: Trzymanie się strony na środku
    Od: Borneq <b...@a...hidden.pl>

    W dniu 2011-10-18 16:48, Borneq pisze:
    > obrazek przesuwa się i chowa z lewej strony (bo współrzędne left:
    > -282px) gdyby było coś jako position: relative-y

    Jest przesunięty, ponieważ w przeciwnym wypadku fotografia nie jest w
    swoim miejscu ale na środku,
    czy dałoby się zrobić blok o rozmiarze większym niż obrazek, wszystkie 3
    bloki były by jednakowe i w każdym bloku obrazki były by w innym miejscu?


  • 6. Data: 2011-10-19 16:09:49
    Temat: Re: Trzymanie się strony na środku
    Od: Paweł Piskorz <n...@p...nie?>

    W dniu 2011-10-18 15:19, Borneq pisze:
    > Jak zrobić stronę o ustalonym wymiarze na środku okna przeglądarki?
    > Coś takiego jak w http://barolo.pl/

    #strona {
    width:X; /* za X wstaw odpowiednią wartość + jednostkę */
    margin:0 auto;
    }

    > Mamy główne tło: pionowy pasek gradientowy powtarzany wzdłuż osi x
    > Głównym elementem jest ciemnobrązowe pole, które jest powiększonym
    > obrazkiem - ciemnobrązowym kwadracikiem.
    > Zrobiłem coś takiego
    > w html: <img id="tlo_kont" src="tlo_kont.png">
    > w css: #tlo_kont {position: absolute; top: 275px; left: 16px; width:
    > 883px; height: 550px; }

    #strona {
    background:url(tlo_kont.png) no-repeat 0 0;
    }


    --
    message[autor="PablO"]::after {
    content:"Pozdrawiam";
    }

strony : [ 1 ]


Szukaj w grupach

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: