Fixný layout
Článok síce nemá za cieľ objasniť rozdiely medzi fixným (pevným), fluidným (pružným) a adaptívnym (prispôsobivým) layoutom (teda rozvrhnutia stránky), no spomeniem aspoň základné vlastnosti fixného. Pri použití fixného layoutu sú plusy aj mínusy. Plusom určite je jednoduchosť návrhu a spracovania. Autor má tiež plnú kontrolu nad presným rozvrhnutím stránky. Naopak, mínusom je hlavne žiadna prispôsobivosť a problémy s prehliadaním stránky na rozlíšeniach, ktoré sú buď menšie ako veľkosť layoutu (používanie horizontálneho posuvníka je veľmi nežiadúce) alebo naopak príliš veľké - stránka potom zaberá veľmi malú časť plochy.
Ciele
Definujme si teda naše ciele - pripravíme základné rozvrhnutie s hlavičkou, troma stĺpcami a pätou. Šírku obmedzíme na 780px, aby sa to dalo dostatočne dobre pozerať aj na rozlíšení 800x600 pri maximalizovanom prehliadači. Celú stránku vystredíme. Použil som XHTML 1.0 Strict, v prípade potreby je možné použiť aj Transitional, podobne ako aj HTML 4.01 Strict.
Vytvoríme nasledovný dokument, ktorý neskôr naštýlujeme pomocou CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Príklad pevného layoutu stránky</title>
</head>
<body>
<div id="obsah">
<div id="hlavicka">Hlavicka</div>
<div id="lavy">Obsah v ľavom stĺpci...</div>
<div id="stredny">Obsah v strednom stlpci...</div>
<div id="pravy">Obsah v pravom stlpci...</div>
<div id="paticka">Paticka</div>
</div>
</body>
</html>
Základné štýly
Najprv nastavíme všetkým identifikátorom display:block. Nie je to úplne nutné - DTD (X)HTML definuje tag div ako blokový a preto by ho mal tak aj každý prehliadač vykresľovať - určite však nastavením tejto vlastnosti nič nepokazíme a nemusíme sa spoliehať na prehliadač. Teraz nastavíme hlavnú veľkosť celej stránky - pomocou width:780px pre element s identifikátorom #obsah. Ďalšie veľkosti elementov vnútri #obsah môžeme určovať aj pomocou percent, táto veľkosť však musí byť zadaná absolútne - kvôli nášmu cieľu vytvoriť fixný layout. Nastavíme šírky aj vnútorným elementom v #obsah - hlavička a päta budú roztiahnuté na celej šírke, ľavý stĺpec bude na 20%, pravý na 15%, stred dostane zvyšných 65%. V ďalšom kroku sa pustíme do použitia vlastností clear a float.Float a clear
V skratke k týmto vlastnostiam - určujú, ako sa má blokový element "správať" oproti "okolitým" blokom. Float určuje obtekanie - nastavením tejto vlastnosti povolíme nasledujúcim blokom obtekať tento blok vľavo, resp. vpravo (pozor, nastavujeme to, kde bude DANÝ BLOK obtekať ostatné, nie to, kde budú obtekať oni jeho). Presná špecifikácia vlastnosti float. Naopak vlastnosť clear obtekanie zakazuje. Narozdiel od float, je tu možnosť zakázať obtekanie aj na obidvoch stranách bloku (a to aj využijeme). Presná špecifikácia vlastnosti clear.
Nastavujeme float a clear pre bloky na stránke
Chceme, aby hlavička obtekaná nebola a preto vlastnosť float nenastavíme (základná hodnota je float:none). Keďže pred ňou nie sú iné bloky, vlastnosť clear takisto nie je nutná. Pre ľavý stĺpec však už chceme, aby bol obtekaný ostatnými vpravo, preto mu nastavíme float:left a clear:left. Podobne pre stredný stĺpec. Pravému stĺpcu nastavíme vlastnosť float:right. A konečne päta nemá byť obtekaná ničím - preto musíme použiť vlastnosť clear. Pozor, clear:left nestačí - ak by obsah pravého stĺpca bol príliš dlhý, tak by nám "pretiekol" nižšie pod ňu. Preto nastavíme vlastnosť clear:both. Teraz sa stránka roztiahne na požadovanú dĺžku bez ohľadu na to, ktorý stĺpec bude najdlhší. Celú stránku vystredíme pomocou margin: 0 auto pre #obsah. Vzdialenosť od pravého aj ľavého okraja bude rovnaká a preto nám to zabezpečí, že #obsah bude v prostriedku. Pre staršie prehliadače použijeme vystredenie pomocou vlastnosti text-align:center pre tag body a text-align:left pre #obsah - viac o vystredení elementov nájdete v tomto článku .
Výsledné štýly pre jednotlivé elementy:
body {
text-align:center;
background-color: #fff;
}
#obsah {
text-align:left;
display: block;
width:780px;
margin: 0 auto;
background: #ccc;
}
#hlavicka {
display: block;
width:100%;
}
#lavy {
display: block;
float:left;
clear:left;
width:20%;
}
#stred {
float:left;
display: block;
width:65%;
}
#pravy {
float:right;
display: block;
width:15%;
}
#paticka {
display: block;
width:100%;
clear:both;
}
Pre názornosť malého problému s pozadím, ktorý nám vznikol, som podfarbil všetky bloky odlišnými farbami. Problém je jasný - bloky sa síce obtekajú pekne, no ich dĺžka nie je rovnaká, čo je hlavne pre dizajn dosť podstatný problém. Ich dĺžku triviálne zmeniť nejde - no dá sa to veľmi jednoducho obísť. Spôsob riešenia spočíva v nastavení pozadia (background-image, nie background-color) pre nadradený element - v našom prípade #obsah. Pripravíme si pozadie šírky 780px rozdelené v rovnakom pomere, ako máme rozdelené veľkosti stĺpcov.
Výsledný štýl pre #obsah:
#obsah {
text-align:left;
display: block;
width:780px;
margin: 0 auto;
background: #ccc url(bg.png) repeat-y;
}
Teraz by som mohol článok skončiť - v podstate sme dosiahli už to, čo sa dá dosiahnuť aj jednoduchými tabuľkami. Dovolil by som si však ešte jeden príklad s možno trochu vtipnejším využitím vlastností clear a float.
Druhý layout
Predpokladajme, že menu stránky máme v ľavom stĺpci. Možno viete, možno nie, že hlavne pre textové prehliadače, ale aj čítačky je vhodné mať menu stránky na konci - pohyb týchto zariadení na stránke je lineárny a preto sa potom nemusia vracať späť. Nehovorím, že je to nutné, je to však jeden zo spôsobov riešenia. Samozrejme, vo vizuálnom zobrazení však požadujeme, aby zostalo čo najvernejšie pôvodnému.
Najprv zoraďme bloky do požadovaného poradia.
<div id="hlavicka">Hlavicka</div>
<div id="pravy">Obsah v pravom stlpci...</div>
<div id="stredny">Obsah v strednom stlpci...</div>
<div id="lavy">Obsah v lavom stlpci...</div>
<div id="paticka">Paticka</div>
Teraz trošku zmeníme dizajn - zmenšíme hlavičku na 15% (veľkosť ľavého stĺpca) a nastavíme jej vlastnosť float:left. Pre pravý stĺpec ponecháme nastavené float:right a to isté nastavíme aj pre stredný stĺpec.
Dosiahli sme efekt podobný ako pri použití rôznych konštrukcii s rowspan alebo colspan v tabuľkách. Možno poznamenať, že pravý stĺpec nie je nutný, bez jeho použitia máme hneď po hlavičke hlavný obsah v strednom stĺpci.
Vlastnosti float a clear môžeme vhodne používať na ďalších a ďalších miestach nášho webu - napr. k organizovaniu náhľadov fotiek, zobrazovanie článkov v stĺpcoch a ďalšie. Využil som ich aj pri zobrazení štýlov pre celý dokument vyššie - oveľa lepšie využitie priestoru.
Záver
Obe tieto layouty sú validné (zase až tak veľa tam toho nie je :) ) a fungujú bez problémov v prehliadačoch Internet Explorer 6, 7, Mozilla Firefox 2.0, Opera 9.0 (a ďalších). O podobných riešeniach fixného layoutu nájdete na stránke wellstyled.com, kde je riešenie dvojstĺpcového layoutu, fixného aj fluidného od Petra Staníčka. Podobné riešenie je na stránke Víta Dlouhého Dlouhý web.
Všetky príklady si môžete stiahnuť z tejto adresy.
František Haško
