Pro výukové účely na SPŠ Zlín
vytvořil RNDr.Vladimír Vaščák

CSS

  1. Pozicování
  2. DHTML příklad
  3. DHTML příklad jinak
  4. Rozvržení stránky pomocí stylů

1. Pozicování

Umístění objektu v dokumentu

Možné hodnoty: static | relative | absolute | fixed | inherit
static - umístěn normálně v dokumentu
relative - je relativně posunut ze své normální pozice o hodnoty specifikované vlastnostmi left , top , right a bottom
absolute - umístěn na souřadnicích left , top , right a bottom
fixed - jako absolute ale vzhledem k oknu (nemusí fungovat)
inherit - dědí vlastnost od rodičů


Povolené hodnoty:
vzdálenost od hrany příslušného bloku
procenta - procentní poměr omezujícího bloku
auto - vypočítá sám
inherit - zdědí od rodičů

Příklad:
.relativne1 {position: relative; left: 50px}
.relativne2 {position: relative; right: 20px; bottom: -100px}
.absolutne {position: absolute; left: 600px; top: 150px}
.fixne {position: fixed; left: 600px; top: 200px}
 
<img src="skola1.jpg" alt="škola 1" width="250" height="188" class="relativne1">
<img src="skola2.jpg" alt="škola 2" width="250" height="188" class="relativne2">
<img src="skola_abs.jpg" alt="škola absolutně" width="250" height="188" class="absolutne">
<img src="skola_fix.jpg" alt="škola fixně" width="250" height="188"  class="fixne">
škola 1 škola 2 škola absolutně škola fixně







Překrývání objektů. Povolené hodnoty (doporučuji) kladná čísla nebo auto.

Příklad:
.relativneindex1 {z-index: 2; position: relative; left: 50px}
.relativneindex2 {z-index: 1; position: relative; right: 20px; bottom: -100px}
 
<img src="skola1.jpg" alt="škola 1" width="250" height="188" class="relativneindex1">
<img src="skola2.jpg" alt="škola 2" width="250" height="188" class="relativneindex2">
škola 1 škola 2







škola 1 škola 2





Obrázky:
<img src="skola1.jpg" alt="škola 1" width="250" height="188" class="index1" id="index1" onmouseover=zmenaIndex('index1')>
<img src="skola2.jpg" alt="škola 2" width="250" height="188" class="index2" id="index2" onmouseover=zmenaIndex('index2')> 

Javascript:
<script language="JavaScript" type="text/javascript">
<!--
    function zmenaIndex(index) {        
    if (index == "index1") {
       document.getElementById("index1").style.zIndex  = "2";
       document.getElementById("index2").style.zIndex  = "1";
    } else {
       document.getElementById("index1").style.zIndex  = "1";
       document.getElementById("index2").style.zIndex  = "2";        
    }
}
-->
</script> 


Jednodušší způsob:

do každé značky img vložíme např.:
onMouseOver="this.style.zIndex = 1001" onMouseOut="this.style.zIndex = 1000"


Úkol: Vytvořte zde odkaz na Vaší stránku, kde budou ukázky využití "Pozicování objektů".
vpřed
© 2007 Pro výuku na SPŠ Zlín připravil RNDr. Vladimír Vaščák