Pozice prvku

Kaskádové styly umožňují každý element na stránce libovolně umístit a to určením buď absolutní nebo relativní pozice. V této lekci se budeme věnovat absolutní pozici, která umožňuje každému prvku určit konkrétní pevné souřadnice (odsazení od levého a horního okraje, případně i pravého a spodního). Určení pozice můžeme využít při rozvržení struktury stránky, jednotlivé bloky stránek se uzavřou do tagů div a umístí se pomocí position.
Bohužel různé přístupy prohlížečů k dodržování standardů CSS působí autorům problémy, jak uvidíme dále. Doporučuje se vytvořit stránku tak, aby se správně zobrazila v Mozille (Opeře, Safari apod.), tedy prohlížečích, které dodržují standardy více a teprve potom se podívat, jak stránku upravit, aby se zobrazila vhodně i v Internet Exploreru (IE).

Vlastnost position může nabývat mimo jiné těchto hodnot:
- relative - prvek je posunutý o dané souřadnice od své "normální" polohy na stránce
- absolute - prvek je jakoby vyjmut ze stránky do jiné vrstvy a umístěn na dané souřadnice, neovlivňuje ostatní prvky na stránce. Souřadnice jsou určovány vzhledem k okrajům nejbližšího nadřazeného elementu, který má vlastnost position relative nebo absolute (nebo body). Konkrétní souřadnice určují vlastnosti top (shora, vzdálenost od horního okraje) a left (odleva).
- fixed - element je "zafixovaný", zůstává na místě i při listování stránkou (IE zná až od verze 7)

Uvedenou vlastnost vyzkoušíme na jednoduchém příkladě stránky, rozdělené pomocí divů na dva sloupce a hlavičku.

Zdroj stránky, který odpovídá obrázku, by mohl obsahovat:
<div id="obal">

<div id="titul"></div>

<div id="menu">
<h2>Líbilo se mi</h2>
<a href="film1.html">Vratné láhve</a>
<a href="film2.html">Obsluhoval jsem anglického krále</a>
<h2>Filmové odkazy</h2>
<a href="http://www.premiere.cz/">Premiere</a>
<a href="http://www.kinobox.cz">Kinobox</a>
<a href="http://www.csfd.cz/">O českých filmech</a>
</div>

<div id="obal_obsahu">
<div id="obsah">
<img src="obr1.jpg" align=right alt="hotel Dítě">
<h3>Obsluhoval jsem anglického krále</h3>
Literárně-historický naučný film.<br><br>
Režie: Jiří Menzel<br>
Hrají: Ivan Barnev, Oldřich Kaiser, Julia Jentsch, Milan Lasica, Marián Labuda,
Martin Huba, Josef Abrhám, Jiří Lábus a další...
<h3>Film získal čtyři České lvy!</h3>
</div>
</div>

</div>

Nejprve zajistíme, aby byl div obal vycentrovaný, a to jak v Internet Exloreru, tak v ostatních prohlížečích. Pro IE je potřeba elementu body přidat vlastnost text-align: center; (vycentrování textu zdědí i všichni potomci), zatímco pro ostatní prohlížeče pomůže pro div s identifikátorem obal určit vlastnosti margin hodnotu vlevo a vpravo auto.

body {color: Blue; font-style: normal; font-family: Arial CE, Arial, Helvetica, sans-serif; background-image: url(pozadi1.jpg); margin: 0px; padding: 0px; text-align: center; }

#obal { border: 1px solid Gray; background-color: #E3ECF7; position: relative; width: 760px; height: 360px; margin: 10px auto 0 auto; }

Všimněte si, že třída obal má určené rozměry (šířku 760px, aby ji případně zvládly monitory s nížším rozlišením) a také vlastnost position, aby mohly být divy s identifikátory menu či obal_obsahu absolutně umístěné, jejich souřadnice se potom budou určovat od okrajů tohoto divu obal. Právě styly identifikátorů menu a obal_obsahu budou obsahovat absolutní umístění:

#menu { position: absolute; left: 5px; top: 62px; border: solid 1px Gray; background-color: #CAEEF0; width: 200px; height: 293px; }

#obal_obsahu { position: absolute; top: 62px; left: 210px; background-color: #CAEEF0; width: 545px; height: 293px; vertical-align: middle; }

Oba identifikátory jsou od horního okraje obalu vzdálené 62px, aby bylo místo na titul, levé souřadnice se samozřejmě odlišují. Protože jsou oba identifikátory umístěny absolutně, jsou jakoby vyjmuty z obsahu stránky do jiných vrstev a nejsou uzavřené v divu obal, musí se jim tedy určit i rozměry (width, height), aby se opticky do obalu vešly. V této ukázce je daná i pevná výška sloupců, většinou se ale obsah stránky bude měnit a do dané výšky by se nemusel vejít. Zrovna tak mohou nastat problémy, když budeme zvětšovat písmo v nabídce Zobrazit - Velikost textu. Většina autorů stránek pevnou výšku sloupců nepoužívá, častěji problémy s výškou neřeší nebo různě obchází, jak si ukážeme v další lekci.

Možná jste si všimli, že je ve zdroji ještě jeden div s identifikátorem obsah, který vypadá jako nadbytečný. Skutečně by nadbytečný byl, nebýt IE, který do rozměrů elementů započítává i šířku rámečku. Proto v #obal_obsahu není určený rámeček, o jeho tloušťku by se celková šířka tohoto divu v IE a například v Mozille lišila a nevycházely by stejné okraje (vyzkoušejte si). Rámeček je přidaný do stylu obsahu, který je uvnitř obal_obsahu, proto k jeho šířce nic nepřidá a situace je o něco lepší:
#obsah { border: solid 1px Gray; height: 293px; }
Při pozorném pohledu na stránku v IE a v Mozille je vidět, že okraje nejsou všude přesně stejné, tentýž problém jako u obal_obsahu je i u ostatních divů s rámečky, všechny bychom je mohli podobně "zaobalit".

Narazili jsme na problémy s IE, někteří autoři je řeší také pomocí různých triků (hacků), jedním je například tzv. trik s hvězdičkou - pokud do stylu přidáte: * html #obal_obsahu {width: 600px} (nebo libovolný identifikátor nebo třídu místo obal_obsahu), potom tento řádek přečte jen IE. Jenže zase jen starší verze, verze 7 už ne, proto tyto triky raději používat nebudu, zase by se muselo hlídat, kdy ještě fungují a kdy už ne.

Jinou možností pro toto rozvržení stránky bylo neumisťovat třídu obal_obsahu absolutně (vynechat u ní position, top i left - potom zůstane součástí "běžného" obsahu stránky) a zvolit jí takový margin-left (levou mezeru), aby se do ní vešlo menu, například:
margin-left: 205px;.

Podstatně jednodušší by bylo úplně rámečky (border) vynechat, částečně je nahradit pomocí obrázků na pozadí divů. Stránka by potom mohla vypadat podle vzoru z knihy Mistrovství v CSS autorů Crofta, Lloyda a Rubina, kterou si můžete půjčit i v naší školní knihovně. Styl je úmyslně umístěn ve zdroji stránky. Můžete si všimnout, že navigace nemá určenou výšku ani žádné pozadí, její "falešné" pozadí tvoří obrázek umístěný do levého okraje obalu a opakující se po ose y. Druhý obrázek je umístěn na pozadí záhlaví, vytvoří se tak i vodorovné oddělení hlavičky. I u této stránky je jakoby jeden div zbytečný, kromě #obal_obsahu je text zabalený ještě do #obsah_vnitrni, jde o stejný problém jaký jsme řešili výše, tentokrát ale kvůli paddingu, ten je určen v #obsah_vnitrni proto, aby se o něj v Mozille nezvětšila šířka #obal_obsahu.

Název školy:	Základní škola, Hradec Králové, M. Horákové 258
Název projektu:	EU peníze školám
Číslo projektu:	CZ.1.07/1.4.00/21.2575
Téma:	Tvorba WWW stránek
Název:	VY_32_INOVACE_16_10B_tvorba www16
Autor:	Pavel Petr

Použité zdroje: Není-li uvedeno jinak, jsou všechny ilustrační obrázky dílem autora.