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

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:

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.

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):

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.

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:

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.

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:

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

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.