Deel 16

Links:

De DIV tag - deel 2

We zullen in deze cursus niet verder ingaan op het ID attribuut. Voor meer informatie zie de DHTML cursus.

We bepalen de breedte en de hoogte van een tekstvak in de DIV tag.

klik voor vergroting


De code :

<HTML>
<HEAD>
<TITLE>Oefening </TITLE>
</HEAD>
<BODY>

<DIV ID=rel STYLE="position: relative; top: 60px; left: 60px; width: 2in; color: red"> We bepalen de breedte van de tekst die we in ons document zetten. Zonder gebruik te maken van de <BR> tag om de zinnen af te breken. In het volgende voorbeeld zullen we eveneens de hoogte bepalen.
</DIV>

<BR>
<IMG src="divbreed.gif" border=2>

</BODY>
</HTML>

We zien duidelijk dat de volledige tekst in een 2 inch kolom staat.
Nu nog de hoogte. Hier moeten we zorgen dat de hoogte die we instellen niet de hoogte van de tekst zal zijn, maar de afstand tussen de bovenste rand van de tekst en het volgende element op onze pagina.
Zie de twee voorbeelden hieronder.

Voorbeeld 1 :

<HTML>
<HEAD>
<TITLE>Oefening </TITLE>
</HEAD>
<BODY>

<DIV ID=rel STYLE="position: relative; top: 60px; left: 60px; width: 2in; height: 4in; color: red"> We bepalen de breedte van de tekst die we in ons document zetten. Zonder gebruik te maken van de <BR> tag om de zinnen af te breken. We zien dat de lijn op 4 inch staat, gemeten vanaf de bovenste rand van de tekst.
</DIV>

<HR SIZE=3 WIDTH=50% NOSHADE>

</BODY>
</HTML>

Klik hier en zie het effect.


Voorbeeld 2:

<HTML>
<HEAD>
<TITLE>Oefening </TITLE>
</HEAD>
<BODY>

<DIV ID=rel STYLE="position: relative; top: 60px; left: 60px; width: 2in; height: 1in; color: red"> We bepalen de breedte van de tekst die we in ons document zetten. Zonder gebruik te maken van de <BR> tag om de zinnen af te breken. We zien dat de lijn op 1 inch staat, gemeten vanaf de bovenste rand van de tekst.
</DIV>

<HR SIZE=3 WIDTH=50% NOSHADE>

</BODY>
</HTML>

 

Klik hier en zie het effect.