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; } |
#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; } |
Vytvoř stránku film.html se stejným rozložením jako na obrázku o filmu, který se ti líbil (jiném, než je použitý v lekci). Můžeš si vybrat kteroukoliv z uvedených možností - umístit absolutně menu i obsah podle textu lekce, umístit absolutně jen menu (nebo obsah) podle poznámky o margin-left, nebo využít vzor z knihy Mistrovství v CSS. Použij svůj vlastní styl. Prémiové body můžeš získat za další stránku se stejným vzhledem o jiném filmu (+ fungující odkazy).
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 |