Layers zijn eigenlijk blokken, deze kun je over elkaar heen zetten. En in combinatie met Dhtml kan je ze
ook nog laten bewegen. Layers zijn enorm handig omdat je ze extreem precies kan positioneren.
| <div id="Layer1" style="position:relative; left:0px; top:0px; width:50px; height:15px; visibility:visible; z-index:1">hoi</div> |
Een voorbeeld:
hoi
Je kan de div tag gewoon in de body plaatsen. Het id van de layer is eigenlijk gewoon de layer naam.
Bij position kan je kiezen voor absolute en relative. Bij absolute wordt de plaats bepaald vanaf de linker boven hoek. Bij relative wordt deze berekend vanaf de positie waar de code staat.
Left is het aantal pixels vanaf de linkerkant tot aan de layer. Top is het aantal pixels vanaf de bovenkant
tot aan de layer. Hiermee kan je dus je layer positioneren. Bij relative werkt dit ook, hij meet dan de afstand
van waar je de layer hebt neergezet. Deze positionering kan ook negatief zijn. Vooral bij relative kan
dit handig zijn. Omdat je dan je layer net iets boven de plek kan zetten dan waar je de code hebt neergeplaatst.
Width and height geeft gewoon de grote van de layer aan, dus de breedte en de hoogte van je layer opgeven.
Visibility je kan hier kiezen voor visible (zichtbaar) of hidden (onzichtbaar). Meestal zal je gebruik maken van
visible omdat je wilt dat mensen je layer wel zien. Maar met Dhtml kan je een hidden layer visible maken. Hierdoor kan je drop
down menu's maken enz.
De z-index geeft de volgorde aan oftewel welke layer staat bovenaan als er meerder layers zijn. De regel is hoe
hoger het getal hoe verder die omhoog ligt.
<div id="Layer1" style="position:relative; left:0px; top:0px; width:150px; height:50px; visibility:visible; z-index:1; color:red; font-size:16px;">Welkom op</div>
<div id="Layer1" style="position:relative; left:5px; top:-45px; width:150px; height:50px; visibility:visible; z-index:2; color:blue; font-size:16px; ">Design-web</div> |
Voorbeeld van layers over elkaar heen:
Welkom op Design-web
Color en font size is alleen maar gebruikt om de text te stylen.
De mogelijkheden van layers zijn dus eindeloos, je kan er je design mee schrijven of in combinatie met Dhtml een
game in schrijven.
Natuurlijk kun je je layer ook een achtergrondkleur te geven, dit doe je zo:
| <div id="Layer1" style="position:relative; left:0px; top:0px; width:50px; height:50px; visibility:visible; z-index:1; background-color: orange;">hoi</div> |
<info>
|
Login
Actieve topics