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:

Hlavička

Levý sloupec

Obsahuje zpravidla

hodně odkazů

Obsah

Obsah stránky, vlastní text, který je důležitý.

Jedním z největších problémů je proměnlivá výška tohoto hlavního textu.

Pravý sloupec

Patička

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:

Výška 120 pixelů; x=0, y=0
šířka 150 px;
výška libovolná

x=0, y=120

šířka 500 pixelů, výška podle obsahu
x=150, y=120
šířka 110 px

x=650
(=150+500),
y=120

šířka 500, umístění podle obsahu obsahu

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.

Levý sloupec podbarvený až tam, kam má obsah Obsah stránky

 

 

 

 

Pravý sloupec podbarvený
Pod obsahem je bezbarvý prostor. taky bezbarvo

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

Tipy na vylepšení

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.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.