Dvousloupcový layout s hlavičkou, patičkou a bannerem pomocí CSS

    0

    V nedávném článku o tvorbě layoutu jsem vám ukázal, jak snadno lze pomocí čistého CSS vytvořit třísloupcový layout stránky. Dnes nepřímo naváži na tento článek a ukáži vám, jak vytvořit pomocí CSS layout se dvěma sloupci, který bude obsahovat hlavičkou a patičkou stránky a nezapomenu také na prostor pro reklamní banner.

    Abyste věděli, co vlastně tvoříme, nezapomeňte se podívat na ukázku layoutu.

    A hned začneme. Stejně jako v minulém článku, definujeme ve stylu jako první vlastnosti (písmo, velikost písma, odsazení od okrajů atd.) platné pro celý dokument:

    body {
    margin: 10px;
    padding: 0px;
    font-family: „arial ce“, „helvetica ce“, arial, helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    background-color: #FFFFFF;
    }

    Jak je ze zdrojového kódu vidět, pomocí vlastnosti margin bude obsah stránky bude odsazen od všech okrajů prohlížeče o deset pixelů. Je zde také vlastnost padding, „opravující“ chybu v Opeře 5.0, která v případě, že je pro Body definována vlastnost margin, nastaví automaticky padding na 5 pixelů. Zbytek je asi všem jasný, použitý font na stránce bude Arial CE, velikost 14 pixelů, barva písma bude černá.

    Hlavička stránky

    Hlavička stránky je velmi jednoduchá (jako ostatně všechno). Začneme s délkou (width) hlavičky stránky, která bude velká 700px, výšku (height) stanovíme třeba na 80px, odsazení textu (padding) a orámování boxu (border) bude nulové – obě vlastnosti v takovém případě není potřeba uvádět. Původně tento layout měl vlastní text odsazen od okrajů boxu a jednotlivé boxy byly také pro zvýraznění orámovány černou čarou, ale díky chybě v Internet Exploreru, kdy tento prohlížeč do výsledné délky boxu (width) počítá padding a border (což by podle konsorcia W3 neměl), by nám tak v ostatních prohlížečích (Opera, Mozilla) neseděly rozměry jednotlivých boxů a proto jsou zde tyto vlastnosti nulové. Daný problém se dá snadno vyřešit, nicméně nechci tím snižovat přehlednost tohoto článku.

    .top {
    width: 700px;
    height: 80px;
    background-color: #dfdfdf;
    }

    Prostor pro reklamní banner

    Každý internetový server obsahuje minimálně jednu plochu pro reklamní banner o rozměru 468×60, kde se zobrazují placené reklamy inzerentů, nebo reklamy výměnných systémů (např. Billboard.cz). Rozměr boxu pro banner bude tedy již zmiňovaných 468×60 pixelů a pomocí vlastnosti margin-left jej odsadíme přesně na střed stránky (700-468/2) vzhledem k ostatním prvkům na stránce. V CSS pochopitelně existují i jiné postupy, jak nějaký prvek zarovnat na střed stránky, v tomto článku si ale bohatě vystačíme s přesně definovaným odsazením zleva (margin-left):

    .top-banner {
    width: 468px;
    height: 60px;
    margin-top: 5px;
    margin-left: 117px;
    background-color: #eeeeee;
    }

    Ve výše uvedeném stylu jsou ještě definována vlastnost margin-top, která reklamní plochu odsadí 5 pixelů z horní strany, aby nebyla tato reklamní plocha úplně přilepena na hlavičku dokumentu.

    Levý a pravý sloupec

    Nyní se dostáváme k tvorbě hlavních části layoutu – k levému sloupce pro hlavní odkazy na stránce a k pravému sloupci, kde se bude objevovat hlavní text na stránce (např. články). Protože tento layout není vytvářen pomocí fixního pozicování, je potřeba v tomto případě vytvořit jeden „zastřešující“ box, do kterého vnoříme oba plovoucí sloupce, které budou zarovnány pomocí float. Tento box je velmi jednoduchý, protože obsahuje pouze vlastnost width a margin-top pro odsazení tohoto zastřešujího boxu od plochy pro reklamní banner.

    .column {
    width: 700px;
    margin-top: 5px; }

    Nyní vytvoříme levý sloupec. Bude široký třeba 150px a vysoký 400px. Výšku levého sloupce pochopitelně nemusíte vůbec definovat – sloupec se bude „natahovat“ podle množství textu v něm obsaženém. V našem ukázkovém layoutu ovšem žádný dlouhý text není a proto jsme definovali výšku sloupce. Nesmí chybět vlastnost float, která tento sloupec „zarovná“ úplně nalevo. Styl pro celý sloupec bude tedy vypadat takto:

    .left-column {
    float: left;
    width: 150px;
    height: 400px;
    background-color: #dfdfdf;
    }

    Vytvoření pravého sloupce bude velmi podobné. Použitím vlastnosti float a uvedením hodnoty right zarovnáme tento sloupec úplně doprava. Délku tohoto sloupec stanovíme tak, že od velikosti nadrazeného boxu (700px) odečteme velikost levého sloupce (150px) a výsledné číslo snížíme ještě o pět pixelů, aby pravý sloupec nebyl úplně nalepen na levý sloupec. Ve vlastnosti width ude tedy uveden rozměr 545 pixelů. Výšku height ponecháme na 400px, zde stejně jako v minulém případě platí, že není potřeba ji definovat, protože pravý sloupec se bude natahovat podle textu v něm umístněném.

    .right-column {
    float: right;
    width: 545px;
    height: 400px;
    background-color: #dfdfdf;
    }

    Patička dokumentu

    A zbývá vám vytvořit poslední část stránky – patičku dokumentu, která se dá využít pro uveřejnění informace o autorských právech nebo zde uvést kontaktní emaily atd. Takže – opět definujeme pomocí vlastnosti width šířku patičky, pomocí vlastnosti height její výšku, nezapomeneme na margin-top, který patičku odsadíme od hlavních sloupců, a nakonec vložíme vlastnost clear: both, která patičku zarovná pod oba sloupce:

    .bottom {
    width: 700px;
    height: 40px;
    margin-top: 5px;
    background-color: #dfdfdf;
    clear: both;
    }

    A to je v podstatě úplně vše – chybí už jenom konstrukce jednotlivých DIVů v HTML. Ta je velmi jednoduchá a vypadá takto:

    <div class=“top“>Hlavička stránky</div>
    <div class=“top-banner“>Prostor pro horní banner</div>
    <div class=“column“>
           <div class=“left-column“>Levý sloupec stránky</div>
           <div class=“right-column“>Pravy hlavní sloupec stránky</div>
    </div>
    <div class=“bottom“>Patička stránky</div>

    A to je pro dnešní den k dvousloupcovému layoutu pomocí CSS vše. Dovolím si jenom podotknout, že výše uvedený styl byl odestován v Internet Exploreru 5, v Opeře 5 a v Mozille 0.9 – všude funguje bez problémů, pouze v Mozille je patička nalepena na oba sloupce, důvod, proč tomu tak je, mi není znám. Závěrem se ještě musím zmínit o kolegovi Pavlovi Šimkovi, se kterým se mi podařilo vyřešit problém zobrazování v Opeře, kde se „podivným“ způsobem (závislým na velikosti okna) nezobrazoval celý levý sloupec stránky. Dá se tedy říci, že výše uvedený styl je kompromisem fungujícím ve všech uvedených prohlížečích, kdy pouze v Mozille je patička nalepena na oba sloupce, což je lepší, než zmiňovaný problém v Opeře.

    Zde se ještě jednou můžete podívat na ukázku celého layoutu.

    Starší komentáře ke článku

    Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

    Žádný příspěvek v diskuzi

    Odpovědět