HTML & CSS pro začátečníky

HTML & CSS pro začátečníky (Část 40): Rozložení se dvěma a třemi sloupci

Všechna videa tutoriálu HTML a CSS pro začátečníky

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.

HTML & CSS pro začátečníky (část 40): Rozložení s dvěma a třemi sloupci


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:

HTML & CSS pro začátečníky (část 40): Rozložení ve dvou a třech sloupcích



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.

HTML & CSS pro začátečníky (část 40): Layouty se dvěma a třemi sloupci

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.

HTML & CSS pro začátečníky (část 40): Rozložení ve dvou a třech sloupcích.

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.

HTML & CSS pro začátečníky (část 40): Rozložení do dvou a tří sloupců



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.

HTML & CSS pro začátečníky (část 40): Dvou- a třísloupcové rozložení



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.

HTML & CSS pro začátečníky (část 40): Dvou- a třísloupcové rozložení

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.