CSS priručnik
CSS Tutorial
CSS Priručnici


   CSS Tutorial
   Uvod
1. Umetanje
2. Background...
3. Selectori
4. Margin...
5. Fonts
6. Text
7. Tablice
8. Popis
9. Positioning
10. Napredno
CSS Elementi


Kontaktirajte nas...

Naručite CD

CSS Tutorial

9. Positioning, layers, clipping & z-index

Smještaj layer-a i clipping layer-a najviše se koristi u DHTML aplikacijama. DHTML je kombinacija HTML, CSS i javascript-a i mnogo se koristi za dinamične web stranice. Takođe može se iskoristiti i za dodavanje bloka texta. Layer-i nije ništa drugo nego block određene širine i visine. Pogledajte naredni primjer. Svaki style element biti će objašnjen.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
#mainblock { position:relative; width:500px; height:200px; background:#0000ff; color:#ffffff }
</style>
 </head>
<body>
<div id="mainblock">
Ovo je mainblock
</div>
</html>

Izgledat će:
Ovo je mainblock


U prethodnom primjeru kreiran je layer (block) od 500 pixela širine i 200 pixela visine. To je urađeno sa width: i height: style elementima. Pozicionirali smo layer relativno (position:relative) što znači da će biti pozicioniran prema normalnim postavkama stranice. Ako stavimo position:absolute onda će layer biti pozicioniran prema prozoru browsera ili ruba layera unutar kog je smješten. Dakle ako promijenimo "relative" u "absolute" u našem primjeru layer će biti smješten u gornji lijevi kut browsera. Isprobajte i vidjet ćete o čemu se radi.



Naredni primjer pokazuje kako smjestiti layer na x-os (horizontalno) i y-os (vertikalno).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
#mainblock { position:relative; left:100px; top:20px; width:500px; height:200px; background:#000000; color:#ffffff }
</style>
 </head>
<body>
<div id="mainblock">
Ovo je mainblock2.
</div>
</html>
Ovo je mainblock2.



Layer se može smjestiti gdje god hoćete ako upotrijebite left: i top: style elemente.

left: definira horizontalan razmještaj, top:vertikalni. Layer je smješten 100 px od lijeva i 30 pixela od vrha.

Također može se staviti layer na layer ... primjer
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
#mainblock { position:relative; left:100px; top:20px; width:500px; height:200px; background:#000000; color:#ffffff }
#yellowblock { position:absolute; left:30px; top:50px; width:250px; height:100px; background:#ffff00; color:#000000 }
#greenblock { position:absolute; left:30px; top:30px; width:100px; height:50px; background:#00c000; color:#000000 }
</style>
 </head>
<body>
<div id="mainblock">
Ovo je mainblock.
<div id="yellowblock">
Ovo je yellow block.
<div id="greenblock">
Ovo je green block.
</div>
</div>
</div>
</html>

Rezultat je:
Ovo je mainblock.
Ovo je yellow block.
Ovo je the green block.


Yellow block je smješten na 30 pixela od lijeva 50 pixela od vrha donjeg layera (parent layer). Green block smješten je 30 pixela od lijeva 30 pixela od vrha yellow blocka.

NAPOMENA :
Negativne vrijednosti za left: i top: style elemente mogu se također koristiti. U tom slučaju layeri će biti smješteni "izvan" ekrana pa će dio ili cijeli block biti nevidljiv. Primjer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
#mainblock { position:relative; left:-110px; top:20px; width:500px; height:200px; background:#000000; color:#ffffff }
</style>
 </head>
<body>
<div id="mainblock">
Ovo je mainblock3.
</div>
</html>

Ovo je mainblock3.





9.1 Clipping layers

Clipping layera ne znači ništa drugo nego odsijecanje dijela layera. Primjer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
#mainblock1 { position:relative; left:0; top:0; width:300px; height:200px; background:#000000; color:#ffffff }
#mainblock2 { position:relative; left:0; top:10px; width:300px; height:200px; background:#000000; color:#ffffff }
#yellowblock1 { position:absolute; left:30px; top:50px; width:250px; height:100px; background:#ffff00; color:#000000 }
#yellowblock2 { position:absolute; left:30px; top:50px; width:250px; height:100px; clip:rect(0,100px,45px,0); background:#00c000; color:#000000 }
</style>
 </head>
<body>
<div id="mainblock1">
Ovo je mainblock1.
<div id="yellowblock1">
Ovaj layer nije odrezan
</div>
</div>
<div id="mainblock2">
Ovo je mainblock2.
<div id="yellowblock2">
Ovaj layer jest odrezan
</div>
</div>
</html>

Ovo je mainblock1.
Ovaj layer nije odrezan 
Ovo je mainblock2.
Ovaj layer jest odrezan

U mainblock1 žuti layer nije odrezan. Ali u mainblock2 žuti layer je smanjen na 100 pixela širine i 45 pixela visine. Ako želite skresati layere upotrijebite clip:rect(top value, right value, bottom value, left value). Pa naš prethodni primjer: clip:rect(0,100,45,0) će značiti: skrati desnu ivicu žutog layera za 150 pixela, a donju za 55 pixela.



9.2 z-index

Ovaj style element definira položaj iznad ispod (z-os). Drugim riječima, definira koji će layer biti gornji a koji donji. Pretpostavimo da imate layere koji se preklapaju:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
#mainblock { position:relative; left:100px; top:20px; width:500px; height:200px; background:#000000; color:#ffffff }
#yellowblock { position:absolute; left:30px; top:50px; width:250px; height:100px; background:#ffff00; color:#000000 }
#greenblock { position:absolute; left:30px; top:30px; width:100px; height:50px; background:#00c000; color:#000000 }
</style>
 </head>
<body>
<div id="mainblock">
Ovo je mainblock.
<div id="yellowblock">
Ovo je yellow block.
</div>
<div id="greenblock">
Ovo je green block.
</div>
</div>
</html>

Ovo je mainblock.
Ovo je yellow block.
Ovo je green block.


Kao što vidite, green layer (zeleni) je iznad yellow (žutog). Ako želimo da žuti bude iznad zelenog upotrijebiti z-index: style element.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
#mainblock { position:relative; left:100px; top:20px; width:500px; height:200px; background:#000000; color:#ffffff }
#yellowblock { position:absolute; left:30px; top:50px; width:250px; height:100px; background:#ffff00; color:#000000; z-index:2 }
#greenblock { position:absolute; left:30px; top:30px; width:100px; height:50px; background:#00c000; color:#000000; z-index:1 }
</style>
 </head>
<body>
<div id="mainblock">
Ovo je mainblock.
<div id="yellowblock">
Ovo je yellow block.
</div>
<div id="greenblock">
Ovo je green block.
</div>
</div>
</html>

Ovo je mainblock.
Ovo je yellow block.
Ovo je green block.

Kada se upotrijebi z-index: style element određuje se koji element ima prednost. Žuti je dobio z-index:2 dok zeleni samo z-index:1. Tako, layer sa najvećom vrijednošću u z-index: style elementu dobiva prednost.



Text Oglasi Foto Oglasi Besplatne Stvari Besplatan Web Hosting Web Direktorij Dizajn