Použití CSS pozicování

Příklad se sloupcovou úpravou

Proč ne tabulky

Naprostá většina dnešních webových stránek je upravována pomocí tabulek. Obzvláště dobře se jimi dělá sloupcová úprava, která usnadňuje čtení. Tabulky mají ale jednu základní nevýhodu -- zobrazují se až poté, co se celé načtou. Čtenář pak kouká věčnost na prázdnou stránku. Nebylo by lepší načíst text, zobrazit ho a teprve potom načítat odkazy v okolních sloupečcích? To umožňuje CSS pozicování.

Běžná úprava

Nejčastější pojetí tabulkové úpravy je toto:

Někdy stránka nemá pravý sloupec nebo patičku, časté variace se týkají rohů stránek, to mě ale nyní nezajímá. Tabulkově to popisuji jinde. V dalším textu ukážu, jak této úpravy stránky dosáhnout pomocí CSS pozicování.

Rozvržení rozměrů

Každý návrh stránkové úpravy by měl začínat nákresem s rozměry. Dejme tomu, že stránku chci ladit pro šířku obrazovky 800 pixelů, takže bych neměl překročit 760 pixelů šířky (něco sežerou okraje a lišty). Vymyslím si i další rozměry pro různé části stránky:

Divy

Tag <div> se někdy nazývá oddíl. V pozicování se používá ke uzavření obsahu, který má být absolutně pozicován. Je to jistější než jiné tagy, protože to pak správně zobrazí i Internet Explorer 4 a NN 4.

Například tento HTML kód:

<div style="position: absolute; top: 120px, left: 150px>Obsah</div>

se zobrazí jako slovo "Obsah", které bude začínat 120 pixelů pod a 150 pixelů vlevo od horního levého rohu stránky. Top je souřadnice y (v obráceném směru), left je x. Podrobnosti v popisu pozicování.

Převedení tabulky do <div>ů

Každá část stránky (tj. hlavička, obsah, sloupce, patička) se zapíšou jako jeden <div>, kterému se předepíše absolutní poloha, šířka a někdy výška.

Výsledný kód

<div style="position: absolute; width: 500px; top: 120px; left: 150px">Obsah s jakkoli divokým kódem a s patičkou</div>

<div style="position: absolute; width: 760px; top: 0px; height: 120px; left: 0px">Hlavička</div>

<div style="position: absolute; width: 150px; top: 120px; left: 0px">Levý sloupec</div>

<div style="position: absolute; width: 110; top: 120px ; left: 650px">Pravý sloupec</div>

Hlavně si, prosím, všimněte, že můžu oddíly do kódu umístit v libovolném pořadí. Načítají se od prvního, nejlépe je tedy umístit dopředu obsah.

Identifikátory

Hezčí než zápis absolutní polohy do kódu je vytvořit si ve hlavičce souboru stylopis:

<style>

#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>

a jednotlivým oddílům textu přiřadit identifikátory:

<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>

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.

Starší prohlížeče

CSS pozicování nefunguje v trojkových verzích prohlížečů, které dnes ale používají (podle mých výzkumů) necelé dvě promile čtenářů (a to si ještě myslím, že jsou to experimentující webmasteři). Pokud chcete, aby se i jim stránka zobrazila ve sloupcích, musíte udělat alternativní tabulkovou verzi a skriptem na ni navigovat. Lepší je ale vykašlat se na ně. Ono je to totiž pro ně také čitelné, třebaže ne tak hezky.

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.

Vizte též: popis CSS pozicování, příklad CSS sloupců, hlavní stránka CSS, jak udělat levé menu, ořezávání a přidání lišt

Taky si, prosím, všimněte, jak jsou dělané tyto stránky.

O tvorbě, údržbě a zlepšování internetových stránek. Základy HTML CSS FrontPage JavaScript