Použití CSS pozicování

Můžete si zobrazit příklad, který zhruba odpovídá popisovaným kódům.

Překrývání

Je potřeba pečlivě kontrolovat, aby obsah oddílů nebyl příliš široký (levý sloupec) nebo vysoký (hlavička), protože by pak došlo k překryvu. Většinou takové problémy ale nejsou, protože levý sloupec se zalamuje a hlavička bývá pečlivě odladěná. Přinejhorším lze změnit rozměrové řešení oddílů. Překrývání se dá kdyžtak řešit CSS vlastnostmi z-index, clip a rect.

Barvy oddílů

Sloupce se dají různě formátovat; nejzajímavější je asi jejich barvení. Jde přitom o barvu pozadí, textu a o barvy odkazů. Samozřejmě použiji CSS styly. Proberu na příkladu levého sloupce.

<style>
#levy {background-color: green; color: white}
#levy H3 {color: black}
#levy a:link {color: yellow}
#levy a:visited {color: silver}
#levy a:hover {color: red}
</style>

V příkladu jsem nadefinoval barvu celého oddílu "levy", barvu nadpisu H3 a barvy odkazů uvnitř tohoto oddílu. Konkrétně se barvy samozřejmě musejí odladit tak, aby design seděl.

Podrobněji popisuji barvení oddílů u příkladu s lištou.

Kámen úrazu

Největším problémem je udělat boční sloupce podbarvené (background-color) nejen pod jejich obsahem, ale po celé výšce stránky. To se jednoduše udělat nedá, protože zpravidla není známo, jak vysoký bude prostřední oddíl s textem.

Jsou jen některá částečná řešení:

• Vykašlat se na to, tak to dělám já
• Nastavit sloupcům nějakou výšku. Pokud obsah stránky bude větší, bude tam stejně bezbarvo, pokud bude menší, budou tam dlouhé kusy prázdna.
• Ošetřit výšku nějakým skriptem a dopsat do stránky přesně velké kusy barvy.
• Do patičky umístit složitě relativně pozicované objekty s velkou výškou posunuté hodně nahoru se záporným z-indexem.
• Jako pozadí stránky zadat široký obrázek, který už bude mít plochy obarvené napevno.
• Hlavní text dělat ve skutečnosti tabulkou s prázdnými podbarvenými boky, pouze boční sloupce dopisovat později pozicovaně. Je to nejjistější řešení, které bych doporučil autorům PHP, ASP a SHTML stránek. Přitom bych se tu tabulku snažil rozdělit do několika tabulek nad sebou.

Tipy na vylepšení

• Můžete zkusit nedávat objektům na stránkách pevnou šířku, takže se to pak nemusí číst z celé obrazovky. Pokud oželíte pravý sloupec, je to velmi snadné. Hlavní text se dokonce nemusí dávat do <div>u, stačí, když se mu nastaví margin-left v šířce levého sloupce.
• Dlaždicová obrázková pozadí pod boky a hlavičku působí perfektně (background-image). Nebo zkuste rámovat pomocí border.
• Oddílům se vyplatí přidat padding (obdoba atributu cellpadding u tabulek).
• Pomocí pozicování se dají perfektně udělat různé překrývací kouzla a animace.
• Pouvažujte nad použitím jiných délkových jednotek, než jsou pixely. Obzvláště doporučuji promyslet procenta a velikost písmového čtverčíku (EM), která je zaručuje soudržnost designu, když si uživatel přepne velikost písma.
• K dispozici je i další příklad na využití pozicování pro návrh stránky v trochu jiném stylu.

Vycentrování celé stránky

Tak fajn, mám pozicovaný design, ale nelíbí se mi, že je nalepený na levý okraj stránky. Chtěl bych, aby se vždycky držel středu okna, které uživatel vidí. Toho se dá dosáhnout pomocí dalšího nadřazeného divu. Tento div bude vycentrovaný a bude tvořit počátek souřadného systému. Bude mít tento kód:

<div style="margin: 0px auto; position: relative; width: 800px;">

Vycentrování divu se v CSS dělá pomocí margin: 0px auto;. Tato poněkud záhadná konstrukce vede k tomu že horní a spodní okraj budou nulové (to nás nyní nezajímá) a pravý a levý okraj budou automatické, což znamená stejné. Tenhle efekt se dost využívá na vystřeďování celých stránek.

Position: relative v tomto případě znamená, že se levý horní roh divu stane počátkem souřadného systému pro pozicované prvky obsažené v onom divu (o nich je tato stránka).

Šířku, v tomto případě 800px, je nutno zvolit podle sebe a podle prvků ve stránce. Je myslím zřejmé, že nějakou šířku je třeba nastavit. Kdyby to totiž nemělo šířku, tak to nejde centrovat. (To obzvlášť platí pro design vytvořený pouze pozicováním, protože pozicované prvky jsou vyjmuté z toku dokumentu, a ten má pak šířku 0.)

Takže celý příklad by vypadal nějak takhle:

<style>
#obalovaci {margin: 0px auto; position: relative; width:800px;}
#obsah {position: absolute; width: 500px; top: 120px; left: 150px}
#hlavicka {position: absolute; width: 760px; height: 120px; top: 0px; left: 0px}
#levy {position: absolute; width: 150px; top: 120px; left: 0px}
#pravy{position: absolute; width: 110px; top: 120px; left: 650px}
</style>
...
<div id="obalovaci">

    <div id="obsah">Obsah s jakkoli divokým kódem a s patičkou</div>
    <div id="hlavicka">Hlavička</div>
    <div id="levy">Levý sloupec</div>
    <div id="pravy">Pravý sloupec</div>

</div>

Další informace k této konstrukci mám na stránce Centrování celé stránky.