| Výuka > Kaskádové styly CSS > Pozicování |

Layout s využitím pozicování

Bez znalosti CSS se nejčastěji vytvářel layout (vzhled stránky) pomocí rámců (frames) nebo s využitím tabulek (tabulkový layout). Tyto dvě metody narážely na celou řadu problémů se zobrazováním či ukládáním stránek. Kaskádové styly dovolují velmi jednoduchou definici layoutu stránky s využitím tzv. pozicování.

CSS využívá dvou typů pozicování:

  • absolutní
  • relativní

Absolutní pozice umístí daný prvek na konkrétní souřadnici bez ohledu na okolní prvky. Relativní pozice určuje, o kolik se má objekt posunout oproti své normální poloze.

Před vlastním započetím pozicování je vždy vhodné si nakreslit, jak bude vlastně layout vypadat a zvolit si názvy jednotlivých celků. Tyto názvy se pak přiřadí identifikátorům, u kterých se nastaví jejich vlastnosti.

Pro následující ukázku budeme předpokládat tzv. dvousloupcový layout, přičemž jeden sloupec bude určen pro navigaci (ponese jméno id="navigace") a druhý pro vlastní text na stránce (ponese jméno id="telo"). Nejprve se tedy zaměříme na vlastní stránku, kde bude vypadat definice asi takto:

<body>
 <div id="telo"> Tělo stránky </div>
 <div id="navigace"> Navigační prvky </div>
</body>

Všimněte si, že je nejprve definováno tělo a až poté navigace. Je to dáno tím, že na pořadí jednotlivých celků nezáleží (klidně by to mohlo být definováno i opačně). Obvykle ale bývá nejprve definováno tělo a až poté ostatní prvky (textová informace v těle je důležitější než navigační prvky).

Ve stylopisu se pak tyto dvě oblasti nadefinují, což by mohlo vypadat např. následovně:

<!--
#navigace { position: absolute;
            display: block;
            top: 0px;
            left: 0px;
            width: 25%; }
#telo { position: absolute;
        display: block;
        top: 0px;
        left: 25%;
        width: 75%; }
-->

V předchozí ukázce ovšem nebyla definována výška jednotlivých oblastí. Ta se nastaví automaticky podle vloženého obsahu. Na závěr ještě uvádím schéma, jak si navigaci rozvrhnout, které zároveň slouží jako vysvětlení jednotlivých atributů u příslušných identifikátorů.

 Dvousloupcový layout

Dvousloupcový layout

Velmi šikovné jsou generátory pozic, které jsou dostupné i on-line:

02.09.2007, 19:13 vytvořil Administrator