Handleiding HTML - CSS en elementen

CSS		CSS en elementen

Handleiding HTML Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin

Zwevende elementen

In afwijking van hun normale plaats op de canvas kunnen elementen ook zwevend gemaakt worden. De box van een zwevend element wordt langs de linker- of rechterrand van het parent element geplaatst en de boxen van andere elementen kunnen hun plek ernaast krijgen. In HTML is een veel gebruikt voorbeeld het zwevend maken van afbeeldingen met behulp van het ALIGN attribuut bij het IMG element.

<P><IMG ALIGN="left" ..><SPAN STYLE="background: yellow">De tekst wordt rechts van de afbeelding uitgelijnd. Om het effect goed te laten zien is de tekst in een SPAN element opgenomen en met behulp van de background eigenschap voorzien van een achtergrondkleur.</SPAN></P>

Met behulp van de float eigenschap kunnen alle elementen zwevend gemaakt worden. Wel is het nodig de breedte van het element expliciet vast te leggen met de width eigenschap. Een uitzondering voor dat laatste geldt de replaced elementen, die van zichzelf al een bepaalde breedte hebben.

In het volgende voorbeeld is voor een inline element de float eigenschap opgenomen. Van het zwevende element zijn behalve de breedte ook de margin en de padding vastgelegd. De opbouw van het document is:

<BODY ..> <P><SPAN CLASS="s1">float</SPAN><SPAN CLASS="s2">Het zwevende SPAN element heeft een padding van 10px en rechts en onder een margin van 15px. De gehele box van het element, inclusief de margin, valt binnen de inhoud van het parent element.</SPAN></P> </BODY>

De opbouw van het stijlblok in de head van het document is:

<STYLE TYPE="text/css">  </STYLE>

Wanneer de float eigenschap gebruikt wordt met de waarden left of right, dan wordt het element behandeld als een element op blokniveau. Een eventueel gebruikte display eigenschap wordt genegeerd.

De box van een zwevend element wordt compleet weergegeven, inclusief paddings, borders en margins. De margins van een zwevend element en aangrenzende elementen schuiven niet in elkaar.

In het volgende voorbeeld is een element op blokniveau met de eigenschap float: left zwevend gemaakt. Het volgende element op blokniveau wordt, als de float eigenschap er niet voor gebruikt is, normaal in de linker bovenhoek van het parent element geplaatst en daardoor gedeeltelijk bedekt door het zwevende element. De opbouw van het document is:

<BODY ..> <DIV CLASS="div1">division 1</DIV> <DIV CLASS="div2">division 2</DIV> </BODY>

De opbouw van het stijlblok in de head van het document is

<STYLE TYPE="text/css">  </STYLE>

Om de box van twee elementen op blokniveau naast elkaar te plaatsen, moet je voor beide elementen de float eigenschap opnemen. De margin-left eigenschap is gebruikt om wat ruimte tussen de twee boxen te creëren.

<STYLE TYPE="text/css">  </STYLE>

De plaats van child elementen wordt bepaald ten opzichte van de plaats van het zwevende element. Dat betekent dat child elementen met hun zwevende parent mee verplaatsen.

De clear eigenschap kan gebruikt worden om aan te geven of naast een element een zwevend element geplaatst mag worden.

Vervolg: Positioneren van elementen

Inhoud onderdeel | Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin