Pri návrhu našeho projektu predpokladám typické stĺpcové rozloženie. Pred tým, než vám tento projekt predstavím naživo a farebne, chcem vám konkrétne ukázať, ako sami môžete vytvoriť stĺpcové rozloženie. Zameriame sa hlavne na dvoj- a trojstĺpcové rozloženia, pretože tieto stále tvoria základ väčšiny webových stránok.
Absolútnym klasikom v webdizajne je asi dvojstĺpcové rozloženie. Ľavý stĺpec zvyčajne slúži na navigáciu, zatiaľ čo v pravom stĺpci sa zobrazuje samotný obsah. V spojení s blogmi sa toto správanie trochu zmenilo. V mnohých blogoch sa totiž v pravom stĺpci zobrazuje navigácia alebo reklama, zatiaľ čo v ľavom stĺpci sa zobrazuje samotný obsah.
Takéto aplikácie sa dajú pomerne jednoducho vytvoriť pomocou CSS. Dvojstĺpcové rozloženia sú skutočne najjednoduchšou formou rozloženia.
V nasledujúcom príklade ukážem dvojstĺpcové rozloženie, ktoré sa úplne dostane bez absolútnych percentuálnych hodnôt.
A tu je kompletný prí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">Rozloženie s absolútnym pozicionovaním</div>
<div id="nav">Navigácia</div>
<div id="main">Toto je oblasť obsahu</div>
<div id="footer">Tu sú copyright informácie.</div>
</body>
</html>A takto to vyzerá v prehliadači:
Môžete ľahko posunúť ľavý stĺpec doprava. Na to upravte nasledujúce inštrukcie:
• Pri #nav zmeňte hodnotu left: 0 na right: 0.
• Pri #main jednoducho zmeňte margin-left na margin-right.
Po uložení zmien uvidíte želaný výsledok.
Problém tohto ukázaného rozloženia na základe absolutnej pozície však spočíva v tom, že ak bude obsah ľavého stĺpca obsiahlejší, prekryje spodnú oblasť.
Proste sa to deje preto, že pre absolutne pozícionované elementy nie je vyhradené miesto. Tento problém sa dá obísť pridaním vhodných obsahov do hlavného bloku, ktoré sú dlhšie ako v ľavom stĺpci.
Tomto druhu rozloženia by ste mali používať len v prípade, keď ste si istí, že hlavný blok je skutočne vyšší než ľavý (alebo pravý) stĺpec.
Dvojstĺpcové rozloženie s float
Problém s prekrytím spodnej oblasti z predchádzajúceho príkladu sa dá vyriešiť pomocou vlastnosti float. Zmenená syntax vyzerá nasledovne:
<!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">Rozloženie s absolútnym pozicionovaním</div>
<div id="nav">Oblasť pre navigáciu</div>
<div id="main">Toto je oblasť obsahu</div>
<div id="footer">Tu sú copyright informácie.</div>
</body>
</html>Oba stĺpce boli vybavené vlastnosťou float. Vďaka tomu sú stĺpce odteraz vedľa seba.
Ľavému stĺpcovi bola pridelená šírka 20 percent. Dávajte pozor, že element umiestnený pomocou float vždy očakáva určenú šírku.
Samotná oblasť obsahu dostala šírku 80 percent. Aj túto oblasť sme umiestnili pomocou float: left, čo spôsobilo zobrazenie tejto oblasti vedľa ľavého stĺpca.
Aby sa zabezpečilo, že sa pätová oblasť skutočne v dolnej oblasti okna - teda pod stĺpcami - zobrazuje, použite túto syntax:
#footer {
clear: both;
}
Juž som vás upozornil na možnosť definovania vlastnej triedy pre túto variantu.
Trojstĺpcové rozloženie s float
Aj trojstĺpcové rozloženie je v webdizajne obľúbenou variantou. Typické rozdelenie vyzerá takto:
• Ľavý stĺpec obsahuje navigáciu.
• V strednom stĺpci je samotný obsah.
• Vpravo sa zobrazujú ďalšie informácie alebo reklama.
Nižšie máte príklad, ako vytvoriť flexibilné trojstĺpcové rozloženie. Syntax je - ako si ihneď všimnete - veľmi podobná dvojstĺpcovému rozloženiu, ktoré sme ukázali predtým. Avšak teraz tu je s right ďalší div blok, ktorý nakoniec predstavuje pravý okenný stĺpec.
<!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 absolútnym pozicionovaním</div>
<div id="nav">Oblasť pre navigáciu</div>
<div id="main">Toto je obsahová oblasť</div>
<div id="right">Toto je pravý panel</div>
<div id="footer">Tu sú informácie o autorských právach.</div>
</body>
</html>
Novému oblasti bola priradená šírka 20 percent. Rozloženie teda vyzerá nasledovne:
• Ľavý a pravý panel zaberajú každý 20 percent dostupného zobrazovacieho priestoru.
• Stredný panel má šírku 60 percent.
Ukázaným syntaxou je right oblasť skutočne zobrazená vpravo.
Syntakticky je v tomto bode však flexibilný. Môžete prispôsobiť hlavnú oblasť aj nasledovne:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Tu bol float nastavený na right. Tým sa right oblasť posunie doľava.
V tomto tutoriáli ste videli, ako jednoducho je možné definovať základné rozloženie pomocou float. Tieto poznatky teraz tvoria základ pre vytvorenie webovej stránky. V nasledujúcich tutoriáloch sa postupne vybuduje webová stránka, začnúcich základnou kostrou.
