Pozicování
Použití CSS pozicování
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í.
Typy umístění
- normální,
- plovoucí,
- absolutní pozice.
V plovoucím umístění - je oddíl umístěn podle běžných pravidel, poté je z něj odebrán a posunut tak daleko vlevo nebo vpravo, jek je to možné. Obsah takového elementu tedy může protékat kolem strany obtékaného oddílu.
Při absolutním umísťování elementu - je oddíl zcela odebrán ze svého normálního umistění a je mu přidělena absolutní pozice. Tzn, že je možné nastavit přesnou pozici elementu na stránce.
Umístění do pozice
POSITION:pozice
static - standardní pozice,
relative - pozice oddílu je vypočítána podle standardní pozice, poté je však oddíl ze svého umístění odchýlen do určené polohy. Odchýlení se provádí hodnotami vlastností top, right, bottom a left. Výsledná pozice se chová tak, jako by byla původní, a na původní pozici zůstane volné místo.
absolute - umístění oddílu je upraveno hodnotami vlastností řízení pozice top, right, bottom a left. Absolutně umístěné oddíly jsou vyňaty ze standardní úrovně umístění, Tzn, že jejich umístění nemá žádný vliv na celkový vzhed a polohu dalších oddílů.
fixed - pozice oddílu je vypočítána podobně jako u absolutní verze umístění, ale oddíl je fixován s ohledem na okolní prostor. Tento pevně umistěný oddíl nebudeme moci posunout. (fixed nepodporuje IE.) Fixed umístění vůči zobrazovanému polu. Absolute umístění vůči obsahovému bloku.
Plovoucí oddíly
Plovoucí oddíl je takový, který je posunován vpravo či vlevo po své horizontální ose, než narazí na jiný plovoucí oddíl nebo na okraj svého obsahového bloku. Takovýto oddíl je vyjmut z normální pozice, ale jeho obsah ho nepřekrývá. Obsah takového oddílu může obtékat podél jeho strany, nebo může bý t naopak obtékání zakázáno.
FLOAT:směr/none
left - je element posunut doleva a obsah jej obtéká zprava.
right - element posunut doprava a obsah jej obtéká zleva.
CLEAR:směr/none
zakazuje obtékání
left -zakazuje obtékání vlevo umístěných plovoucích oddílů.
right -zakazuje obtékání vpravo umístěných plovoucích oddílů.
both - zakazuje obtékání jak zprava tak zleva
Třetí rozměr - vytváření vrstev
Viditelnost elementů je řažena v logické struktuře HTML dokumentu podle toho, v jakém pořadí jsou uvedeny ve zdrojovém kódu.
Z-INDEX:číslo/auto
Pro umístěné oddíly tato vlastnost specifikuje pořadí vrstvy v systému vrstev dokumentu.
Auto - tzn vrstvy se překrývají v tom pořadí, v jakém jsou elementy uvedeny v kódu. Oddíl s nejvyšší hodnotou se nachází nejblíže očím uživatele.
Běžná úprava
Nejčastější pojetí tabulkové úpravy je toto:
Hlavička |
||
Levý sloupecObsahuje zpravidla hodně odkazů |
ObsahObsah 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á. V dalším textu naleznete, 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 chceme šířku obrazovky 800 pixelů, takže bychom neměli překročit 760 pixelů šířky (něco sežerou okraje a lišty). Vymyslíme 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 |
šíř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>
Všimněme si, že můžeme 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.