Dvousloupcový layout s hlavičkou, patičkou a
bannerem pomocí CSS
V nedávném (a velmi úspěšné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 468x60, 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 468x60 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.
| Zaujal vás článek?
Pošlete nám přes toto rozhraní dobrovolný příspěvek
formou mikroplatby v systému I LIKE Q (vlevo - Q) anebo
v DirectPay (vpravo - kredity). |
|
Miroslav Kučera - Další články autora
|
