Ako na CSS layout

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.