Třísloupcový layout webu pomocí CSS

8. srpna 2001

•

Pokud se teď podíváte na libovolný web u nás či v zahraničí, zjistíte, že jeho layout je na v drtivé většině webů vytvořen pomocí tabulek v HTML. Původní záměr tvůrců HTML byl ten, že tabulky budou sloužit pro sazbu různých číselných údajů, ale to pochopitelně nijak nezabránilo tomu, aby je webdesigneři nezačali používat i pro tvorbu layoutu a designu webu. Pěkný design webu se ale dá udělat – už nějakou dobu – i bez tabulek, pouze s využitím kaskádových stylů…

Důvod, proč se zatím vytváření layoutu pomocí CSS zatím pořádně nerozšířilo, je ten, že stále významné procento uživatelů používá totálně zastaralé prohlížeče, které na tom s podporou CSS nejsou příliš dobře (např. Netscape Navigátor 4.xx). Zejména u komerčních webů je například 4-5 procentní podíl uživatelů Netscape 4.xx docela významný, protože v absolutních hodnotách je to třeba 2400 čtenářů měsíčně, o které byste tak přišli. Naštěstí to neplatí u všech webů, jmenujme např. Sovu v síti, která má design a vůbec celý web postaven na kaskádových stylech.

Ale dost nářků nad zastaralými prohlížeči, ukažme si to, co je cílem tohoto článku. Tím bude třísloupcová sazba pomocí CSS, kdy levý a pravý sloupec bude mít fixní velikost a rozměr prostředního sloupce bude volný, bude tedy závislý na velikosti okna prohlížeže. Ostatně – stejné rozložení sloupců je i zde, na Interval.cz, takže vám je určitě jasné, o co jde.

Ukázku naleznete zde

Část body

Ve stylu pro body nadefinujeme vlasnosti společné pro celý dokument, např. druh písma, jeho velikost, barvu nebo také odsazení nulové obsahu stránky od okraje prohlížeče – margin (obdoba leftmargin a topmargin v HTML). Pokud se podíváte na níže uvedený styl, zjistíte, že je zde uvedena také vlastnost padding, která by zde vlastně vůbec nemusela být. Je to díky Opeře, která v případě, že je definován margin pro body, vkládá „automatický“ padding o velikosti asi 5 pixelů. Smysl tohoho kroku mi není jasný, a proto, pokud chcete mít nulové okraje v prohlížečích dobře podporující CSS (Explorer 5, Mozilla, Opera, Netscape 6), pak nezapomeňte také vložit pro body vlastnost padding: 0px;

body {
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
font-family: „arial ce“, „helvetica ce“, arial, helvetica, sans-serif;
color: #000000;
font-size: 13px;
}

Ve stylu je využito kráceného zápisu vlastností pro padding a margin. Nemá totiž smysl definovat zvlášt rozměry z levé strány (margin-left), z pravé strany (margin-right) atd., když tyto rozměry jsou stejné.

Levý sloupec:

U levého sloupce jsme předem zvolili, že bude mít šířku 150 pixelů, výšku 300 pixelů, a bude pozicován absolutně (v našem případě k okraji prohlížeče), zleva 20 pixelů, zeshora také 20 pixelů a barva sloupce bude světle šedá (#d8d8d8). A takto vypadá definice stylu pro levý sloupec:

.left-column {
position: absolute;
width:150px;
height: 300px;
left:20px;
top: 20px;
background-color: #d8d8d8;
}

Pravý sloupec:

Pravý sloupec bude mít stejné rozměry a nastavení jako levý sloupec, jenom bude pochopitelně pozicován doprava.

.right-column {
position: absolute;
width:150px;
height: 300px;
right:20px;
top: 20px;
background-color: #d8d8d8;
}

Prostřední sloupec:

A zbývá nám ješte vytvořit styl pro prostřední sloupec, který bude mít – jak už jsem psal na začátku článku – volný rozměr. Velikost, respektive šířka prostředního sloupce tak bude záviset na velikosti okna prohlížeče a proto je potřeba použít relativní souřadnice a odsadit tento sloupec z levé a pravé strany (třeba o deset pixelů), aby nezasahoval do levého a pravého sloupce:

.middle-column {
position: relative;
width: auto;
margin-left: 180px;
margin-right:180px;
margin-top:20px;
background-color: #99ccff;
}

Jak vidět, je to docela snadné, ale mě osobně to dalo nějakou práci, než jsem výše uvedené styly vytvořil a prověřil v prohlížečích při přípravě CSS verze Interval.cz.

A takto budou vypadat HTML kód pro jednotlivé sloupce:

<div class=“middle-column“>Střední sloupec</div>
<div class=“left-column“>Levý sloupec</div>
<div class=“right-column“>Pravý sloupec</div>

V tomto případě je přitom jedno, jak jsou jednotlivé DIVy poskládány za sebou v HTML. Prostřední sloupec může být v HTML klidně nad levým a pravým sloupcem, výsledný vzhled stránky to nijak neovlivní a přitom to usnadní prohlížení stránky v textovém prohlížeči, kdy bude hlavní obsah stránky v prostředním sloupci viditelný dříve než méně důležitější levý a pravý sloupec.

A takto by mohl vypadat celý kompletní zdrojový kód příkladu:

<html>
<head>
<title>Tři sloupce</title>

</head>
<body>
<style>
<!–
body {
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
font-family: „ARIAL CE“, „HELVETICA CE“,“ARIAL“,“HELVETICA“, „sans-serif“;
color: #000000;
font-size: 12px;
}
.left-column {
position: absolute;
width:150px;
height: 300px;
left:20px;
top: 20px;
background-color: #d8d8d8;
}
.right-column {
position: absolute;
width:150px;
height: 300px;
right:20px;
top: 20px;
background-color: #d8d8d8;
}
.middle-column {
position: relative;
width: auto;
margin-left: 180px;
margin-right:180px;
margin-top:20px;
background-color: #99ccff;
}
–>
</style>
<div class=“middle-column“>Střední sloupec</div>
<div class=“left-column“>Levý sloupec</div>
<div class=“right-column“>Pravý sloupec</div>
</body>
</html>

Díky použití absolutního a relativního rozměru můžou občas vzniknout drobné problémy, protože absolutní a také relativní rozměr mají v našem případě náhodou shodné hodnoty a také se vztahují k okraji stránky, což ale nemusí platit vždy. Představce si, že nad těmito třemi sloupci máte ještě nějaký obsah pozicovaný relativně. Pak se bude prostřední, také relativně pozicovaný sloupec, „počítat“ od tohoto obsahu, kdežto absolutní hodnoty se budou stále počítat od okraje stránky a pokud byste tento rozměr ponechali stejný jako u prostředního, relativního sloupce, pak levý a pravý sloupec překryje horní obsah – musíte prostě zjistit rozměr horní části a ten poté připočíst k absolutním souřadnicím levého a pravého sloupce.