Webové technológie

Poznámky:

10. Pozície elementov a tvorba layouts

Čo je to obsahový blok:

Veľkosť, alebo určenie pozície elementa sa niekedy odvodzuje relatívne od tzv. obsahového bloku elementu - ide o akýsi neviditeľný obaľujúci štvoruholník, ktorého pozícia i veľkosť môže zásadným spôsobom ovplivniť umiestnenie alebo veľkosť našeho elementa.

Relativné a absolutné umiestnenie elementa:

Relatívne umiestnenie je také umiestnenie, kedy element vystrihneme z jeho pozície v bežnom toku dokumentu a posunieme ho o určitú vzdialenosť do novej pozície. Element pritom na stránke zaberá miesto v pôvodnej pozícii a nová pozícia elementa nijakým spôsobom neovplivní poziciu iných elementov na stránke. Relativné umiestnenie sa používa taktiež ako obsahový blok pre elementy umiestnené absolutne.

K relatívnemu umiestneniu elementa použijeme vlastnosť position s hodnotou relative.

Absolútne umiestnenie je také umiestnenie, kedy element vystrihneme z jeho pozície v bežnom toku dokumentu a umiestníme ho relatívne vzľadom k pozícii jeho obsahového bloku. Element prestane v pôvodnej pozícii zaberať miesto a do tohto priestoru sa posunú nasledujúce elementy. Na novej pozícii element fyzicky miesto nezaberá, takže prekreslí iné elementy, ak sa budú na novej pozícii nachádzať.

K absolutnému umiestneniu elementa použijeme vlastnosť position s hodnotou absolute.

Pre posun elementa, či už relatívne alebo absolútne umiestneného, môžeme použiť nasledujúce vlastnosti, ktorých hodnoty môžu byť jednotky dĺžky alebo percenta:

• top - posun zhora dole
• bottom - posun zdola nahor
• left - posun zľava doprava
• right - posun zprava doľava

Plávajúce umiestnenie elementa:

Element sa v plávajúcom umiestnení posunie tak doľava, alebo tak doprava, ako to je len v rámci nadriadeného (rodičovského) elemenu možné. Pri tomto posune je vyňatý zo svojho pôvodného umiestnenia a umiestní sa do novej pozície. V starej pozícii vznikne miesto, ktoré zaplnia následujúce elementy a element v novej pozícii zaberie miesto, akoby tu bol umiestnený staticky. Ostatný obsah na stránke element v plávajúcom umiestnení obteká. Hovoríme o plávaní elementu medzi ostatními objektami na stránke.

Pre umiestnenie elementa do plávajúceho umiestnenia použijeme vlastnosť float s hodnotami:

• left - element sa umiestní doľava
• right - element sa umiestní doprava

Ak chceme, aby element následujúceho elementa v plávajúcom umiestnení neobtekal, potom u toho elementa použijeme vlastnosť clear s možnými hodnotami:

• left - element nebude obtekať plávajúci element umiestnený doprava
• right - element nebude obtekať plávajúci element umiestnený doľava
• both - element nebude obtekať žiadny plávajúci element bez ohľadu na jeho umiestnenie

Tvorba dvojstĺpcového layoutu so záhlavím pomocou plávajúceho umiestnenia:

Všetko začína v dokumente X(HTML), kde vytvoríme pomocou elementov bez významu (elementy div), bloky pre obsah jednotlivých častí webovej stránky. Všetky bloky potom uzavrieme do obalového elementu div. Napríklad:

<div id="obal"> <div id="zahlavie">...záhlavie...</div> <div id="obsah">...obsah...</div> <div id="menu">..navigačná ponuka...</div> </div>

A následuje tento postup v šablóne CSS:

1. Obalovému elementu div#obal pridelíme šírku prípadne ho zarovnáme na stred.

#obal { width: 600px; margin: 0 auto; }

2. Elementu div#zahlavie pridelíme šírku 100 % a prípadne potrebnú výšku. Vďaka umiestneniu v zdrojovom kóde na prvom mieste a maximálnou šírkou sa umiestni nad stĺpcom.

3. Zadáme šírku obom stĺpcom div#menu a div#obsah a umiestníme ich pomocou vlastnosti float do plávajúceho umiestnenia na tú stranu, podľa toho, kde ich chceme mať. Nezabudnime však, že súčet oboch elementov nesmie presahovať priestor vymedzený elementom div#obsah. Ak šírku v súčte nastavíme menšiu, vytvorí sa medzi oboma stĺpcami umelá medzera.

#menu { width: 150px; float: left; } #obsah { width: 450px; float: right; }

Výsledok si môžete pozrieť TU