Deel 15

Links:

De DIV tag

Met deze tag en met behulp van STYLE SHEETS specificaties kunnen we objecten, zoals tekst en afbeeldingen, in een pagina positioneren. We zullen dit met RELATIEVE of ABSOLUTE positionering doen. De DIV tag kan ook een ID krijgen, zoals gezien in de
les 7:"HET ID ATTRIBUUT".
We zullen nu een DIV tag gebruiken samen met een ID die we in de hoofding van het document zetten.
Vb. :

<HTML>
<HEAD>
<TITLE>CornerJohn</TITLE>

<STYLE TYPE="text/css">

#mylayer {POSITION: absolute; TOP: 201px; LEFT: 60px }

#mylayer2 {POSITION: absolute; TOP: 301px; LEFT: 20px; }

</STYLE>
</HEAD>
<BODY>

<DIV ID="mylayer2"> Alhoewel dit als eerste in de BODY tag staat, zal het in tweede positie komen in de pagina omdat de inhoud van deze DIV tag op 301 pixels van de TOP moet staan.
</DIV>

<DIV ID="mylayer"> Dit zal de eerste zin zijn, op 201 pixels van de TOP. Maar wel iets meer naar binnen omdat wij 60 pixels van de rand blijven.
</DIV>

</BODY>
</HTML>

Klik hier en zie het effect.

Nu gaan we er gewoon een tekst bijplaatsen, zonder dat men er een specifieke positionering bijzet.
Deze tekst zal bovenaan het blad komen, vr de DIV tags.

Zet gewoon NA de tweede DIV tag de volgende zin :

<b>Hello, ik kom bovenaan.</b>

Klik hier en zie het effect.

We gaan nu even de positie van objecten bepalen met een RELATIEVE positie.
Vb. :
We maken een HTML document en zetten in de BODY

<P> Deze tekst maakt gebruik van STATISCHE positionering. </P>

<DIV ID=abs STYLE="POSITION: absolute; TOP: 70px; LEFT: 60px; COLOR: blue"> Deze tekst maakt gebruik van ABSOLUTE positionering. </DIV>

<DIV ID= rel STYLE="POSITION: relative; TOP: 70px; LEFT: 60px; COLOR: red"> Deze tekst maakt gebruik van RELATIEVE positionering en toch staat deze tekst niet gelijk met de Voorgaande. Niettegenstaande de afmetingen hetzelfde zijn. TOP en LEFT. </DIV>


De zin in de eerste DIV tag, met de ABSOLUTE positionering, wordt op exact 70 en 60 pixels geplaatst gemeten vanaf de linkerbovenhoek.
De zin in de tweede DIV tag, deze met de RELATIEVE positionering, wordt geplaatst vanaf de plaats waar hij normaal zou staan, t.t.z. zoals de allereerste zin, dus NIET tegen de TOP en de LINKERRAND, maar er iets vandaan. Daarom ook dat de plaatst van deze zin lichtjes anders is dan de voorgaande met de ABSOLUTE positionering.

Klik hier en zie het effect.