Ukáži vám, jak vytvořit plovoucí layout se třemi sloupci, hlavičkou, prostorem pro reklamní banner a patičkou, který využívá výhradně relativního pozicování.
Ještě předtím, než se pustíte do vytváření layoutu, se podívejte na ukázku.
1. Vytvořte začátek struktury HTML dokumentu – definujte typ dokumentu a použitou verzi jazyka HTML (!Doctype), uvoťe začátek HTML dokumentu (<html>) a začátek hlavičky dokumentu:
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“>
<html>
<head> |
|
2. Za párovou značku <title> doplňte titulek stránky „Třísloupcový plouvoucí layout“, který se bude objevovat v horní liště prohlížeče a za tento text vložte uzavírací značku </title> pro ukončení titulku. Nesmí chybět informace ve značce <meta> o použitém kódování textu (windows-1250) a nakonec ukončete hlavičku dokumentu pomocí uzavírací značky </head>:
<title>Třísloupcový plouvoucí layout.</title>
<meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1250″>
</head> |
|
3. Vložte párovou značku <body>, která uvozuje samotné tělo HTML dokumentu:
4. Vložte značku <style>, která říká prohlížeči, že nyní budou následovat jednotlivé definice stylů. Za tuto značku nezapomeňte vložit komentář <!- –, který definici stylu „skryje“ před prohlížeči bez podpory kaskádových stylů.
<style type=“text/css“>
<!– |
|
5. V selektoru body nadefinujte vlastnosti platné pro celý dokument. Budou to například nulové okraje stránky – vlastnosti margin a padding (speciálně pro Operu), dále použitý typ písma – vlastnost font-family – a nakonec ještě velikost písma – vlastnost font-size:
body {
margin: 0px;
padding: 0px;
font-family: „arial ce“, „helvetica ce“, arial, helvetica, sans-serif;
font-size: 14px;
} |
|
6. Nyní vytvořte třídu .main s vlastností margin. Tuto třídu poté v HTML kódu aplikujte na prvek <div>, do kterého vnořte jednotlivé prvky layoutu, čímž dosáhnete jejich odsazení od okraje prohlížeče o pět pixelů. Toto bohužel není možné udělat v selektoru body, protože Opera používá místo vlastnosti margin vlastnost padding. Pokud byste do obou vlastností vložili hodnotu 5 px, v Internet Exploreru a Mozille by bylo odsazení dvakrát větší, tedy 10 pixelů. Tento postup je navíc mnohem jednodušší v tom, že není potřeba vkládat ke každému prvku layoutu potřebné dílčí vlastnosti margin pro odsazení.
7. Vytvořte další třídu, která bude sloužit pro vytvoření hlavičky layoutu. Protože vytváříte plovoucí design, jehož šířka se bude měnit v závislosti na velikosti okna prohlížeče, stanovte šířku hlavičky pomocí vlastnosti width na 100 %. Dále pomocí vlastnosti margin-bottom odsaďte o 5 pixelů od této hlavičky prostor pro reklamní proužek:
.hlavicka {
width: 100%;
margin-bottom: 5px;
background-color: #b9b9b9;
} |
|
8. Nyní začnete vytvářet prostor pro reklamní proužek, který bude zarovnán na horizontální střed okna prohlížeče. Kdyby byla reklama zarovnána napravo, nevypadalo by to totiž dobře. Následující třída .banner-ie s vlastností text-align zajistí umístnění reklamního proužku na horizontální střed v Internet Exploreru 5.0 i přesto, že tento prohlížeč nepodporuje hodnotu auto u vlastnosti margin, která podle specifikace CSS slouží k zarovnání boxu na střed a kterou použijete v dalším kroku. Proč jste ale použili vlastnost text-align, která podle specifikace CSS slouží pouze k zarovnávání inline prvků (text, obrázky) a která by tedy neměla vůbec pomoci? V rozporu se specifikací CSS totiž zarovnává i blokové prvky a „supluje“ tak hodnotu auto pro vlastnost margin:
.banner-ie {
text-align: center;
} |
|
9. Nyní konečně vytvoříte samotnou třídu .banner, která bude později v HTML kódu aplikována na prvek <div>. Ten bude vnořen do jiného prvku <div > s třídou .banner-ie popsanou v kroku 8. Rozměry reklamího proužku si nemusíte vymýšlet, jsou standardizovány, takže do vlastnosti width vložte hodnotu 468 px a do vlastnosti height vložte hodnotu 60 px. Nyní je potřeba reklamní proužek, resp. prostor pro něj, zarovnat na střed. To uděláte pomocí vlastností margin-left a margin-right s hodnotou auto. Pomocí další dílčí vlastnosti margin-bottom odsadíte další prvky layoutu o pět pixelů od prostoru pro reklamní banner. A nakonec, pomocí vlastnosti text-align s hodnotou left, zrušíte centrování obsahu tohoto prvku na střed, které bylo nastaveno v kroku 8:
.banner {
width: 468px;
height: 60px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
text-align: left;
background-color: #cccccc;
} |
|
10. Nyní se konečně pustíte do vytváření jednotlivých sloupců. Začněte třeba levým sloupcem. Třídu pojmenujte např. jako .left a protože jste se již předem rozhodli, že levý sloupec bude široký 150 pixelů, dáte to prohlížeči vědět vložením pravidla width: 150px. Výška sloupce definovaná pomocí vlastnosti height zde není povinná – sloupec bude vysoký podle toho, kolik v něm bude textu. Tato vlastnost je zde vlastně pouze pro demonstraci ukázky na konci tipu. Ještě musíte někde stanovit, že tento sloupec se zarovná doleva. Pomocí pravidla float: left z něj uděláte plovoucí box a současně jej zarovnáte vlevo:
.left {
width: 150px;
height: 250px;
float: left;
background-color: #cccccc;
} |
|
11. Definice třídy .right, která bude použita pro vytvoření pravého sloupce, se prakticky neliší od definice pro levý sloupec. I tento sloupec bude široký přesně 150 pixelů, vysoký 250 pixelů (není nutné definovat), ale protože se jedná o pravý sloupec, musíte ho pochopitelně zarovnat vpravo, a nikoli vlevo. To dosáhnete pomocí pravidla float: right:
.right {
width: 150px;
height: 250px;
float: right;
background-color: #cccccc;
} |
|
12. Vytvořte definici stylu pro prostřední, hlavní sloupec. Ten bude originálně (jak už bývá zvykem) pojmenován jako middle. Jelikož tvoříte plovoucí layout, neznáte předem šířku tohoto sloupce. Přesto ale víte, že nesmí zasahovat do prostoru levého a pravého sloupce, jejichž šířku znáte, protože jste ji definovali v předchozích dvou krocích. Pomocí vlastnosti margin-left odsadíte prostřední sloupec z levé strany o 155 pixelů, a pomocí vlastnosti margin-right odsadíte prostřední sloupec ještě z pravé strany o 155 pixelů. Těch pět pixelů navíc z každé strany je zde proto, aby nebyl prostřední sloupec úplně nalepen na oba krajní sloupce. Vlastnost height zde není povinná a slouží pouze pro lepší demonstrací celého příkladu na ilustračním obrázku na konci tipu:
.middle {
margin-left: 155px;
margin-right: 155px;
height: 120px;
background-color: #dedede;
} |
|
13. Definujte styl pro poslední část layoutu – patičku. Třídu, na niž se budete v HTML později odkazovat pomocí atributu class, pojmenujte jako .patička, šířku patičky stanovte na 100 % velikosti okna prohlížeče a pomocí vlastnosti margin-top ji ještě odsaďte o pět pixelů od všech tří sloupců. Nakonec ještě musíte prohlížeči říci, že má patičku umístit za všechny tři sloupce – pravidlo clear: both:
.paticka {
width: 100%;
margin-top: 5px;
clear: both;
background-color: #b9b9b9;
} |
|
14. Uzavřete poznámku a ukončete celou definici stylu:
15. Nyní budete vytvářet konstrukci prvků <div> v HTML kódu. Začnete hlavním, zastřešujícim prvkem <div> s třídou main, do kterého umístíte (vnoříte) všechny ostatní části layoutu. Tento zastřešující prvek odsadí všechny části layoutu od okraje prohlížeče o pět pixelů:
16. Vložte další prvek <div> s atributem class a hodnotou hlavicka, čímž z tohoto prvku vytvoříte hlavičku layoutu. Mezi značky <div> a </div> vložte nějaký obsah:
<!– hlavička designu –>
<div class=“hlavicka“>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div> |
|
17. Zadáte HMTL definici pro reklamní proužek. Jako první použijete <div> s třídou banner-ie, který následující obsah prvku <div> zarovná v Internet Exploreru na střed. Do druhého prvku <div> vložíte pomocí atributu class nadefinovanou třídu banner, a tím dosáhnete zarovnání na střed i pro ostatní prohlížeče (Opera, Mozilla). Kdyby Internet Explorer 5.0 podporoval hodnotu auto u vlastnosti margin, nebylo by potřeba definovat a také používat speciálně vytvořenou třídu banner-ie (to jen tak pro úplnost). Oba prvky <div> nezapomeňte uzavřít pomocí </div>:
<!– prostor pro reklamní banner –>
<div class=“banner-ie“><div class=“banner“>Prostor pro reklamní banner</div></div> |
|
18. HTML definice pro levý sloupec také není složitá:
<!– levý sloupec –>
<div class=“left“>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div> |
|
19. Definice v HTML pro pravý sloupec je podobná definici pro levý sloupec, jenom se změnila hodnota v atributu class z hodnoty left na hodnotu right:
<!– pravý sloupec –>
<div class=“right“>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div> |
|
20. Po levém a pravém sloupci ještě zbývá vytvořit prostřední sloupec:
<!– prostřední sloupec –>
<div class=“middle“>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div> |
|
21. Poslední částí designu je patička:
<!– patička –>
<div class=“paticka“>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div> |
|
22. Uzavřete prvek <div>, který jste otevřeli v kroku 15:
23. Ukončete tělo HTML dokumentu pomocí uzavírací značky </body> a pomocí uzavírací značky </html> ukončete celý HTML dokument:
Pomocí CSS je tedy možné udělat třísloupcový plovoucí layout s patičkou, v němž nezáleží na délce prostředního sloupce. To je totiž problém třísloupcového plovoucího layoutu s patičkou, ve kterém je kombinováno absolutní pozicování s relativním.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Jefry
Bře 25, 2010 v 10:17Dobrý den,
Chtěl bych se zeptat co mám udělat když neurčím výšku levého a pravého sloupce a budu psat do „midle“ tak se mi nebude opakovat background-color v levém a pravém sloupci.
Viz. ukázka: http://mxvsatv.xf.cz/web/interval/
Předem díky za odpověď.