Toto je 2. díl seriálu Layout stránky, pokud se dostatečně neorientujete, zkuste první díl.
Toto je 2. díl seriálu Layout stránky, pokud se dostatečně neorientujete, zkuste první díl.
V minulém seriálu jsme si ukázali vytvoření dvousloupcového layoutu. Dnes se podíváme, jak přidat ještě jeden sloupec vpravo. Vznikne nám třísloupcový layout s pevnou a pružnou šířkou.
Před zahájením stylování si připravíme HTML soubor s kostrou stránky. Jedná se o jednoduchý HTML soubor s hlavičkou a třemi sloupci, kdy krajní sloupce jsou stejné šířky a sloupec prostřední je větší. Vše je obaleno v bloku <div> s třídou obal stránky. Do hlavičky vložíme nadpis stránky <h1>. Do levého sloupce vložíme jednoduché menu, které vytvoříme pomocí seznamu <ul>. Prostřední sloupec bude obsahovat dva odstavce textu <p> a nakonec třetí pravý sloupec bude obsahovat obrázek <img> a jeden odstavec textu <p>.
Externí soubor s kaskádovými styly připojíme k našemu dokumentu pomocí tagu <link> umístěného v hlavičce <head>.
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Třísloupcový layout</title><link rel="stylesheet" href="styl-pevny.css" type="text/css"></head><body><div class="obal-stranky"><div class="hlavicka"><h1>Nadpis umístěný v hlavičce</h1></div><div class="levy-sloupec"><div class="menu"><h2>Navigace</h2><ul><li>1. položka v menu</li><li>2. položka v menu</li><li>3. položka v menu</li><li>4. položka v menu</li></ul></div></div><div class="pravy-sloupec"><img src="/_sample/img.png" alt="Logo webu" style="width: 160px; height: 160px;"><p>Krátky popis obrázku.</p></div><div class="prostredni-sloupec"><h3>Nadpis obsahové části</h3><div class="obsah"><p>První odstavec textu v HTML dokumentu.</p><p>Druhý odstavec textu v HTML dokumentu.</p></div></div><div class="paticka"><p>Odstavec umístěný v patičce.</p></div></div></body></html>
V případech, kdy nám nestačí klasický dvousloupcový layout, lze sáhnout k další variantě. Tím je třísloupcový layout. Začneme lehčí variantou a to pevným layoutem. Ten poznáte podle toho, že šířky prvků jsou definovány v pixelech.
Pomocí externího CSS souboru zahájíme nastavování vlastností jednotlivých prvků. Začneme u hlavního obalu stránky. Třídě .obal-stranky nastavíme šíří na 960 pixelů. Pomocí vlastnosti margin vycentrujeme celou stránku na střed a přidáme ohraničení díky vlastnosti border.
Posuneme se k nastavení vlastnosti hlavičky. Blok s třídou .hlavicka bude obsahovat vlastnosti šířky 960px a výšky 80px. Přidáme vycentrování textu text-align na střed a také spodní ohraničení pomocí vlastnosti border.
Dostali jsme se ke sloupcům. Budeme mít tři sloupce. Levý sloupec s třídou .levy-sloupec obsahuje vlastnost šířky width s hodnotou 180px a výšku bloku height s hodnotou 250px. Obtékání float nastavíme na hodnotu left, tím se celý blok ukotví na levou stranu a další bloky jej budou obtékat zprava. K oddělení levého sloupce od prostředního použijeme pravé ohraničení neboli border-right. Pravý sloupec bude obsahovat stejnou šířku i výšku. Pouze změníme obtékání na hodnotu right, aby se blok přikotvil k pravé straně dokumentu. Ohraničení bloku definuje vlastnost border-left. Vložený obrázek <img> a odstavec <p> v pravém sloupci vycentrujeme pomocí vlastnosti text-align na střed.
Poslední prostřední sloupec s třídou .prostredni-sloupec se automaticky vsune mezi levý a pravý sloupec, právě díky předchozímu nastavení obtékání levého a pravého sloupce. Abychom jeho oblast vymezili přesně, přidáme do vlastností prostředního sloupce odsazení zleva a zprava neboli margin-left a margin-right s hodnotou šířky předchozích sloupců, tedy 180px.
V patičce dokumentu nastavíme šířku na hodnotu 960px, což je šířka celého dokumentu. Výška bude 35px a odstavec vložený do patičky vycentrujeme na střed. Přidáme horní ohraničení, vlastnost border-top a ukončíme obtékání prvků pomocí vlastnosti clear a hodnoty both. Tím se ukončí obtékání v obou směrech.
styl-pevny.css
.obal-stranky{width: 960px;margin: auto;border: 1px solid black;}.hlavicka{width: 960px;height: 80px;border-bottom: 2px solid black;text-align: center;}.levy-sloupec{width: 180px;height: 250px;float: left;border-right: 1px dotted grey;}.pravy-sloupec{width: 180px;height: 250px;float: right;border-left: 1px dotted grey;text-align: center;}.prostredni-sloupec{margin-left: 180px;margin-right: 180px;}.paticka{width: 960px;height: 35px;text-align: center;border-top: 2px dotted black;clear: both;}
Jak už jsme si řekli na začátku článku, rozdíl mezi pevným a pružným layoutem je v použití jednotek u šířky prvků. Změníme tedy všechny šířky prvků v CSS souboru na procenta. Obalu stránky, hlavičce i patičce změníme šířku width na hodnotu 100%. Tím se roztáhnou do celého okna prohlížeče.
Levému a pravému sloupci nastavíme šířku width například na 20%. Zbylý prostor získá prostřední sloupec. Pomocí odsazení margin-left a margin-right posuneme oblast prostředního sloupce více na střed dokumentu. Hodnoty odsazení budou 25%. Vznikne mezera mezi oběma předešlými sloupci. Ostatní vlastnosti ponecháme stejné.
styl-pruzny.css
.obal-stranky{width: 100%;margin: auto;border: 1px solid black;}.hlavicka{width: 100%;height: 80px;border-bottom: 2px solid black;text-align: center;}.levy-sloupec{width: 20%;height: 250px;float: left;border-right: 1px dotted grey;}.pravy-sloupec{width: 20%;height: 250px;float: right;border-left: 1px dotted grey;text-align: center;}.prostredni-sloupec{margin-left: 25%;margin-right: 25%;}.paticka{width: 100%;height: 35px;text-align: center;border-top: 2px dotted black;clear: both;}
Na závěr článku si probereme ještě základní poznatky.
V pevného třísloupcového layoutu zadáváme všechny potřebné šířky prvků v pixelech. Díky tomu máme přesně dáno, jak bude celý web vypadat. Pokud chceme mít web flexibilní, aby se přízpůsoboval šířce okna prohlížeče, tak využijeme pružný layout. Zde definujeme šířky prvků v procentech. Obtékání bloků <div> zajistíme pomocí vlastnosti float. Pro ukončení obtékání použijeme vlastnost clear.
