Leerdoelen
- Floats
- Browser compatibility (Hacks)
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.
Float
Met behulp van float kan je bijvoorbeeld foto's zichzelf laten verdelen over het scherm. (voorbeeld) Om te realiseren dat elke foto zijn eigen plek weet te vinden, en elke foto ook nog wat witruimte te geven, moet je de tag IMG wat herdefineren in je stylesheet. Zie onderstaand voorbeeld:
img{
float: left;
margin: 20px;
}
Naast dat je iets naar links kan uitlijnen, kan je ook iets naar rechts uitlijnen. Dit kan je goed gebruiken bij het opmaken van div's. Wanneer je drie div's hebt in de html en je de eerste naar links laat floaten, de tweede naar recht, vult de derde automatisch de vrije ruimte op. Belangrijk is dat je de breedte van de eerste en tweede wel definieert. Zie eerst de html:
<div id="menu">
- menu 1<br>
- menu 2<br>
- menu 3<br>
</div>
<div id="tips">
- tips
</div>
<div id="content">
En dan hier de informatie
</div>
Zie nu de CSS:
#menu{
float: left;
background-color: green;
color: white;
width: 200px;
height: 400px;
}
#tips{
float: right;
background-color: green;
color: white;
width: 100px;
height: 400px;
}
#content{
background-color: orange;
color: white;
height: 400px;
text-align: center;
}
Links: