CSS en elementen

In dit onderdeel wordt ingegaan op de wijze waarop elementen worden vormgegeven en hun plaats krijgen. Achtereenvolgens komt aan de orde: Indeling elementen, Parent en child elementen, De Box, Normal flow, Regelhoogte, Zwevende elementen, Positioneren van elementen, Relatief positioneren, Absoluut positioneren en Werken met lagen.

Indeling elementen

In HTML worden de volgende soorten elementen onderscheiden: elementen op blokniveau, inline elementen en onzichtbare elementen. Elementen op blokniveau en inline elementen zijn zichtbaar op wat de canvas genoemd wordt, dat deel van de browser waarin een document wordt weergegeven. Onzichtbare elementen worden wel door de browser geïnterpreteerd, maar niet weergegeven op de canvas. Voorbeelden zijn de in de head van een document opgenomen elementen LINK, STYLE en TITLE.

Bij de beschrijving van de vormgeving van elementen en de plaatsing ervan op de canvas is vooral het onderscheid tussen elementen op blokniveau en inline elementen van belang.

Elementen op blokniveau zijn elementen die vooraf gegaan en gevolgd worden door de overgang naar een nieuwe regel. Voorbeelden zijn P, PRE, BLOCKQUOTE, ADDRESS, DIV, CENTER, Hx, BR, HR, UL, OL, LI, DL, DT, DD, TABLE en FORM.

Inline elementen zijn elementen die dezelfde regel kunnen delen met andere elementen en niet vooraf gegaan en gevolgd worden door de overgang naar een nieuwe regel. Voorbeelden zijn A, IMG, FONT, B, I, U, TT en SPAN.

Een bijzondere vorm van elementen op blokniveau of inline elementen zijn de zogenoemde replaced elementen. Dat zijn elementen, waarvan de plaats ingenomen wordt door de inhoud waarnaar het element verwijst. Voorbeelden zijn IMG, INPUT, TEXTAREA, SELECT en OBJECT.

Parent en child elementen

Bij de begrippen parent element en child element gaat het niet om een indeling van elementen, maar om de vaststelling hoe elementen tot elkaar in relatie staan: een parent element sluit child elementen in en een child element wordt ingesloten door zijn parent element. In het volgende voorbeeld wordt het SPAN element ingesloten door het P element. P is dus het parent element van SPAN en SPAN is het child element van P.

<P>Dit is het parent element <SPAN>en dit is het child element</SPAN></P>

Naast parent en child wordt ook het begrip sibling elementen gebruikt. Het gaat daarbij om elementen welke op hetzelfde niveau staan (elkaars broer of zuster zijn). Bijvoorbeeld twee paragrafen welke beide child zijn van het BODY element:

<BODY> <P>..</P> <P>..</P> </BODY>

Tenslotte zijn er nog de begrippen ancestor element en descendent element. Een ancestor (voorouder) kan het parent element zijn, maar ook de parent van de parent of een nog verdere relatie. Een descendent (nakomeling) kan een child element zijn, maar ook een child van een child of een nog verdere relatie.

De box

Wat betreft van de vormgeving van een element wordt er bij Cascading Style Sheets van uitgegaan dat elk element wordt omgeven door een rechthoekige gebied, de box. Van binnen naar buiten bestaat de box uit de inhoud van het element, de padding, de border en de margin. Visueel ziet het er als volgt uit:

De margin is de afstand van de rand van een element tot de rand van het parent element of de rand van een aangrenzend element. De margin is transparent en neemt dus de achtergrondkleur aan van het parent element.

De border is de rand van een element.

De padding is de afstand tussen de rand van een element en de inhoud. Indien een achtergrondkleur gebruikt wordt voor het element, dan heeft de padding dezelfde kleur.

De grootte van de box wordt bepaald door de som van de afmetingen van het element en de breedte van de margin, de border en de padding.

De breedte van de margin, de border en de padding worden vastgelegd met de margin, de border en de padding eigenschappen. De afmetingen van de inhoud van het element kunnen worden vastgelegd met de eigenschappen width en height.

Bij elementen op blokniveau is sprake van één rechthoekige box. Een list-item element (LI) is een speciale vorm van een element op blokniveau: de box wordt voorafgegaan door een markering. De wijze waarop de markering wordt weergegeven, kan bepaald worden met behulp van de eigenschappen voor lijsten.

Bij inline elementen wordt de box opgesplitst in meerdere kleinere elementen, wanneer niet alles op een regel past.

Voor elementen op blokniveau gelden de volgende regels:

In verticale richting schuiven aangrenzende verticale margins in elkaar. De resterende margin krijgt de breedte van grootste margin. In het geval van negatieve margins, wordt de grootste negatieve margin afgetrokken van de grootste positieve margin. Wanneer er geen positieve margins zijn wordt de grootste negatieve margin aangehouden.

In de volgende figuur wordt het in elkaar schuiven van verticale margins gedemonstreerd. Voor een combinatie van twee H1 elementen zijn verschillende waarden voor margin-top en margin-bottom gebruikt. Bijvoorbeeld voor de combinatie linksboven:

<H1 STYLE="margin-bottom: 0px; background-color: silver; font-size: 14pt"> <H1 STYLE="margin-top: 0px; background-color: silver; font-size: 14pt">

De horizontale afmeting van de box wordt bepaald door zeven eigenschappen: margin-left, border-left-width, padding-left, width, padding-right, border-right-width en margin-right. De totale horizontale afmeting van deze eigenschappen is altijd gelijk aan de breedte van het parent element.

Om er voor te zorgen dat de totale breedte van de zeven genoemde eigenschappen gelijk is aan de breedte van het parent element, moet minstens één eigenschap de waarde auto hebben. Er zijn drie eigenschappen, waaraan de waarde auto kan worden gegeven: margin-left, width en margin-right.
Standaard heeft width de waarde auto. Bij een "replaced element", een element waarvan de plaats ingenomen wordt door de inhoud waarnaar het element verwijst, wordt auto vervangen door de intrinsieke waarde van het element (bijvoorbeeld bij het IMG element door de breedte van de afbeelding). In dat geval moeten margin-left of margin-right ervoor zorgen dat de totale breedte van de box gelijk is aan de breedte van het parent element.
Wanneer geen enkele eigenschap de waarde auto heeft, dan krijgt margin-right automatisch de waarde auto toegewezen.
Wanneer meerdere eigenschappen de waarde auto hebben en één daarvan is width, dan worden margin-left en/of margin-right op "0" gesteld en krijgt width de maximale breedte.
Wanneer margin-left en margin-right beiden de waarde auto hebben, dan krijgen ze een gelijke breedte.

De hiervoor beschreven regels met betrekking tot de horizontale afmetingen van een element op blokniveau zijn in Netscape Navigator 4 niet correct geïmplementeerd. Niet de breedte van het parent element bepaalt bij Netscape Navigator 4 hoe groot de box is, maar de breedte van de inhoud van het element zelf. Duidelijk is dit te zien bij de voorbeelden van de border en padding eigenschappen en de background-color en de background-image eigenschap. In die voorbeelden is het BODY element steeds het parent element en het betreffende element op blokniveau (H2 of P) zou zich dus over de hele breedte van het venster moeten uitstrekken. Netscape Navigator 4 plaatst de padding en de border echter direct rechts van de inhoud (de tekst) van het element.
Ook bij Microsoft Internet Explorer 3 wordt de box niet over de volledige breedte van het parent element weergegeven.
In de volgende afbeelding is de background eigenschap gebruikt voor een element op blokniveau. De rand van de afbeelding geeft breedte van het parent element weer. In het bovenste deel is de weergave van de box correct. Het onderste deel laat zien hoe Netscape Navigator 4 en Microsoft Internet Explorer 3 de box foutief weergeven.

<H2 STYLE="background: yellow">..</H2>

Voor inline elementen kan de width eigenschap niet gebruikt worden en betekent de waarde auto voor margin-left of margin-right dat de margin "0" is.

Normal flow

De wijze waarop elementen standaard hun plaats vinden op de canvas heet normal flow.

Elementen op blokniveau worden in verticale richting na elkaar geplaatst. De afstand tussen de bovenrand van een element en een voorgaande sibling of parent element wordt bepaald door de margin eigenschappen. Zoals beschreven bij de box, schuiven verticale margins daarbij in elkaar. In horizontale richting wordt de afstand tussen de box en het parent element bepaald door de margin eigenschappen.

In het volgende voorbeeld zijn drie sibling elementen op blokniveau (P) geplaatst binnen hun parent element (BODY). Met behulp van de margin-left eigenschap is de afstand van de tweede en derde paragraaf tot de rand van het BODY element bepaald. Het document is als volgt opgebouwd:

<BODY ..> <P CLASS="p1">..</P> <P CLASS="p2">..</P> <P CLASS="p2">..</P> </BODY>

De opbouw van het stijlblok in de head van het document staat naast de afbeelding weergegeven.

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

Inline elementen worden in horizontale richting na elkaar geplaatst. Aangrenzende boxen op een regel vormen een line box. De beschikbare breedte wordt bepaald door het element op blokniveau, waarvan de inline elementen onderdeel zijn. Een inline box die niet geheel in een line box past, wordt opgesplitst in meerdere inline boxen en verdeeld over verschillende regels. Indien de inline boxen op een regel samen niet de totale breedte van de line box hebben, dan worden ze uitgelijnd met behulp van de text-align eigenschap. Aaneengesloten tekst in een element op blokniveau welke niet behoort tot een inline element, vormt een zogenaamde "anonymous" inline box. Deze worden op dezelfde wijze behandeld als gewone inline boxen.

In het volgende voorbeeld zijn drie inline elementen (SPAN) opgenomen in een element op blokniveau (P). De paragraaf bevat daarnaast nog tekst welke geen deel uitmaakt van een inline element. Het document is als volgt opgebouwd:

<BODY ..> <P><SPAN CLASS="s1">..</SPAN><SPAN CLASS="s2">..</SPAN><SPAN CLASS="s3">..</SPAN>..</P> </BODY>

De opbouw van het stijlblok in de head van het document staat naast de afbeelding weergegeven.

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

Regelhoogte

Inline boxen op dezelfde regel kunnen een verschillende hoogte hebben. De hoogte van een regel wordt bepaald door de hoogste box.

In het volgende voorbeeld zijn drie inline elementen (SPAN) opgenomen in een element op blokniveau (P). Het document is als volgt opgebouwd:

<P CLASS="p1"><SPAN CLASS="s1">..</SPAN><SPAN CLASS="s2">..</SPAN><SPAN CLASS="s3">..</SPAN></P>

De opbouw van het stijlblok in de head van het document staat naast de afbeelding weergegeven.

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

Met behulp van de line-height eigenschap kan de regelhoogte vastgelegd worden. In het volgende voorbeeld is dat gedaan voor het element op blokniveau P. Het document is op dezelfde wijze opgebouwd als in het vorige voorbeeld. De opbouw van het stijlblok in de head van het document staat naast de afbeelding weergegeven.

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

Wanneer de box van een inline element minder hoog is dan die van de line box, wordt deze standaard zo geplaatst dat de basislijn van de tekst voor de verschillende inline elementen gelijk is. Met behulp van de vertical-align eigenschap kan de inline box ook op een andere manier uitgelijnd worden ten opzichte van de line box.

Replaced elementen die inline boxen vormen (bijvoorbeeld het IMG element) beïnvloeden de regelhoogte ook, maar doen dat door middel van de height en de vertical-align eigenschap. De regelhoogte neemt toe, als de top van het replaced element (inclusief de padding, de border en de margin) boven het hoogste deel van de tekst uitkomt, of de onderkant onder het laagste deel.

In het volgende voorbeeld is een afbeelding in de tekst opgenomen en uitgelijnd met de vertical-align eigenschap. Het document is als volgt opgebouwd:

<P CLASS="p1">..<IMG CLASS="img" HEIGHT="64" BORDER="1" ..>..</P>

De opbouw van het stijlblok in de head van het document staat naast de afbeelding weergegeven.

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

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 rechter rand 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 .. achtergrondkleur.</SPAN></P>

Met behulp van de float eigenschap kunnen alle elementen zwevend gemaakt worden.

In het volgende voorbeeld is voor een element op blokniveau de eigenschap float: left gebruikt. Het volgende element op blokniveau vindt, als er voldoende ruimte is, rechts ervan zijn plaats. 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 staat naast de afbeelding weergegeven.

<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 zijn voor een inline element de margin en de padding vastgelegd. De opbouw van het document is:

<BODY ..> <P><SPAN CLASS="s1">float</SPAN><SPAN CLASS="s2">Het zwevende ... element.</SPAN></P> </BODY>

De opbouw van het stijlblok in de head van het document staat naast de afbeelding weergegeven.

<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.

Positioneren van elementen

Met behulp van de position eigenschap kan de plaats van een element, in afwijking van de normale positie op de canvas, vastgelegd worden. Daarbij zijn er twee mogelijkheden: relatieve en absolute positionering.

Bij relatieve positionering wordt de plaats van het element bepaald ten opzichte van de gebruikelijke positie van het element. Bij absolute positionering is er geen relatie meer met de normale positie van het element. De plaats wordt bepaald ten opzichte van een referentiebox, welke gevormd wordt door het meest dichtbij gelegen ancestor element dat gepositioneerd is.

Absoluut en relatief gepositioneerde elementen vormen een nieuwe referentiebox voor descendent elementen. Descendent elementen verplaatsten met het ancestor element mee.

De plaats van een element in het vlak van het scherm wordt bepaald met de eigenschappen top en left.

Als gevolg van relatieve en absolute positionering kunnen elementen elkaar gaan bedekken. Zie hiervoor Werken met lagen.

Relatief positioneren

Met de eigenschap position: relative wordt de plaats van het element bepaald ten opzichte van de gebruikelijke positie van het element. De ruimte die normaal gereserveerd is voor het element verplaatst niet met het element mee.
Een relatief gepositioneerd element vormt een referentiebox voor descendent elementen. Descendent elementen verplaatsten met het ancestor element mee.

In het volgende voorbeeld bevat een element op blokniveau (DIV) een inline element (SPAN). De opbouw is:

<BODY ..> <DIV ID="d1">Deze ... <SPAN ID="s1">s1</SPAN> ... element.</DIV> </BODY>

De opbouw van het stijlblok in de head van het document staat naast de afbeelding weergegeven.

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

Wanneer we het SPAN element relatief positioneren, wordt de plaats bepaald ten opzichte van de normale positie binnen het DIV element. De eigenschappen top: 80px en left: 20px verplaatsen de linker bovenhoek van het SPAN element 80 pixels naar beneden en 20 pixels naar rechts gemeten vanaf de linker bovenhoek van de normaal ingenomen ruimte. De normaal ingenomen ruimte verplaatst niet met het SPAN element mee.

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

Absoluut positioneren

Met de eigenschap position: absolute wordt de plaats van het element bepaald ten opzichte van de referentiebox welke gevormd wordt door het meest dichtbij gelegen ancestor element, dat de eigenschap position heeft met een andere waarde dan static (bijvoorbeeld absolute of relative). Indien zo'n element niet aanwezig is, wordt de plaats berekend ten opzichte van de box van het BODY element, waarin het gehele document zich bevindt. De ruimte die normaal gereserveerd is voor een absoluut gepositioneerd element en eventuele child elementen, verplaatst met het element mee.
Een absoluut gepositioneerd element vormt een referentiebox voor descendent elementen. Descendent elementen verplaatsten met het ancestor element mee.

Ter illustratie gebruiken we hetzelfde voorbeeld als bij relatief positioneren.

Het DIV element is nu absoluut gepositioneerd. Omdat er geen parent element is met de eigenschap position: absolute of position: relative, wordt de referentiebox gevormd door het BODY element. De eigenschappen top: 30px en left: 60px verplaatsen de linker bovenhoek van het DIV element 30 pixels naar beneden en 60 pixels naar rechts gemeten vanaf de linker bovenhoek van het BODY element.

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

Vervolgens wordt ook het SPAN element absoluut gepositioneerd. De referentiebox van het SPAN element is het DIV element. De eigenschappen top: 80px en left: 20px verplaatsen de linker bovenhoek van het SPAN element 80 pixels naar beneden en 20 pixels naar rechts gemeten vanaf de linker bovenhoek van het DIV element. De normaal ingenomen ruimte verplaatst met het SPAN element mee en de overige inhoud van het DIV element neemt de vrijgekomen plaats in.

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

Werken met lagen

Als gevolg van relatieve en absolute positionering kunnen elementen elkaar gaan bedekken. De normale volgorde waarin elkaar overlappende elementen worden weergegeven, is van onder naar boven (loodrecht op de canvas) in de volgorde waarin ze in een document verschijnen. De z-index eigenschap kan worden gebruikt om een andere volgorde (z-order) te specificeren.

In het volgende voorbeeld zijn twee elementen op blokniveau (DIV) absoluut gepositioneerd. De opbouw is:

<BODY ..> <DIV ID="d1">division 1</DIV> <DIV ID="d2">division 2</DIV> </BODY>

De opbouw van het stijlblok in de head van het document staat naast de afbeelding weergegeven.

Omdat er voor beide DIV elementen geen parent element is met de eigenschap position: absolute of position: relative, wordt de referentiebox gevormd door het BODY element. Het tweede DIV element (division 2) staat in het document na het eerste DIV element (division 1) en wordt hier dus boven geplaatst.

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

Wanneer voor beide DIV elementen de z-index eigenschap wordt gebruikt, dan komt het element met de hoogste waarde bovenaan. In dit voorbeeld is dat het eerste DIV element met de gele kleur.

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

Inhoud Handleiding HTML Index