DIV layers
Textbox in CSS met div
Je kunt met behulp van tabellen behoorlijk goed een pagina indelen en beheersbaar maken, maar met behulp van de div-tag kun je nog veel meer voor elkaar krijgen en heb je tabellen niet eens meer nodig. Je gaat textboxen maken, die je tot op de pixel nauwkeurig kunt neerzetten. Ook zetten we deze textbox in lagen.
Om textboxen en lagen te kunnen gebruiken en te beheersen maak je gebruik van CSS. CSS is de standaard webopmaak technologie om je html te kunnen definiëren. Zo kun je letterkleur, type en grootte bepalen en kun je er ook mee aangeven hoe groot een tabel moet zijn. Met CSS kun je ook lagen maken en aangeven waar deze laag moet verschijnen en welke laag onder of boven moet liggen. Je kunt denken aan bijvoorbeeld photoshop waar ook met lagen (layers) gewerkt wordt.
Om een textbox op een pagina een plek te geven, vul je de specifieke X en Y coördinaten in. X voor de afstand van links en Y voor de afstand vanaf de bovenkant. Daarnaast geef je ook nog aan welke positie de laag inneemt met behulp van z-index. Hoe lager het getal, hoe lager de laag komt te liggen. Dus laag 4 overlapt laag 3 te liggen enz.
Naast deze zaken voeg je ook nog position toe. Daarmee bepaal je op welke manier een element wordt geplaatst. Meestal kies je voor ‘absolute’, maar ook de waarde ‘relative’ kun je kiezen, bijvoorbeeld als de plek kan wijzigen na een bepaalde actie.
Naar de praktijk. We gaan een textbox op een pagina plaatsen. We gebruiken de volgende code:
<div id=”laag1″ style=”position: absolute; left: 150px; top: 100px; width: 100px; height: 160px; z-index: 1; border: 1px solid gray; color: #CC0066″>
Hier kun je tekst, afbeeldingen of wat dan ook plaatsen, zelfs tabellen zouden erin kunnen.
</div>
<div id=”laag2″ style=”position: absolute; left: 120px; top: 120px; width: 170px; height: 90px; z-index: 2; border: 1px solid black;”>
De <b>TWEEDE LAAG </B> over de eerste heen.
</div>
De lagen in actie.
Hier zie je dus twee textboxen in lagen over elkaar heen liggen. De tweede laag ligt ook bovenop de eerste laag. Je kunt hiermee dus veel meer dan met tabellen.
