Handleiding HTML Legenda | Beschrijving | CSS eigenschappen | Begin

Met de display eigenschap kun je bepalen of en hoe de browser een element moet weergeven. Zo kun je de waarde block gebruiken, als je wilt vastleggen dat een element als een element op blokniveau moet worden weergegeven en dus voorafgegaan en gevolgd moet worden door een overgang naar een nieuwe regel. In het volgende voorbeeld is dat met behulp van een CLASS-selector gedaan voor het STRONG element.

<P>Normaal wordt <STRONG>STRONG</STRONG> weergegeven als een inline element.</P>

<P>Met display: block wordt <STRONG CLASS="blokweergave">STRONG</STRONG> weergegeven als element op blokniveau.</P>

Het stijlblok in de head van het document bevat een stijlregel voor de CLASS-selector "blokweergave".

.blokweergave { display: block; }

Je kunt de waarde block bijvoorbeeld gebruiken, om ervoor te zorgen dat de afbeeldingen in een document niet tussen de tekst komen te staan, maar op een aparte regel worden geplaatst.

<P>Voor ... <IMG SRC="gezicht.gif" ALT="" WIDTH="105" HEIGHT="125"> ... en na de afbeelding.</P>

<P>Voor ... <IMG SRC="gezicht.gif" ALT="" WIDTH="105" HEIGHT="125" CLASS="blokweergave"> ... en na de afbeelding.</P>

Het stijlblok bevat een stijlregel voor het IMG element. Om boven en onder de afbeelding extra ruimte vrij te houden, is ook de margin eigenschap opgenomen.

.blokweergave { display: block; margin: 1em 0; }

De waarde inline kun je gebruiken als je een element op blokniveau wilt weergeven als een inline element. Dus op één regel met andere inline inhoud en niet voorafgegaan en gevolgd door een overgang naar een nieuwe regel.

<DIV>Voor het P element ...

<P CLASS="inlineweergave">De inhoud van het P element.</P>

... na het P element.</DIV>

Het stijlblok bevat een stijlregel voor de CLASS-selector "inlineweergave".

.inlineweergave { display: inline; color: #FF0000;
                  background-color: #FFFFFF; }

In HTML definieer je met het LI element een onderdeel van een geordende of ongeordende lijst. De display eigenschap met de waarde list-item kun je gebruiken, om te bepalen dat een willekeurig element als een onderdeel van een lijst moet worden weergegeven. Dat wil zeggen voorafgegaan en gevolgd door een overgang naar een nieuwe regel en voorzien van een markering. In het volgende voorbeeld gebeurt dat met het P element.

<P CLASS="lijstweergave1">P weergegeven als list-item.</P>

<P CLASS="lijstweergave2">P weergegeven als list-item met een linker margin die de markering zichtbaar maakt.</P>

Het stijlblok bevat stijlregels voor de CLASS-selectors "lijstweergave1" en "lijstweergave2". De CLASS-selector "lijstweergave1" zorgt er weliswaar voor dat het eerste P element wordt weergegeven als onderdeel van een lijst, alleen is dat niet zichtbaar door het ontbreken van ruimte voor de markering. Die ruimte ontstaat wel wanneer (zoals gedaan is voor de CLASS-selector "lijstweergave2") ook de margin-left eigenschap wordt opgenomen met een positieve waarde van voldoende grootte.

.lijstweergave1 { display: list-item; }
.lijstweergave2 { display: list-item; margin-left: 1.2em; }

Ook van een inline element kun je een onderdeel van een lijst maken.

<P>Ook een <SPAN CLASS="lijstweergave">inline element</SPAN> kun je als list-item weergeven.</P>

Het stijlblok bevat een stijlregel voor de CLASS-selector "lijstweergave".

.lijstweergave { display: list-item; margin-left: 1.2em; }

Met de waarde list-item kun je er bovendien voor zorgen dat de beschrijvingen in een definitielijst voorzien worden van een markering.

<DL>
<DT>Onderdeel 1</DT>
<DD CLASS="lijstweergave">Beschrijving 1 van onderdeel 1.</DD>
<DD CLASS="lijstweergave">Beschrijving 2 van onderdeel 1.</DD>
<DT>Onderdeel 2</DT>
<DD CLASS="lijstweergave">Beschrijving 1 van onderdeel 2.</DD>
<DD CLASS="lijstweergave">Beschrijving 2 van onderdeel 2.</DD>
</DL>

Omdat de margin-left eigenschap in de meeste browsers standaard een waarde heeft van ongeveer 40 pixels, zal de markering altijd zichtbaar zijn. De margin-left eigenschap is nu echter opgenomen om ervoor te zorgen, dat de markering zoveel mogelijk aan het begin van de regel staat (de exacte positie verschilt per browser).

DD { display: list-item; margin-left: 1.2em; }

Met de waarde run-in kun je bepalen dat de inhoud van een element op blokniveau direct voor de inhoud van een volgend element op blokniveau moet worden geplaatst. De waarde wordt meestal gebruikt om een titel niet boven een blok tekst te plaatsen, maar aan het begin van de eerste regel. In het volgende voorbeeld wordt de waarde run-in gebruikt voor een H2 element, dat gevolgd wordt door een P element.

<H2>run-in</H2>

<P>De inhoud van H2 staat op dezelfde regel als het eerste deel van de inhoud van P.</P>

Voor het H2 element gecombineerd met de pseudo element selector after is ook een stijlregel opgenomen, met de nog niet in deze handleiding beschreven content eigenschap. Deze stijlregel zorgt ervoor dat direct na het H2 element een punt en een spatie worden ingevoegd.

H2       { display: run-in; }
H2:after { content: ". " }

Nieuw in CSS 2.1 en nog maar heel beperkt ondersteund is de waarde inline-block. Deze waarde bepaalt dat het element zelf een enkele inline box heeft (en dus niet verdeeld is over meerdere regels), maar dat de inhoud van het element moet worden weergegeven als bij een elementen op blokniveau. In het volgende voorbeeld is twee keer een P element opgenomen in een DIV element. De tweede keer is voor het P element de waarde inline-block gebruikt. De box van het P element moet daardoor op dezelfde regel geplaatst worden als de tekst in het DIV element.

<DIV>In DIV voor ingesloten P. <P>De inhoud van het P element.</P> In DIV na ingesloten P element.</DIV>

<DIV><BR>In DIV voor ingesloten P. <P CLASS="blokopregel">De inhoud van het P element.</P> In DIV na ingesloten P element.</DIV>

Om het effect goed zichtbaar te maken, zijn in een stijlregel voor het P element een breedte, een voorgrondkleur en een achtergrondkleur vastgelegd met respectievelijk de eigenschappen width, color en background-color.

P            { color: #FF3300; background-color: #FFFF99;
               width: 70px; }
.blokopregel { display: inline-block; }

De waarde inline-block kun je ook gebruiken voor een inline element. Normaal moet de browser de width eigenschap voor veel inline elementen negeren, maar als voor deze elementen de display eigenschap met de waarde inline-block is opgenomen, dan wordt de opgegeven breedte wel aangehouden.

<DIV>In DIV voor ingesloten B. <B>De inhoud van het B element.</B> In DIV na ingesloten B element.</DIV>

<DIV><BR>In DIV voor ingesloten B. <B CLASS="blokopregel">De inhoud van het B element.</B> In DIV na ingesloten B element.</DIV>

Het stijlblok bevat de volgende stijlregels:

B            { color: #FF3300; background-color: #FFFF99; }
.blokopregel { display: inline-block; width: 70px; }

De verschillende waarden die betrekking hebben op tabellen zijn vooral van nut bij een taal als XML, die geen vooraf gedefinieerde tabelelementen heeft. Hoewel XML buiten het bestek van deze handleiding valt, is ter illustratie toch een voorbeeld opgenomen van een eenvoudige tabel met twee rijen en twee kolommen. Voor de duidelijkheid verwijzen de namen van de gebruikte elementen naar gewone tabelelementen. Het XML-document bevat de volgende code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="voorbeeld.css"?>

<document>
Dit is voor ...

<tabel>
<rij>
<cel>a1</cel><cel>a2</cel>
</rij>
<rij>
<cel>b1</cel><cel>b2</cel>
</rij>
</tabel>

... en dit na de tabel.
</document>

Een apart stijlblad bevat de volgende stijlregels:

document { display: block; margin: 5px;
           color: black; background-color: white;
           font-family: Arial, Helvetica, sans-serif;
           font-size: small; }
tabel    { display: inline-table; border-collapse: separate;
           border-spacing: 2px; border: solid 1px #CCCCCC; }
rij      { display: table-row; }
cel      { display: table-cell; border: solid 1px #CCCCCC;
           padding: 0px 2px; vertical-align: middle; }

Meer voorbeelden van het gebruik van verschillende waarden die betrekking hebben op tabellen, worden gegeven in de onderdelen Inline tabellen en Tabellen zonder tabelelementen.

De waarde none kun je gebruiken als je een element geheel, inclusief eventuele effecten op de lay-out, wilt verbergen. In het volgende voorbeeld kun je zien wat het resultaat is, als de waarde wordt gebruikt voor het IMG element. Niet alleen blijft de weergave van de afbeelding zelf achterwege, ook de hoogte van de tweede regel wordt niet langer bepaald wordt door het IMG element.

<P>Het P element in dit voorbeeld bevat tekst voor de afbeelding ... <IMG SRC="gezicht.gif" ALT="" WIDTH="105" HEIGHT="125"> ... en tekst na de afbeelding.</P>

<P>Het P element in dit voorbeeld bevat tekst voor de afbeelding ... <IMG SRC="gezicht.gif" ALT="" WIDTH="105" HEIGHT="125" CLASS="verbergen"> ... en tekst na de afbeelding.</P>

Het stijlblok bevat de volgende stijlregel:

.verbergen { display: none; }

In de praktijk zal er echter weinig reden zijn om de waarde none toe te passen bij de statische weergave van een document in de browser. Je kunt er dan beter voor kiezen het element gewoon weg te laten. Pas als je meer dynamiek in de weergave wilt brengen, heeft het zin de waarde none te gebruiken.

Het volgende voorbeeld laat een aantal vragen zien. Met de display eigenschap met de waarde none is aangegeven, dat de browser de antwoorden niet mag weergeven. Als je op een vraag klikt, wijzigt een JavaScript de waarde van de display eigenschap van none in block. Het antwoord op de betreffende vraag wordt daardoor zichtbaar. Nogmaals klikken op dezelfde vraag wijzigt de waarde weer in none en maakt het antwoord weer onzichtbaar. Hetzelfde gebeurt als je op een volgende vraag klikt, alleen wordt dan ook het bij die vraag behorende antwoord zichtbaar.

Het voorbeeld wordt ondersteund door Microsoft Internet Explorer 4.0 en hoger, Netscape Navigator 6.0 en hoger, Mozilla, Firefox en Opera 7.0 en hoger.

Legenda | Beschrijving | CSS eigenschappen | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2021 Hans de Jong
Laatste wijziging: 5 december 2004