Gimp: tworzenie szablonów stron WWW cz. 2

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.

Rys. 1. Strona główna szablonu 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 div#lewy oraz div#prawy umieszczam w pojemniku:

[+]

[-]

 

 

HTML

1. <div id="pojemnik">
2.     <div id="lewy"></div>
3.     <div id="prawy"></div>
4. </div>

Listing zwinięty - 4 linii

Wystarczy teraz ustalić szerokości pudełek oraz dosunąć je do lewej i do prawej strony, by otrzymać zarys układu strony:

[+]

[-]

 

 

CSS

 1. #pojemnik {
 2.     width : 800px;
 3.     margin : 0px auto;
 4. }
 5. #lewy {
 6.     width : 500px;
 7.     float : left;
 8. }
 9. #prawy {
10.     width : 200px;
11.     float : right;
12. }

Listing zwinięty - 12 linii

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 div#pojemnik będzie wynosiła 0.

Rys. 2. Problem wysokości Problem w wyznaczaniu wysokości elementu div#pojemnik spowoduje komplikacje nie tylko w utworzeniu omawianego układu, ale nawet w zwykłym obramowaniu. Rys. 2 przedstawia obramowanie, jakie zostanie nadane elementom div#lewy, div#prawy oraz div#pojemnik 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 div#pojemnik traktuje niezgodnie ze specyfikacją i... wyświetla poprawne obramowanie.