Website Tips
Home html-css • list-style-type
Google Translation
Metaaldetector Tips Banner

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

List-style-type gebruiken met Speciale Tekens

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