Sledujte ma na Twitteri

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 

  1. BODY {
  2.              background: #FFFFFF; /* farba pozadia */
  3.              color: #000000; /* farba textu */
  4.              font-family: "Verdana", "Helvetica",        sans-serif; /* typ písma */
  5.              font-size: 12px; /* veľkosť písma */
  6.              margin: 0px; /* okraje */
  7.          }

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

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

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č

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

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

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

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

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

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

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

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.