Css list-style-type

Als je in CSS de ul-tag voorziet van een van onderstaande voorbeelden komt 't met de li allemaal goed.
Om een voorbeeldje te geven:

HTML:

<ul class="vierkant">
<li>Tekst hier</li>
<li>Tekst hier</li>
</ul>

CSS:

.vierkant{
list-style-type: square;
}

Verschillende list-style-type smaken

Dit is een zin met list-style-type: none
Dit is een zin met list-style-type: none
Dit is een zin met list-style-type: none

Dit is een zin met list-style-type: square
Dit is een zin met list-style-type: square
Dit is een zin met list-style-type: square

Dit is een zin met list-style-type: disc
Dit is een zin met list-style-type: disc
Dit is een zin met list-style-type: disc

Dit is een zin met list-style-type: circle
Dit is een zin met list-style-type: circle
Dit is een zin met list-style-type: circle

Dit is een zin met list-style-type: decimal
Dit is een zin met list-style-type: decimal
Dit is een zin met list-style-type: decimal

Dit is een zin met list-style-type: decimal-leading-zero
Dit is een zin met list-style-type: decimal-leading-zero
Dit is een zin met list-style-type: decimal-leading-zero

Dit is een zin met list-style-type: lower-alpha
Dit is een zin met list-style-type: lower-alpha
Dit is een zin met list-style-type: lower-alpha

Dit is een zin met list-style-type: upper-alpha
Dit is een zin met list-style-type: upper-alpha
Dit is een zin met list-style-type: upper-alpha

Dit is een zin met list-style-type: lower-greek
Dit is een zin met list-style-type: lower-greek
Dit is een zin met list-style-type: lower-greek

Dit is een zin met list-style-type: lower-latin
Dit is een zin met list-style-type: lower-latin
Dit is een zin met list-style-type: lower-latin

Dit is een zin met list-style-type: upper-latin
Dit is een zin met list-style-type: upper-latin
Dit is een zin met list-style-type: upper-latin

Dit is een zin met list-style-type: lower-roman
Dit is een zin met list-style-type: lower-roman
Dit is een zin met list-style-type: lower-roman

Dit is een zin met list-style-type: upper-roman
Dit is een zin met list-style-type: upper-roman
Dit is een zin met list-style-type: upper-roman

Dit is een zin met list-style-type: armenian
Dit is een zin met list-style-type: armenian
Dit is een zin met list-style-type: armenian

Dit is een zin met list-style-type: georgian
Dit is een zin met list-style-type: georgian
Dit is een zin met list-style-type: georgian

Dit is een zin met list-style-type: hebrew
Dit is een zin met list-style-type: hebrew
Dit is een zin met list-style-type: hebrew

List-style-type gebruiken met Speciale Tekens.

Onderstaande code maakt een grijze tekst met een oranje schoppen-tekentje ervoor en dat op een zwarte achtergrond. li:before kan ook een li:after zijn (al heb je daar waarschijnlijk niets aan). De \0020 achter content: is gewoon een extra ruimte/spatie tussen de tekst en het tekentje. De \2660 is de Hex-code voor een schoppen-tekentje. De code werkt hier in IE8 en in Firefox 3.6.8

HTML

<ul class="special">
<li>Tekst hier</li>
<li>Tekst hier</li>
</ul>

CSS

body{background:#000;"}
.special{
list-style: none;
color: gray;
}
.special li:before{
content: "\2660 \0020";
color: #EF3E1B;
}

Bekijk de lijst met Speciale Tekens.

List-style-image werkt met een plaatje ervoor.

Het voordeel hiervan is dat je helemaal zeker weet dat ie in alle browsers goed weergegeven wordt.

Kik hier voor list-style-image plaatjes en uitleg.

Reageer (0) 19.02.2010. 01:16

Categorieën (102)

Tools

Laatste Reacties