Szablony oparte o CSS stały się ostatnio bardzo popularne. Istnieją szablony oparte o absolutne pozycjonowanie elementów, inne wykorzystują FLOAT. Nie każdy wie jednak że FLOAT powoduje kilka bugów pod Internet explorerem oraz z kilkoma mniej dopracowanymi przeglądarkami.

Kod xhtml zapisany przy pomocy DIV:

<div id=”wp”>
<div id=”hd”>Nagłówek</div>
<div id=”bd”>Body
<div id=”doc”>
<div id=”s1″>Sekcja 1</div>
<div id=”s2″>Sekcja 2</div>
<div id=”s3″>Sekcja 3</div>
</div>
</div>
<div id=”ft”>Stopka</div>
</div>

Divy są bez sensu, i nie mogą reprezentować struktury dokumentu. Natomiast listy tworzą całkowicie semantyczny układ strony, ponieważ reprezentują wzajemną hierarchię elementów strony.

Ten sam kod zapisany przy pomocy list:

<ol id=”wp”>
<li id=”hd”>Nagłówek</li>
<li id=”bd”>Body
<ol id=”doc”>
<li id=”s1″>Sekcja 1</li>
<li id=”s2″>Sekcja 2</li>
<li id=”s3″>Sekcja 3</li>
</ol>
</li>
<li id=”ft”>Stopka</li>
</ol>

Najpierw usuwamy z kod który poprzedza zagnieżdżone OL (”Body”). Wtedy ustawiamy szerokość i automatyczny margines, aby wycentrować nasz szablon i używamy”list-style:none” żeby być pewnym że rzadna przeglądarka nie pokaże wypunktowania przed poszczególnymi sekcjami. Teraz zajmujemy się stylowaniem LI które zawiera UL z trzema obiektami (trzema kolumnami) tak, aby wyglądała jak tabelka. Na koniec nadajemy styl OL jako wiersz tabelki. LI reprezentuje pojedyńczą komórkę.

<style type=”text/css”>
* {margin:0;padding:0;}
#wp {width:55em;margin:0 auto;list-style-type:none;}
#bd {display:table;}
#doc {display:table-row;}
#s1,#s2,#s3 {display:table-cell;}
</style>

Trzeba pamiętać że bez list-style-type:none cyfry pojawią się obok LI w Internet explorer dla maca, oraz w safari. (display:inline zajmuje się Internet explorerem dla windows a display:table-cell zajmuje się przeglądarkami opartymi na silniku gecko).