Szablon, który przygotowałem w tym odcinku ma układ dwukolumnowy. Kolumny o stałej szerokości wyśrodkowane na stronie rozciągają się na całą wysokość okna przeglądarki. Wydawałoby się, nic prostszego. Jak się okaże, problemem jest wyznaczanie wysokości elementów pływających.
Szablon
Gotowa witryna jest przedstawiona na rys. 1. Ma ona układ dwukolumnowy: w lewej kolumnie umieszczono treść, a w prawej menu. Menu witryny wykorzystuje efekty rollover oraz wskaźnik wybranej opcji wykonany w oparciu o style CSS.
Sześć opcji menu jest podzielone na dwie grupy, po trzy opcje oddzielone zdjęciem kwiatu. Aktualnie wybrana opcja jest wytłuszczona i wyróżniona białym tłem (na rysunku jest to opcja in hac). Opcja wskazana kursorem myszki jest wyróżniana niebieskim tłem.
Cechy szablonu
Prezentowany szablon dwukolumnowy ma następujące cechy:
- jeśli okno przeglądarki jest szerokie, jest wyśrodkowany na stronie,
- dowolna kolumna może zawierać więcej tekstu,
- dowolna kolumna może być pierwsza w kodzie XHTML.
Układ dwukolumnowy może mieć dwie niepożądane cechy:
- rozjeżdża się przy zbyt wąskim oknie przeglądarki,
- kolumny nie rozciągają się od samej góry do samego dołu, tylko kończą w połowie strony.
Elementy pływające
Problem wysokości
Właściwość float może być wykorzystana do pozycjonowania pudełek. Takie rozwiązanie stosuję w opisywanym układzie. Elementy {stala}div#lewy{/stala} oraz {stala}div#prawy{/stala} umieszczam w pojemniku:
Wystarczy teraz ustalić szerokości pudełek oraz dosunąć je do lewej i do prawej strony, by otrzymać zarys układu strony:
#pojemnik {
width : 800px;
margin : 0px auto;
}
#lewy {
width : 500px;
float : left;
}
#prawy {
width : 200px;
float : right;
}
Niestety, elementy float zostały zawarte w CSS z myślą o umieszczaniu obrazów w tekście, a nie z myślą o tworzeniu układów. W tak wykonanym układzie wysokość elementu {stala}div#pojemnik{/stala} będzie wynosiła 0.
Problem w wyznaczaniu wysokości elementu {stala}div#pojemnik{/stala} spowoduje komplikacje nie tylko w utworzeniu omawianego układu, ale nawet w zwykłym obramowaniu. Rys. 2 przedstawia obramowanie, jakie zostanie nadane elementom {stala}div#lewy{/stala}, {stala}div#prawy{/stala} oraz {stala}div#pojemnik{/stala} przez użycie atrybutu border. Jak widać, obramowanie pojemnika nie obejmuje elementów lewego ani prawego!
IE zachowuje się zupełnie inaczej. Rys. 2 został wykonany przy użyciu Firefoksa. IE problem wysokości elementu {stala}div#pojemnik{/stala} traktuje niezgodnie ze specyfikacją i… wyświetla poprawne obramowanie.
Rozwiązanie pierwsze
Pierwsze z rozwiązań polega na dodaniu do pojemnika jeszcze jednego elementu {stala}div#koniec{/stala}:
Jeśli element ten zawiera style:
#koniec {
clear : both;
}
to będzie umieszczany poniżej lewej i prawej kolumny. Ponieważ nie jest to element pływający, wymusi ustalenie wysokości pojemnika.
Jeśli kolumny lewa i prawa zawierają mało tekstu, to wysokość pojemnika nie obejmie całego okna przeglądarki.
Rozwiązanie drugie
Drugie rozwiązanie wykorzystuje trik sztucznych kolumn. Jeśli strona będzie miała tło widoczne na rys. 3, to otrzymamy efekt obramowania elementów lewego, prawego i pojemnika. Tak otrzymane obramowanie będzie się rozciągać od górnej do dolnej krawędzi przeglądarki.
Tło takie nadamy stylami:
body {
background : url(\'ramka.png\') repeat-y 50% 0%;
}
Z racji na wpis 50% tło będzie wyśrodkowane. W połączeniu ze środkowaniem pojemnika (wpis {stala}margin: 0px auto{/stala}; w stylach pojemnika) tło strony da efekt sztucznych kolumn.
Problem tego rozwiązania wynika ze sposobu pozycjonowania wyśrodkowanego tła. Jeśli szerokość okna przeglądarki będzie mniejsza niż szerokość układu (czyli w przykładzie: mniej niż 800 pikseli), to układ będzie się rozjeżdżał. Kolumna rysowana przez tło strony nie pokryje się z tekstem zawartym w elemencie {stala}div#prawa{/stala}. IE również zachowuje się niezgodnie ze specyfikacją i… wyświetla stronę poprawnie!
Przygotowanie szablonu
Rysunek XCF
{tlo_1}
Wykonanie tła rozpoczniemy od dodania do obrazu prowadnic. Utworzymy nowy biały obraz o wymiarach 800 × 600 i umieścimy na nim prowadnice.
{/tlo}
{tlo_0}
Następnie wykorzystując prowadnice wypełnimy trzy prostokąty kolorami zielonym i niebieskim.
{/tlo}{tlo_1}
Dodamy jeszcze dwa prostokąty w kolorze białym. Mają one przysłaniać linie styku jednego zielonego prostokąta i dwóch niebieskich.
{/tlo}
{tlo_0}
Białe prostokąty przysłaniające wzbogacimy o maskę. Maski wypełnimy gradientem dwuliniowym.
{/tlo}
{tlo_1}
Zmniejszymy krycie białych prostokątów przysłaniających do 30.
{/tlo}
Z przygotowanego obrazu XCF wytniemy pasek o wymiarach 760 × 10 pikseli. Pasek ten zapiszemy w pliku kolumny.png.
Szablon pierwszy
Pierwszy z szablonów wykorzystuje wyłącznie efekt sztucznych kolumn. Element body ma tło kolumny.png. Układ jest stałej szerokości i wyśrodkowany na stronie.
Zaleta układu: sztuczne kolumny zawsze rozciągają się od samej góry do samego dołu (nie ma na to wpływu ilość tekstu w kolumnach lewej i prawej). Zaletę układu demonstruje rys. 4. W Firefoksie naciskając wielokrotnie skrót klawiszowy pomniejszający tekst ujrzymy zaletę układu.
Wada układu: rozjeżdża się, gdy szerokość okna przeglądarki jest mniejsza niż szerokość układu. Wadę układu przedstawia rys. 5. Zmniejszając szerokość okna Firefoksa ujrzymy przedstawiony efekt. (Wada ta występuje wyłącznie w Firefoksie i Operze. W IE oraz Netscape nie występuje.)
|
|
|
Układ ten wykorzystuje trzy elementy div:
Lorem ipsum...
Curabitur non...
oraz tło elementu body:
body {
margin : 0px;
padding : 0px;
background : url(\'img/kolumny.png\') repeat-y 50% 0% rgb(198,255,249);
}
#pojemnik {
width : 760px;
margin : 0px auto;
}
#lewa {
width : 540px;
float : left;
}
#prawa {
float : right;
width : 210px;
}
Szablon drugi
Drugi szablon wykorzystuje wyłącznie efekt sztucznych kolumn oraz element {stala}div#koniec{/stala}, wymuszający wysokość elementu {stala}div#pojemnik{/stala}. Tło kolumny.png jest nadane nie elementowi body, a elementowi {stala}div#pojemnik{/stala}. Dzięki temu nie ma problemu ze złym pozycjonowaniem tła przy zmniejszonej szerokości okna przeglądarki. Pojawia się natomiast problem wysokości elementu {stala}div#pojemnik{/stala}.
Zaleta układu: układ nie rozjeżdża się, gdy zmniejszona zostaje szerokość okna przeglądarki. Zaletę układu demonstruje rys. 6.
Wada układu: kolumny rozciągają się wyłącznie na wysokość wynikającą z ilości tekstu. Jeśli ilość tekstu zmaleje, to kolumny się skończą przedwcześnie. Wadę układu przedstawia rys. 7.
|
|
|
Układ wykorzystuje cztery elementy div:
Lorem ipsum...
Curabitur...
oraz style:
html, body {
margin : 0px;
padding : 0px;
background : rgb(198,255,249);
}
#pojemnik {
width : 760px;
margin : 0px auto;
padding : 0px;
background : url(\'img/kolumny.png\') repeat-y 50% 0% rgb(198,255,249);
}
#lewa {
width : 540px;
float : left;
}
#prawa {
float : right;
width : 210px;
}
#koniec {
clear : both;
height : 50px;
}
Podsumowanie
Drugi wariant opisanej techniki sztucznych kolumn jest rozwiązaniem poprawnym. Jedynym ograniczeniem jest wysokość: jedna z kolumn musi zawierać dużo tekstu (tzn. tyle, by wypełnić przynajmniej jedną wysokość okna przeglądarki). Z problemem tym możemy walczyć przy użyciu atrybutu min-height:
#pojemnik {
...
min-height : 1000px;
...
}
Wadą jest nadmiarowość użycia elementów div. Psuje to semantykę kodu XHTML. Oprócz pudełek: {stala}#pojemnik{/stala}, {stala}#lewa{/stala}, {stala}#prawa{/stala} pojawia się element {stala}#koniec{/stala}. Zbędnymi elementami są co najmniej {stala}#pojemnik{/stala} oraz {stala}#koniec{/stala}.
Opisany szablon przetestowałem w przeglądarkach Firefox 1.5, IE5, IE6, IE7, Netscape 8, Opera 7.
