Dnes je Přidat k oblíbeným
Rozvržení stránky absolutním pozicováním
Absolutní layout ve dvou nejčastějších rozlišeních- 800 x 600 a 1024 x 768
Absolutním pozicováním stránku optimalizujeme pro jedno rozlišení a při vyšším nebo nižším rozlišení poznáme, že to není ono.
Relativní layout ve dvou nejčastějších rozlišeních- 800 x 600 a 1024 x 768
Relativním pozicováním stránku také optimalizujeme pro jedno rozlišení, ale při vyšším nebo nižším rozlišení to je symetrické a pěkné.
A Svatý grál taktéž
Svatým grálem stránku neoptimalizujeme pro jedno rozlišení, protože se tam prostřední sloupec sám roztáhne nebo smrskne podle rozlišení obrazovky . Krásné, ale složité =).
Absolutní pozicování konečně prakticky =)
Chci si udělat stránku. Nahoře chci mít hlavičku, vlevo menu, uprostřed obsah, vpravo ankety a dole patičku. Některé weby vypadají trochu jinak (nemají pravý sloupec, nemají patičku apod.), ale to teď ponechme stranou. Jak na to? Nejdřív si musím uvědomit, pro jaké rozlišení obrazovky chci stránku optimalizovat. Nejčastěji se optimalizuje pro 800 x 600, ale podíl tohoto rozlišení rapidně ubývá, a tak se nic nestane, když budeme optimalizovat pro 1024 x 768 (800 x 600 používá v současnosti asi 6% uživatelů, zatímco 1024 x 768 přes 50%- srpen 2007). Nějaké místo spotřebují různé okraje a lišty, a proto budeme počítat se šířkou 1000 px.
| Height: 150px; width: 1000px; top: 0, left: 0 | ||
| Width: 200px; Height: auto left: 0, top: 152px | width: 600px, height: auto left: 203px, top: 152px | width: 194px left: 805px top: 152px |
| šířka 600px, umístění podle délky obsahu | ||
Máme hotový návrh velikostí. Každou část umístíme do jednotlivých neutrálních bloků- <divů>. Těm nastavíme pozici, šířku a někdy i výšku.
Výsledný kód
CSS:#obsah {position: absolute; width: 600px; top: 155px; left: 202px;}
#hlavicka {position: absolute; width: 1000px; height: 150px; top: 0px; left: 0px;}
#levy {position: absolute; width: 200px; top: 155px; left: 0px;}
#pravy{position: absolute; width: 195px; top: 155px; left: 804px;}
Všimněte si, že šířku zadávám vždy o několik px menší- nechávám tam nějaké místo na případný border nebo margin.
Jednotlivým blokům v kódu přiřadíme identifikátory:
<div id="obsah">Obsah s kódem, textem a s patičkou</div><div id="hlavicka">Hlavička</div>
<div id="levy">Levý sloupec</div>
<div id="pravy">Pravý sloupec</div>
Bloky mohou být v libovolném pořadí- a kvůli prohlížečům, které nezobrazují styly je nejlepší dávat na první místo vlastní obsah a až za něj menu.
Konečné formátování a barvení
Sloupce můžete pomocí CSS různě formátovat- přiřazovat rámečky, barvy pozadí, písma, odkazů... Podívejme se třeba na levý sloupec.
<style>
#levy {background-color: teal; color: white}
#levy h2 {color: silver}
#levy a {background-color: black; color: yellow; border: 2px outset silver; text-decoration: none}
#levy a:visited {color: red}
#levy a:hover {text-decoration: underline; border-style: inset}
</style>