Při našem projektu ve skutečné praxi předpokládám typické rozložení sloupců. Než ale tento projekt představím živě a barevně, chci vám konkrétně ukázat, jak můžete sami realizovat rozložení sloupců. Zaměřím se na dvou sloupcové a třísloupcové rozložení, protože ty stále tvoří základ většiny webových stránek.
Králem mezi webovým designem je bezpochyby dvousloupcový layout. V levé části se obvykle zobrazuje navigace, zatímco v pravém sloupci je vidět samotný obsah. S blogy se tato situace trochu změnila. Ve skutečnosti se ve mnoha blocích zobrazuje navigace nebo reklama vpravo, zatímco vlevo se zobrazuje samotný obsah.
Takové aplikace lze v CSS relativně snadno realizovat. Ve skutečnosti jsou dvousloupcové layouty nejjednodušší forma rozložení.
V následujícím příkladu ukážu dvousloupcový layout, který se obejde s absolutními procentuálními hodnotami.
Zde je kompletní příklad:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
position: absolute;
left: 0;
margin: 0;
width: 20%;
background-color:#66CCCC;
}
#main {
margin: 0;
margin-left: 20%;
width: 80%;
background-color:#6666CC;
}
</style>
</head>
<body>
<div id="header">Layout s absolutní pozicí</div>
<div id="nav">Navigace</div>
<div id="main">Toto je obsahová oblast</div>
<div id="footer">Zde jsou zobrazeny informace o autorských právech.</div>
</body>
</html>A tak to vypadá v prohlížeči:
Můžete jednoduše posunout levý sloupec doprava. K tomu upravte následující:
• U #nav změňte hodnotu left: 0 na right: 0.
• U #main jednoduše změňte margin-left na margin-right.
Po uložení změn uvidíte požadovaný výsledek.
Problém s layoutem založeným na absolutní pozici, který byl zobrazen, spočívá v tom, že pokud se obsah levého sloupce stane rozsáhlejší, překračuje dolní část stránky.
Důvodem je prostý fakt, že pro absolutní pozicované elementy není "uvolněno místo". Tento problém lze obejít tím, že do hlavní oblasti vložíte odpovídající obsah, který je delší než v levém sloupci.
Takovou formu rozložení byste měli používat jen tehdy, jste si jisti, že hlavní oblast je skutečně vyšší než levý (nebo pravý) sloupec.
Dvousloupcový layout s float
Problém s překrývající se dolní částí, který byl uveden v předchozím příkladu, lze vyřešit použitím vlastnosti float. Upravená syntaxe vypadá následovně:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 80%;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Layout s absolutní pozicí</div>
<div id="nav">Prostor pro navigaci</div>
<div id="main">Toto je obsahová oblast</div>
<div id="footer">Zde jsou zobrazeny informace o autorských právech.</div>
</body>
</html>Zde jsou obě sloupce vybaveny vlastností float. Tím jsou sloupce nyní umístěny vedle sebe.
Levý sloupec dostane šířku 20 procent. Hlavní důraz klade na to, že element positionovaný pomocí float vždy vyžaduje specifikaci šířky.
Skutečná obsahová oblast dostane šířku 80 procent. I tato oblast je postavena na vlastnosti float: left. Díky tomu je tato oblast zobrazena vedle levého sloupce.
Aby byla dolní oblast skutečně v dolní části okna - tedy pod sloupci - použijte následující syntax:
#footer {
clear: both;
}
Již jsem upozornil na možnost definovat vlastní třídu pro tuto variantu.
Třísloupcový layout s float
Také třísloupcový layout je v oblasti webdesignu často používanou variantou. Typické rozdělení vypadá takto:
• Levý sloupec obsahuje navigaci.
• Ve středním sloupci je hlavní obsah.
• Vpravo jsou zobrazovány další informace nebo reklama.
Níže najdete příklad, ve kterém je vytvořen flexibilní třísloupcový layout. Syntaxe je - jak si ihned všimnete - podobná předchozímu dvousloupcovému layoutu. Jen zde existuje s right další div oblast, která nakonec reprezentuje pravý okenní sloupec.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#main, #right {
margin: 0;
border: 0;
padding:0;
}
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 60%;
}
#right {
float: right;
width: 20%;
background-color:#6699FF;
}
#footer {
clear: both;
} </style>
</head>
<body>
<div id="header">Layout s absolutní pozicí</div>
<div id="nav">Oblast pro navigaci</div>
<div id="main">Toto je obsahová oblast</div>
<div id="right">To je pravý sloupec</div>
<div id="footer">Zde jsou copyright informace</div>
</body>
</html>
Nové oblasti byla přiřazena šířka 20 procent, takže rozdělení vypadá následovně:
• Levý a pravý sloupec zaberou každý 20 procent dostupného zobrazení.
• Střední sloupec má šířku 60 procent.
Díky zobrazené syntaxi je right oblast skutečně zobrazena vpravo.
Syntaxe je v tomto ohledu však flexibilní. Můžete upravit i main oblast následovně:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Zde byl float nastaven na right. Tím se right oblast přesune doleva.
V tomto návodu jste viděli, jak snadno lze pomocí float definovat základní rozložení. Toto znalost nyní slouží jako základ pro tvorbu webové stránky. V následujících návodech vznikne webová stránka krok za krokem, s počáteční kostrou.
