Aj napriek tomu, že štandardy ako HTML 4.01 alebo CSS 2 existujú už viac ako 5 rokov, môžete sa internete (najmä na tom slovenskom) stále stretnúť s layoutmi založenými na už doslova historických technológiách, najmä na zneužívaní tabuliek na rozmiestnenie obsahových prvkov na stránke. Použitie CSS layoutu je však oveľa výhodnejšie (výhody CSS sú nepopierateľné) a nie je to nič zložité.

Definícia CSS štýlu


Základom úspechu je správna definícia všetkých obsahových častí dokumentu prostredníctvom CSS v súbore style.css.

Telo dokumentu


BODY {
background: #FFFFFF; /* farba pozadia /
color: #000000; /
farba textu /
font-family: “Verdana”, “Helvetica”, sans-serif; /
typ písma /
font-size: 12px; /
veľkosť písma /
margin: 0px; /
okraje */
}

Telo dokumentu bude obsahovať biele pozadie (background: #FFFFFF), čierny text (color: #000000) veľkosti 12 pixelov (font-size: 12px) typu Verdana (Windows) alebo Helvetica (Linux), ak nebude ani jeden z týchto typov písma dostupný, použije sa písmo z rodiny sans-serif, ktorú obsahujú všetky prehliadače. Okraje nastavte na 0 pixelov (margin: 0px).

Hlavička dokumentu


#HEADER {
width: 100%; /* šírka /
height: 90px; /
výška /
background: #AA7239; /
farba pozadia /
padding: 5px; /
odsadenie /
color: #FFFFFF; /
farba písma */
}

Hlavička dokumentu bude mať šírku 100% (width: 100%), výšku 90 pixelov (height: 90px), pozadie bude tmavohnedej farby (background: #AA7239), text bielej farby (color: #FFFFFF) a odsadenie obsahu hlavičky bude 5 pixelov zo všetkých strán (padding: 5px) . Veľkosť textu sa dedí po elemente BODY.

Oddeľovač


#DIVIDER {
width: 100%; /* šírka /
height: 20px; /
výška /
background: #FF8000; /
farba pozadia /
padding: 3px; /
odsadenie /
margin-bottom: 5px; /
okraje */
}

Oddeľovač bude mať šírku 100% (width: 100%), výšku 20 pixelov (height: 20px), pozadie bude oranžovej farby (background: #FF8000), odsadenie obsahu oddeľovača bude 3 pixele zo všetkých strán (padding: 3px) a spodný okraj 5 pixelov (margin-bottom: 5px). Farba a veľkost sa dedia po elemente BODY.

Ľavé menu


#LEFT {
width: 170px; /* šírka /
height: 200px; /
výška /
float: left; /
nadväzovanie /
background: #FFDFBF; /
farba pozadia /
margin: 5px; /
okraje /
border-width: 1px; /
veľkosť kraja /
border-color: #AA7239; /
farba kraja /
border-style: solid; /
typ kraja /
padding: 5px; /
odsadenie */
}

Definícia ľavého menu je o niečo zložitejšia. Okrem vlastností ako šírka (width: 170px), výška (height: 200px), farba pozadia (background: #FFDFBF), veľkosť okrajov (margin: 5px) a odsadenie (padding: 5px) pribudli štyri nové vlastnosti. Zápis float: left znamená, že kontajner obsahujúci ľavé menu bude navdäzovať na ľavú stranu dokumenu. Ďalej je potrebné nastaviť veľkosť kraja na 1 pixel (border-width: 1px), farbu kraja (border-color: #AA7239) a typ kraja na plný (border-style: solid). Farba a veľkost textu sa opäť dedia po elemente BODY.

Obsah dokumentu


#CONTENT {
float: left; /* nadväzovanie /
margin: 5px; /
okraje /
padding: 5px; /
odsadenie /
border-width: 1px; /
veľkosť kraja /
border-color: #AA7239; /
farba kraja /
border-style: solid; /
typ kraja */
}

Veľkosť okrajov bude (margin: 5px), odsadenie (padding: 5px), kontajner bude nadväzovať na ľavú stranu dokumentu (float: left), veľkosť kraja bude 1 pixel (border-width: 1px), farba kraja (border-color: #AA7239) a typ kraja plný (border-style: solid). Farba a veľkosť textu, farba pozadia sa dedia po elemente BODY.

Pätička dokumentu


#FOOTER {
width: 100%; /* šírka /
height: 25px; /
výška /
background: #AA7239; /
farba pozadia /
float: left; /
nadväzovanie /
margin-top: 5px; /
vrchný okraj /
padding: 3px; /
odsadenie */
}

Pätička dokumentu bude mať šírku 100% (width: 100%), výšku 25 pixelov (height: 25px), pozadie bude tmavohnedej farby (background: #AA7239), kontajner bude nadväzovať na ľavú stranu dokumentu (float: left), odsadenie bude 3 pixle (padding: 3px) a vrchný okraj 5 pixelov (margin-top: 5px).

HTML dokument


Tvorba samotného HTML dokumentu už nie je žiadne problém, ide v podstate len o aplikáciu vytvorených selektorov na jednotlivé kontajnery.