CSS beschrijving eigenschap list-style-image


Handleiding HTML Legenda | Voorbeelden | Lijsten | CSS eigenschappen | Begin


list-style-image


CSS 1
IE 4.0
NN 6.0
MOZ 1.0
FF 1.0
OP 3.5
De list-style-image eigenschap bepaalt welke afbeelding moet worden gebruikt als markering bij een onderdeel van een lijst.

Waarden: <uri> | none | inherit
Beginwaarde: none
Heeft betrekking op: elementen die de eigenschap display met de waarde list-item hebben
Wordt geërfd: ja
Mediagroep(en): visual

Wanneer de afbeelding beschikbaar is, komt deze in de plaats van de markering welke is opgegeven via de list-style-type eigenschap.

Omdat er geen afmetingen opgegeven kunnen worden voor de afbeelding, is het verstandig er op te letten dat afbeelding niet te groot is in verhouding tot de tekst.

Wanneer de eigenschap gebruikt wordt voor elementen waarvoor de display eigenschap met de waarde list-item geldt (anders dan UL, OL en LI), dan kan de markering buiten beeld komen staan. Om dit te voorkomen, is het in dat geval verstandig de marge van het document te vergroten.

Voorbeelden:

list-style-image: url(blauwblok.gif)

list-style-image: url(afbeeldingen/blauwblok.gif)

list-style-image: url(http://www.domein.nl/blauwblok.gif)

<uri>
CSS: 1 IE: 4.0 NN: 6.0 MOZ: 1.0 FF: 1.0 OP: 3.5

De waarde uri wordt als volgt opgebouwd:

url(URI)

De URI (Uniform Resource Identifier) heeft de volgende opbouw:

http://host/path

Host specificeert het adres van de server, waarop zich de gevraagde afbeelding bevindt. Het kan een IP-adres zijn, maar meestal is het de naam van de machine. Een machinenaam (ook wel domeinnaam) bestaat uit meerdere delen gescheiden door een punt, begint vaak met "www" en eindigt met een landcode (bijvoorbeeld "nl", "be", "uk") of de vooral in de Verenigde Staten gebruikte code voor de sector (bijvoorbeeld "com" voor commerciële instellingen en "org" voor non-profit organisaties).
Path geeft aan hoe de gevraagde afbeelding op de server gevonden kan worden: in welke directory en onder welke bestandsnaam.

Het is niet altijd nodig een complete URI op te nemen. Als de gevraagde afbeelding zich op de lokale server bevindt, dan volstaat de volgende URI:

path

Wanneer de afbeelding gedefinieerd wordt in een extern stijlblad, dan is de URI relatief ten opzichte van het stijlblad.

De URI kan optioneel ingesloten worden tussen enkele of dubbele aanhalingstekens:

url('URI')
url("URI")

Als de afbeelding gedefinieerd wordt door middel van een inline stijl, dan moeten voor de URI andere aanhalingstekens gebruikt worden, dan voor de waarde van het STYLE attribuut:

STYLE="list-style-image: url('URI')"

Aanhalingstekens moeten gebruikt worden als de URI een spatie bevat.
none
CSS: 1 IE: 4.0 NN: 6.0 MOZ: 1.0 FF: 1.0 OP: (3.5)

Er wordt geen afbeelding als markering weergegeven.

De waarde wordt wel ondersteund door Opera 3.5/3.6 en Opera 7.0 en hoger, maar niet door Opera 4.0 t/m 6.0.
inherit
CSS: 2 IE: - NN: 6.0 MOZ: 1.0 FF: 1.0 OP: 3.5

De waarde van het parent element wordt aangehouden.


Bijzonderheden ondersteuning

Microsoft Internet Explorer 4.0/5.0/5.5
- De eigenschap wordt niet ondersteund voor elementen waarvoor de eigenschap display met de waarde list-item is gedefinieerd.
Microsoft Internet Explorer 6.0
- De eigenschap wordt wel ondersteund voor elementen waarvoor de display eigenschap met de waarde list-item is gedefinieerd, met uitzondering van DL.
Netscape Navigator 4.x
- De eigenschap wordt niet ondersteund. Wanneer voor elementen de display eigenschap met de waarde list-item is gedefinieerd, moet er echter rekening mee gehouden worden dat de tekst zonder duidelijke logica verplaatst.
Netscape Navigator 6.0 t/m 7.0  |  Mozilla 1.0 t/m 1.2
- Er wordt geen markering weergegeven als de afbeelding niet gevonden wordt, ook niet als tevens de list-style-type eigenschap is opgenomen.



Legenda | Voorbeelden | Lijsten | CSS eigenschappen | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2021 Hans de Jong
Laatste wijziging: 23 juni 2007