Připravili jsme si pro Vás ukázku, jak vytvořit jednoduchý dvousloupcový layout. Ukážeme si dvě varianty a to pevný dvousloupcový layout a pružný dvousloupcový layout.
Připravili jsme si pro Vás ukázku, jak vytvořit jednoduchý dvousloupcový layout. Ukážeme si dvě varianty a to pevný dvousloupcový layout a pružný dvousloupcový layout.
Na začátku si musíme vytvořit HTML stránku na které budeme naše layouty zkoušet. Abychom to nekomplikovali, tak zde máme velice jednoduchou strukturu dokumentu. Obal stránky je rozdělen na hlavičku s nadpisem <h1>, déle na dva dloupce a patičku. Levý sloupec obsahuje nadpis <h2> a menu vytvořené pomocí seznamu <ul>. Pravý sloupec obsahuje nadpis <h3> a obsahovou část dokumentu. My jsme zvolili pouze dva odstavce <p>. Celý dokument uzavírá patička také s odstavcem <p>.
Externí soubor s daným stylem připojíme pomocí tagu <link> v hlavičce <head>.
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Dvousloupcový 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"><h3>Nadpis obsahové části</h3><div class="obsah"><p>Odstavec stránky</p><p>Další odstavec stránky</p></div></div><div class="paticka"><p>Odstavec umístěný v patičce</p></div></div></body></html>
Nyní můžeme přejít na první verzi dvousloupcového layoutu.
Tento typ layoutu je nejjednodušší možnost, kdy všem prvkům přesně definujeme jejich šířku.
Náš HTML dokument začneteme postupně stylovat pomocí externího souboru. Jako první jsme nastavili vlastnosti třídy obalu stránky .obal-stranky. Zde pevně určímě šířku celého dokumentu, a to je 960 pixelů. Celý blok můžeme také vycentrovat pomocí vlastnosti margin a hodnotě auto. Abychom to i pěkně viděli, přídáme celému obalu vlastnost ohraničení border.
Když se nyní podíváte v prohlížeči na HTML soubor, měla by být celá stránka vycentrována na střed s černým ohraničením.
Pokračovat budeme hlavičkou. Zde také nastavíme šířku na 960 pixelů a přídáme výšku hlavičky pomocí vlastnosti height. Přidali jsme spodní ohraničení ať viditelně hlavičku uzavřeme a vystředíme nadpis na střed.
Nyní příchází na řadu levý sloupec. Šířku nastavíme na 180 pixelů a výšku na 250 pixelů. Protože chceme zajistit, aby levý sloupec byl skutečně pouze vlevo a žádný jiný prvek ho nepřekryl, přidáme vlastnost float:left. Tím zajistíme, že všechny následující bloky budou obtékat náš levý slopec z jeho pravé strany. Abychom odlišili levý a pravý sloupec, přídáme levému sloupci pravé ohraničení.
Pravému sloupci přídáme také šířku width:750px, výšku definovat nebudeme vypočítá se automaticky dle obsahu. Poslední nutnou vlastností toho sloupce je obtékání float. Hodnota obtékání bude right, neboli zprava. Pravý sloupec se nalepí na pravou stranu HTML dokumentu.
Posledním prvkem je patička. Patičce jsme také nastavili šířku, výšku, zarovnání textu na střed a ohraničení shora. Důležitou vlastností je ovšem ukončení obtékání neboli clear. Tím zajistíme že následující prvky stránky, již nebudou vlastností float nijak ovlivněny. Hodnota both určuje, že bude ukončeno obtékání jak zleva, tak zprava.
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: 750px;float: right;}.paticka{width: 960px;height: 35px;text-align: center;border-top: 2px dotted black;clear: both;}
Pružný layout se liší od toho pevného tím, že se šířka prvků v HTML dokumentu mění podle šířky okna prohlížeče. Změníme tedy v css souboru pouze hodnoty šířky prvků z pixelů na procenta. U hlavních prvků, kde je šířka stejná jako šířka celého obalu stránky, změníme hodnotu 960px na 100%. Layout se roztáhne na celou šířku okna prohlížeče.
Při nastavení šířky sloupců již musíme trochu počítat. Pokud hodláme zachovat podobný poměr mezi sloupci jako v pevném layoutu, tak nám vychází, že levý sloupec by měl být široký okolo 20%. Nastavíme tedy vlastnost width na 20%. Pravému sloupci přidělíme 79% a jedno procento si necháme pro případné ohraničení.
Když nyní začnete okno prohlížeče zmenšovat, přízpůsobí se velikost HTML dokumentu tak, aby se zobrazil celý dokument bez posůvníků ve spodní liště.
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: 79%;float: right;}.paticka{width: 100%;height: 35px;text-align: center;border-top: 2px dotted black;clear: both;}
Na zavěr si ještě zopakujeme dnešní hlavní poznatky.
U pevného layout nastavíme v kaskádových stylech šířku všech prvků v pixelech. Oproti tomu pružný layout je založen na šířkách prvků udávaných v procentech. Umístění sloupců definujeme pomocí vlastnosti float, podle toho jak chceme aby ostatní prvky náš sloupec obtékaly. Do vlastností prvku, který již nemá obtékání podporovat zadáme vlastnost clear. Tím se obtékání ukončí.
