login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials
Tutorials > CSS

Gegevens:
Geschreven door:
 SmokaLot
Moeilijkheidsgraad:
 Normaal
Hits:
 35873
Punten:
Aantal punten:
  (4.2)
Aantal stemmen:
 10
Stem:
 Niet ingelogd
Nota's:
 Lees de nota's (1)
 


Tutorial:

Positioning layers

1. Positioning layers

Het positioneren en 'knippen' (clipping) van blokken (layers) worden veelal gebruikt in DHTML toepassingen.
DHTML is een combinatie van HTML, CSS en javascript en wordt veel gebruikt door web designers om "dynamische pagina's" te maken.
Maar het kan ook handig zijn om ergens in een pagina een blok tekst in te voegen. Layers zijn dus eigenlijk niet meer dan blokken van een bepaalde breedte en hoogte.
Bekijk het volgend voorbeeld maar eens.
Alle stijl elementen worden uitgelegd.

<head>
<style type="text/css">
#hoofdblok { position:relative; width:500px; height:200px; background:#0000ff; color:#ffffff }
</style>
</head>

<body>
<div id="hoofdblok">Dit is de hoofdblok.</div>
</body

Ziet er zo uit:

Dit is de hoofdblok.

In bovenstaand voorbeeld hebben we een layer (blok) gemaakt van 500 pixels breed en 200 pixels hoog. Dit werd gedaan in de width: en height: stijl elementen.
De layer hebben we "relatief" gepositioneerd (position:relative) wat will zeggen dat de layer gepositioneerd wordt in de normale loop van de pagina.
Als we position:absolute gebruiken wordt de layer gepositioneerd ten opzichte van het venster van de browser of van de grens van de layer waar hij is ingeplaatst.
Dus als we in ons voorbeeld "relative" vervangen door "absolute" dan zal de layer bovenaan links in het browser venster geplaatst worden.
Probeer het maar eens uit, het zal heel wat klaarheid brengen.

In het volgende voorbeeld zal ik laten zien hoe we een layer kunnen positioneren op een x- (horizontaal) en y-as (vertikaal).

<head>
<style type="text/css">
#hoofdblok { position:relative; left:100px; top:20px; width:500px; height:200px; background:#000000; color:#ffffff }
</style>
</head>

<body>
<div id="hoofdblok"> Dit is de hoofdblok.</div>
</body>

Geeft ons volgende layer:

Dit is de hoofdblok.

 

Je kan de layer overal positioneren als je de left: en top: stijl elementen gebruikt.

left: betekent horizontale positie, top: betekent vertikale positie dus in ons vorig voorbeeld is de layer 100 px van links en 30 pixels van bovenuit gepositioneerd.

We kunnen ook layers in layers plaatsen...een voorbeeld:

<head>
<style type="text/css">
#hoofdblok { position:relative; left:100px; top:20px; width:500px; height:200px; background:#000000; color:#ffffff }
#geleblok { position:absolute; left:30px; top:50px; width:250px; height:100px; background:#ffff00; color:#000000 }
#groeneblok { position:absolute; left:30px; top:30px; width:100px; height:50px; background:#00c000; color:#000000 }
</style>
</head>

<body>
<div id="hoofdblok">Dit is de hoofdblok
<div id="geleblok">Dit is de gele blok
<div id="groeneblok">Dit is de groene blok
</div>
</div>
</div>
</body>

Ziet er in je browser zo uit:

Dit is de hoofdblok
Dit is de gele blok
Dit is de groene blok

 

De gele blok is 30 pixels van links en 50 pixels van bovenuit geplaatst ten opzichte van de zwarte rand.
De goene blok is 30 pixels van links en 30 pixels van bovenuit geplaatst ten opzichte van de gele rand.

NOTA:
Negatieve waarden in de left: en top: stijl elementen kunnen ook gebruikt worden. In dat geval worden de layer(s) 'off screen' geplaatst zodat ze volledig of gedeeltelijk onzichtbaar worden.

Een voorbeeld:

<head>
<style type="text/css">
#hoofdblok { position:relative; left:-110px; top:20px; width:500px; height:200px; background:#000000; color:#ffffff }
</style>
</head>

<body>
<div id="hoofdblok">
Dit is de hoofdblok
</div>
</body>

Ziet er zo uit:


Dit is de hoofdblok


« Vorige tutorial : Z-index Volgende tutorial : Button »

© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.011s