Od provozovatele projektu Rychlost.CZ

Třísloupcový layout - Layout stránky

vydáno: 03.03.2016, seriál: Layout stránky | komentářů: 0

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>.

Ukázka:
HTML
<!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>

Třísloupcový pevný layout

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.

Zobrazit ukázku
Ukázka:

styl-pevny.css

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;
}

Třísloupcový pružný layout

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é.

Zobrazit ukázku
Ukázka:

styl-pruzny.css

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.

HTML: návody jak psát html tagy
CSS: návody na kaskádovité styly