CMD 1 | Herfst 06 | Layers

Leerdoelen

Lesinhoud

Lagen zijn niet bij de eerste versie van html uit gebracht maar wordt door alle gangbare browsers ondersteund. Lagen zegt het al door middel van dit element kunnen onderdelen op elkaar worden geplaatst. De tag die er voor wordt gebruikt is afhankelijk van een keuze die je maakt. Er bestaan twee tags in html die niet direct een functie hebben, te weten :<div> en <span>. De meest gangbare voor een layer is echter de div.

Doormiddel van de attributen die ook kunnen worden gedefinieerd in CSS word de div vormgegeven. De div is uit principe een inline box en heeft dus geen margins of paddings en zal tenzij anders wordt aangegeven niet weergegeven worden in de browser.

  <div id="content" style="position:absolute; left:55px; top:140px; width:450px; height:266px; z-index:1">
       inhoud
  </div>
  

zoals je ziet wordt de layer aangemaakt door een attribute "style" te voorzien van parameters. Wat je ook ziet is dat de parameters dezelfde opbouw hebben als een style definitie. Dit doet precies hetzelfde.

   <style>
   <!—
      #content { 
           position:absolute; 
           left:55px; 
           top:140px; 
           width:450px; 
           height:266px; 
           z-index:1; 
       } 
   -->
   </style>
 
   .... 

   <div id="content">
    
       inhoud 
   </div> 
  

Als je dus meerdere keren deze laag nodig hebt dan is het gewoon handiger om het in de style sheet te definieren. De Z-index is de hoogte waar op de laag zich bevind. Een hoger getal ligt dus boven op. Als twee lagen dezelfde z-index hebben wordt de laatst in de html volgorde bovenop getoond.

Links:


Auteur: Roos Groenwegen
Seizoen: Herfst
Studiejaar: CMD1
Lesnummer: 01
Datum: 05-09-2005
Type les: MME