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)

do góry

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

do góry

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; }

do góry

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

do góry

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?

do góry

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";
}

do góry