|
Handleiding HTML  Legenda | Voorbeelden | CSS eigenschappen | Begin
display
|
De display eigenschap bepaalt of de browser een element moet weergegeven en zo ja, op welke wijze (bijvoorbeeld als element op blokniveau, als inline element, of als onderdeel van een lijst).
In HTML is voor elk element vastgelegd of en hoe de browser het moet weergeven. Voor deze elementen zal er in het algemeen weinig noodzaak zijn de display eigenschap te gebruiken. Veel van de waarden van de display eigenschap hebben daarom vooral betekenis in situaties, waarin de taal van het document (bijvoorbeeld XML) geen elementen kent met een vooraf gedefinieerde weergave.
In CSS 1 was de beginwaarde van de display eigenschap block. In CSS 2 is de beginwaarde gewijzigd in inline.
De waarden compact en marker maken geen deel meer uit van CSS 2.1. De waarde inline-block is toegevoegd in CSS 2.1.
Voorbeeld:
display: block
|
inline
|
De waarde bepaalt dat de browser het element moet weergeven als een inline element. Dat betekent dat het geen overgangen naar een nieuwe regel genereert en wordt weergegeven op dezelfde regel als de inline inhoud ervoor en erna. De afmetingen van de box van het element hangen af van de grootte van de inhoud. Wanneer het element tekst bevat, dan loopt deze zo nodig op de volgende regel door. Voorbeelden van HTML-elementen waarvoor de display eigenschap de waarde inline heeft, zijn B, TT, EM en SPAN.
|
block
|
De waarde bepaalt dat de browser het element moet weergeven als een element op blokniveau. Dat betekent dat het wordt voorafgegaan en gevolgd door een overgang naar een nieuwe regel. Voorbeelden van HTML-elementen waarvoor de display eigenschap de waarde block heeft, zijn P, Hx, UL en DIV.
|
list-item
|
De waarde bepaalt dat de browser het element moet weergeven als een element op blokniveau én een inline box ten behoeve van een markering. In HTML het geldt dit voor het LI element.
|
run-in
|
De waarde run-in bepaalt dat de browser het element moet invoegen aan het begin van het volgende element. Voorwaarde is dat het volgende element een element op blokniveau is, dat op hetzelfde niveau staat (dus geen voorouder of nakomeling is), niet zwevend is en niet absoluut gepositioneerd. Wordt niet aan deze voorwaarde voldaan, dan wordt het element weergegeven als element op blokniveau.
Je kunt de waarde bijvoorbeeld gebruiken voor een Hx element dat een P element voorafgaat. De browser plaatst de kop dan niet boven de paragraaf, maar aan het begin van de eerste regel van de tekst.
|
compact
|
De waarde compact bepaalt dat de browser de inhoud van het element in een inline box op één regel in de (bij westerse talen linker) margin van het volgende element moet plaatsen. Voorwaarde is dat het volgende element een element op blokniveau is, dat op hetzelfde niveau staat (dus geen voorouder of nakomeling is), niet zwevend is en niet absoluut gepositioneerd. Als aan deze voorwaarde niet wordt voldaan, of als de inhoud van het element niet op één regel binnen de margin van het volgende element past, dan wordt het element weergegeven als element op blokniveau.
De waarde kan bijvoorbeeld gebruikt worden voor het DT element in een definitielijst. Wanneer de term kort genoeg is om te passen binnen de linker margin van het DD element, dan wordt deze geplaatst naast de eerste regel van de beschrijving. Wanneer de term niet past, dan komt de beschrijving (zoals gebruikelijk) op de volgende regel te staan.
De waarde maakt geen deel uit van CSS 2.1.
|
marker
|
De waarde bepaalt dat gegenereerde inhoud (dat wil zeggen inhoud die je niet direct zelf in het document opneemt, maar er door de browser wordt bijgezet op basis van de waarde van de content eigenschap) voor of na de box van het element een markering is. De waarde moet alleen gebruikt worden voor elementen op blokniveau in combinatie met de pseudo-element selectors before of after. In andere situaties moet de browser de waarde interpreteren als inline.
De waarde maakt geen deel uit van CSS 2.1.
|
inline-block
|
De waarde bepaalt dat de browser het element moet weergeven in een enkele inline box (dus niet verdeeld over meerdere regels), op een vergelijkbare wijze als dat gebeurt bij een replaced element. De inhoud van het element moet echter worden weergegeven als bij een elementen op blokniveau. Voorbeelden van HTML-elementen waarvoor de display eigenschap de waarde inline-block heeft, zijn BUTTON, INPUT, OBJECT, SELECT en TEXTAREA.
De waarde is toegevoegd in CSS 2.1.
De waarde wordt niet meer ondersteund door Netscape Navigator 7.0 en hoger.
|
table
|
De waarde bepaalt dat de browser het element moet weergeven als een tabel op blokniveau, dat wil zeggen voorafgegaan en gevolgd door een overgang naar een nieuwe regel. In HTML het geldt dit voor het TABLE element.
|
inline-table
|
De waarde bepaalt dat de browser het element moet weergeven als een inline tabel.
|
table-row-group
|
De waarde bepaalt dat de browser het element moet weergeven als een rijgroep in een tabel. In HTML het geldt dit voor het TBODY element.
|
table-header-group
|
De waarde bepaalt dat de browser het element moet weergeven als een speciale koprijgroep in een tabel, die altijd geplaatst wordt voor andere rijen en rijgroepen, maar na een eventueel bijschrift boven de tabel. In HTML het geldt dit voor het THEAD element.
Wanneer de tabel meerdere elementen bevat, waarvoor de display eigenschap de waarde table-header-group heeft, dan wordt alleen de eerste als koprijgroep behandeld en alle overigen als gewone rijgroep.
|
table-footer-group
|
De waarde bepaalt dat de browser het element moet weergeven als een speciale voetrijgroep in een tabel, die altijd geplaatst wordt na andere rijen of rijgroepen, maar voor een eventueel bijschrift onder de tabel. In HTML het geldt dit voor het TFOOT element.
Wanneer de tabel meerdere elementen bevat, waarvoor de display eigenschap de waarde table-footer-group heeft, dan wordt alleen de eerste als voetrijgroep behandeld en alle overigen als gewone rijgroep.
|
table-row
|
De waarde bepaalt dat de browser het element moet weergeven als een rij in een tabel. In HTML het geldt dit voor het TR element.
|
table-column-group
|
De waarde bepaalt dat de browser het element moet weergeven als een kolomgroep in een tabel. In HTML het geldt dit voor het COLGROUP element.
|
table-column
|
De waarde bepaalt dat de browser het element moet weergeven als een kolom in een tabel. In HTML het geldt dit voor het COL element.
De waarde wordt niet meer ondersteund door Opera 7.0 en hoger.
|
table-cell
|
De waarde bepaalt dat de browser het element moet weergeven als een cel in een tabel. In HTML het geldt dit voor de elementen TD en TH.
|
table-caption
|
De waarde bepaalt dat de browser het element moet weergeven als een bijschrift voor een tabel. In HTML het geldt dit voor het CAPTION element.
Wanneer de tabel meerdere elementen bevat, waarvoor de display eigenschap de waarde table-caption heeft, dan worden deze allemaal als bijschrift weergegeven in de volgorde waarin ze in het document zijn opgenomen.
|
none
|
De waarde bepaalt dat de browser voor het element geen box moet genereren. Het element wordt daardoor niet weergegeven en ook eventuele effecten op de lay-out van de rest van het document vervallen. Ook voor eventuele nakomelingen van het element wordt geen box gegenereerd en dit kan niet ongedaan gemaakt worden door het opnemen van de display eigenschap voor een nakomeling met een andere waarde dan none. Wanneer het de bedoeling is het element slechts transparant te maken zonder dat de effecten op de lay-out vervallen, kan gebruik gemaakt worden van de visibility eigenschap met de waarde hidden.
Het gebruiken van de waarde none heeft weinig zin bij de statische weergave van een document in de browser. De waarde wordt daarom vooral toegepast als delen van de inhoud van een document (bijvoorbeeld afhankelijk van een keuze van de bezoeker) in bepaalde situaties wel en in andere situaties niet zichtbaar moeten zijn. In dat geval zal een script nodig zijn, om de stijl dynamisch te wijzigen van zichtbaar naar verborgen of omgekeerd.
|
inherit
|
De waarde van het parent element wordt aangehouden.
|
Bijzonderheden ondersteuning
- Microsoft Internet Explorer 4.0
- - De waarde inline-block lijkt ondersteund te worden voor inline elementen, wanneer er met de width eigenschap een breedte voor het element is vastgelegd. In werkelijkheid is dat echter een fout in de wijze waarop de width eigenschap is geïmplementeerd (de width eigenschap wordt aangehouden voor alle inline elementen, terwijl dat alleen mag voor replaced inline elementen).
- - Wanneer de waarde none gebruikt wordt voor een element op blokniveau, dan wordt toch één overgang naar een nieuwe regel ingevoegd.
- - Wanneer de waarde none gebruikt wordt voor een inline element, dan wordt zowel de spatie voor als de spatie na de inhoud weergegeven.
- - Wanneer de waarde none gebruikt wordt voor een TR element, dan wordt de ruimte tussen de randen boven en onder de verborgen rij niet samengevoegd. Het resultaat is een dubbel zo hoge tussenruimte.
- - Wanneer de waarde none is gebruikt voor een LI element binnen een OL element, wordt de nummering niet aangepast.
- Microsoft Internet Explorer 5.0
- - Een spatie die volgt op een element waarvoor de waarde inline is gebruikt, wordt niet weergegeven.
- - Wanneer de waarde inline is gebruikt voor de elementen OL en UL, dan wordt de lijst weergegeven met markering. De lijst als geheel springt echter niet in en de weergave van de onderdelen is hetzelfde als bij de waarde inside voor de list-style-position eigenschap. Een lijst met OL element wordt bovendien weergegeven als was de lijst opgebouwd met het UL element.
- - De waarde inline-block lijkt ondersteund te worden voor inline elementen, wanneer er met de width eigenschap een breedte voor het element is vastgelegd. In werkelijkheid is dat echter een fout in de wijze waarop de width eigenschap is geïmplementeerd (de width eigenschap wordt aangehouden voor alle inline elementen, terwijl dat alleen mag voor replaced inline elementen).
- - Wanneer de waarde none is gebruikt voor een inline element, dan wordt zowel de spatie voor als de spatie na de inhoud weergegeven.
- Microsoft Internet Explorer 5.5
- - Een spatie die volgt op een element waarvoor de waarde inline is gebruikt, wordt niet weergegeven.
- - Wanneer de waarde inline is gebruikt voor de elementen OL en UL, dan wordt de lijst weergegeven met markering. De lijst als geheel springt echter niet in en de weergave van de onderdelen is hetzelfde als bij de waarde inside voor de list-style-position eigenschap. Een lijst met OL element wordt bovendien weergegeven als was de lijst opgebouwd met het UL element.
- - De waarde inline-block wordt alleen ondersteund voor inline elementen.
- - Wanneer de waarde none is gebruikt voor een inline element, dan wordt zowel de spatie voor als de spatie na de inhoud weergegeven.
- Microsoft Internet Explorer 6.0 en hoger
- - Een spatie die volgt op een element waarvoor de waarde inline is gebruikt, wordt niet weergegeven.
- - Wanneer de waarde inline is gebruikt voor de elementen OL en UL, dan wordt de lijst weergegeven met markering. De lijst als geheel springt echter niet in en de weergave van de onderdelen is hetzelfde als bij de waarde inside voor de list-style-position eigenschap. Een lijst met OL element wordt bovendien weergegeven als was de lijst opgebouwd met het UL element.
- - Wanneer de waarde list-item gebruikt wordt voor een element op blokniveau, dan verliest dit element een eventuele margin die standaard boven en onder de box wordt weergegeven (dit geldt bijvoorbeeld voor de elementen P en Hx).
- - De waarde list-item wordt niet ondersteund voor de elementen INPUT, OPTION, TEXTAREA en BUTTON.
- - De waarde inline-block wordt alleen ondersteund voor inline elementen.
- - Wanneer de waarde none is gebruikt voor een inline element, dan wordt zowel de spatie voor als de spatie na de inhoud weergegeven.
- Netscape Navigator 4.x
- - De eigenschap heeft in de meeste gevallen geen effect, indien deze via een inline stijl aan een element gekoppeld wordt.
- - Wanneer de waarde inline gebruikt wordt voor een element op blokniveau, dan vervalt wel de overgang naar een nieuwe regel vóór het element, maar niet die na het element.
- - De waarde inline wordt niet ondersteund voor het TABLE element.
- - Wanneer de waarde inline is gebruikt voor een LI element, dan wordt de inhoud ervan direct achter het vorige onderdeel van de lijst geplaatst. De markering overlapt daarbij de inhoud van het vorige onderdeel van de lijst.
- - Wanneer de waarde inline is gebruikt voor een DT of DD element, dan wordt de inhoud ervan over de tekst van de regel ervoor geplaatst.
- - Wanneer de waarde block is gebruikt voor een inline element, dan wordt alleen vóór het element een overgang naar een nieuwe regel ingevoegd. Bovendien verliest het element de stijl die bij het element behoort (de tekst is bijvoorbeeld dus niet meer vet bij het B element en niet meer cursief bij het I element).
- - Bij de waarde list-item wordt het element niet alleen voorafgegaan en gevolgd door een overgang naar een nieuwe regel, maar is er bovendien altijd sprake van een blanco regel voor en na het element. Verder wordt voor het element automatisch een (extra) linker margin geplaatst. Een markering blijft echter achterwege.
- - De waarde list-item wordt niet ondersteund voor de elementen TABLE, SELECT, OPTION en TEXTAREA.
- - Wanneer de waarde list-item gebruikt wordt voor een OL element, dan wordt de lijst weergegeven als bij het UL element. Als voor het OL element ook de margin-left eigenschap is opgenomen met een andere waarde dan "0", dan wordt de bedoelde markering wel weergegeven.
- - Wanneer de waarde list-item gebruikt wordt voor een LI element, dan wordt tussen de markering en de tekst een overgang naar een nieuwe regel weergegeven. Als voor het LI element ook de margin-left eigenschap is opgenomen met een andere waarde dan "0", dan verdwijnt de markering.
- - Wanneer de waarde list-item gebruikt wordt voor een DD element, dan sprint de inhoud niet meer in en komt dus direct onder de inhoud van het DT element te staan.
- - Wanneer de waarde none is gebruikt voor een element op blokniveau, dan wordt voor en na het verborgen element toch een overgang naar een nieuwe regel ingevoegd.
- - Wanneer de waarde none is gebruikt voor een TR element, dan wordt de ruimte tussen de randen boven en onder de verborgen rij niet samengevoegd. Het resultaat is een dubbel zo hoge tussenruimte.
- - Wanneer de waarde none is gebruikt voor een LI element, dan vervalt wel de markering maar niet de inhoud. Wanneer de waarde none geldt voor een tweede of later LI element, dan wordt de inhoud ervan direct achter het vorige onderdeel van de lijst geplaatst.
- - De waarde none wordt niet ondersteund voor de elementen DT en DD.
- - Wanneer de waarde none is gebruikt voor een SELECT element, dan wordt wel de keuzelijst zelf weergegeven, maar met slechts één lege optie.
- - Wanneer de waarde none is gebruikt voor het eerste OPTION element van een keuzelijst, dan vervalt de keuzemogelijkheid. Wanneer de waarde none geldt voor een tweede of later OPTION element, dan wordt de inhoud direct achter de vorige keuzemogelijkheid geplaatst.
- Netscape Navigator 6.0
- - De waarde inline wordt niet ondersteund voor het TABLE element, maar heeft wel als resultaat dat de buitenrand van de tabel niet wordt weergegeven.
- - Wanneer de waarde list-item is gebruikt voor de elementen IMG, INPUT, TEXTAREA, of BUTTON dan wordt geen markering weergegeven.
- - Wanneer de waarde inline-block is gebruikt voor een element waarvoor ook de width eigenschap is opgenomen, dan wordt voor en na het element toch een overgang naar een nieuwe regel ingevoegd.
- - Wanneer de waarde none is gebruikt voor het eerste OPTION element van een keuzelijst, dan is deze keuzemogelijkheid in eerste instantie gewoon zichtbaar. Hij verdwijnt pas als na opening van de keuzelijst een andere keuzemogelijkheid is geselecteerd.
- - Wanneer de tabel meerdere elementen bevat, waarvoor de display eigenschap de waarde table-header-group heeft, dan worden ze allemaal als koprijgroep behandeld en weergegeven in de volgorde waarin ze in het document staan.
- - Wanneer de tabel meerdere elementen bevat, waarvoor de display eigenschap de waarde table-footer-group heeft, dan worden ze allemaal als voetrijgroep behandeld en weergegeven in de volgorde waarin ze in het document staan.
- - Wanneer de tabel meerdere elementen bevat, waarvoor de display eigenschap de waarde table-caption heeft, dan wordt alleen de eerste als bijschrift weergegeven en worden de overige genegeerd.
- Netscape Navigator 6.1/6.2
- - Wanneer de waarde inline is gebruikt voor het TABLE element, dan vallen de boven- en onderzijde van de buitenrand van de tabel samen met de boven- en onderkant van de box van de tekst op de regel.
- - Wanneer de waarde list-item is gebruikt voor de elementen IMG, INPUT, TEXTAREA, of BUTTON dan wordt geen markering weergegeven.
- - Wanneer de waarde inline-block is gebruikt voor een element waarvoor ook de width eigenschap is opgenomen, dan wordt voor en na het element toch een overgang naar een nieuwe regel ingevoegd.
- - Wanneer de waarde none is gebruikt voor het eerste OPTION element van een keuzelijst, dan is deze keuzemogelijkheid in eerste instantie gewoon zichtbaar. Hij verdwijnt pas als na opening van de keuzelijst een andere keuzemogelijkheid is geselecteerd.
- - De waarde inline-table wordt niet ondersteund voor HTML-elementen.
- - Wanneer de waarde inline-table is gebruikt voor een XML-element, dan vallen de boven- en onderzijde van de buitenrand van de tabel samen met de boven- en onderkant van de box van de tekst op de regel.
- - Wanneer de tabel meerdere elementen bevat, waarvoor de display eigenschap de waarde table-caption heeft, dan wordt alleen de eerste als bijschrift weergegeven en worden de overige genegeerd.
- Netscape Navigator 7.0 en hoger | Mozilla | Firefox
- - Wanneer de waarde inline is gebruikt voor het TABLE element, dan vallen de boven- en onderzijde van de buitenrand van de tabel samen met de boven- en onderkant van de box van de tekst op de regel.
- - Wanneer de waarde list-item is gebruikt voor de elementen IMG, INPUT, TEXTAREA, of BUTTON dan wordt geen markering weergegeven.
- - De waarde inline-table wordt niet ondersteund voor HTML-elementen.
- - Wanneer de waarde inline-table is gebruikt voor een XML-element, dan vallen de boven- en onderzijde van de buitenrand van de tabel samen met de boven- en onderkant van de box van de tekst op de regel.
- - Wanneer de tabel meerdere elementen bevat, waarvoor de display eigenschap de waarde table-caption heeft, dan wordt alleen de eerste als bijschrift weergegeven en worden de overige genegeerd.
- Opera 3.5/3.6
- - Wanneer de waarde inline gebruikt wordt voor een element op blokniveau, dan vervalt wel de overgang naar een nieuwe regel na het element, maar niet die vóór het element.
- - Wanneer de waarde inline is gebruikt voor het TABLE element, dan is het resultaat niet iets wat lijkt op een tabel: de inhoud van de achtereenvolgende TD of TH elementen wordt steeds op een nieuwe regel geplaatst en tabelranden blijven achterwege.
- - De waarde inline heeft bij een LI element slechts als resultaat, dat er geen markering voor het onderdeel van de lijst wordt weergegeven.
- - De waarde inline heeft bij een DD element slechts als resultaat, dat het onderdeel van de lijst dubbel zoveel inspringt als normaal.
- - De waarde block wordt niet ondersteund voor de elementen INPUT, SELECT, OPTION en TEXTAREA.
- - De waarde none wordt niet ondersteund voor het TR element.
- - Wanneer de waarde none is gebruikt voor de elementen TD of TH, wordt alleen de inhoud van de tabelcel verborgen en niet de rand.
- - Wanneer de waarde none is gebruikt voor een LI element binnen een OL element, wordt de nummering niet aangepast.
- - De waarde none wordt niet ondersteund voor het OPTION element.
- Opera 4.0
- - De waarde block wordt niet ondersteund voor de elementen INPUT, SELECT, OPTION en TEXTAREA.
- - Wanneer de waarde inline is gebruikt voor het TABLE element, dan is het enige effect dat geen tabelranden worden weergegeven.
- - Bij de waarde list-item wordt voor het element automatisch een (extra) linker margin geplaatst en de markering is daardoor altijd zichtbaar. Wanneer met de margin-left eigenschap een margin voor het element is gedefinieerd, dan is het uiteindelijke resultaat de som van beide margins.
- - De waarde list-item wordt niet ondersteund voor de elementen IMG, INPUT, SELECT, OPTION en TEXTAREA.
- - Wanneer de waarde list-item is gebruikt voor het TABLE element, dan wordt voor de inhoud van de eerste cel een markering geplaatst en blijven alle randen van de tabel achterwege.
- - Wanneer de waarde none is gebruikt voor een LI element binnen een OL element, wordt de nummering niet aangepast.
- - De waarde none wordt niet ondersteund voor het OPTION element.
- Opera 5.0 t/m 6.0
- - De waarde block wordt niet ondersteund voor de elementen INPUT, SELECT, OPTION en TEXTAREA.
- - Wanneer de waarde inline is gebruikt voor het TABLE element, dan is het enige effect dat geen tabelranden worden weergegeven.
- - Bij de waarde list-item wordt voor het element automatisch een (extra) linker margin geplaatst en de markering is daardoor altijd zichtbaar. Wanneer met de margin-left eigenschap een margin voor het element is gedefinieerd, dan is het uiteindelijke resultaat de som van beide margins.
- - De waarde list-item wordt niet ondersteund voor de elementen IMG, INPUT, SELECT, OPTION en TEXTAREA.
- - Wanneer de waarde list-item is gebruikt voor het TABLE element, dan wordt voor de inhoud van de eerste cel een markering geplaatst en blijven alle randen van de tabel achterwege.
- - De waarde none wordt niet ondersteund voor het OPTION element.
- Opera 7.0 en hoger
- - Wanneer de waarde inline is gebruikt voor het TABLE element, dan is het enige effect dat geen tabelranden worden weergegeven.
- - De waarde list-item wordt niet ondersteund voor het OPTION element.
- - Wanneer de waarde list-item is gebruikt voor de elementen IMG, INPUT, of SELECT, TEXTAREA dan wordt geen markering weergegeven.
- - Wanneer de waarde list-item is gebruikt voor het TABLE element, dan worden de randen om de cellen niet weergegeven.
- - Wanneer de waarde list-item is gebruikt voor het BUTTON element, dan wordt de inhoud ervan in horizontale richting gecentreerd op de pagina weergegeven.
- - Bij de waarde inline-block is er een ernstig probleem in de weergave van een element op blokniveau, dat standaard een margin boven en onder de box heeft (bijvoorbeeld de elementen P en Hx). Deze margin wordt ook bij de weergave als inline blokelement boven en onder de tekst aangehouden. De tekst in het element komt daardoor nu ruim boven de overige tekst op dezelfde regel te staan. De tekst correspondeert bovendien niet met een eventueel voor het element gedefinieerde achtergrond of rand, omdat bij het bepalen van de plaats daarvan de margin weer wel buiten beschouwing blijft. Bij het BLOCKQUOTE element wordt ook de margin links van de box van het element bij de weergave als inline blokelement vóór de tekst aangehouden. Pas als voor een element op blokniveau tevens de margin eigenschap met de waarde "0" is opgenomen, is de weergave zoals bedoeld.
- - Wanneer de tabel meerdere elementen bevat, waarvoor de display eigenschap de waarde table-header-group heeft, dan worden ze allemaal als koprijgroep behandeld en weergegeven in de volgorde waarin ze in het document staan.
- - Wanneer de tabel meerdere elementen bevat, waarvoor de display eigenschap de waarde table-footer-group heeft, dan worden ze allemaal als voetrijgroep behandeld en weergegeven in de volgorde waarin ze in het document staan.
Legenda | Voorbeelden | CSS eigenschappen | Begin
Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 19 maart 2006
|
