Veranderen van lijsten


In dit artikel gaan we met behulp van CSS laten zien hoe je lijsten kunt aanpassen. In plaats van
een rondje een ander vormpje in een opsomming, of een andere manier van tellen, bijvoorbeeld met
romeinse cijfers.

We nemen de volgende lijst als uitgangspunt, eerst de html-code:
<ul>
<li>volkswagen</li>
<li>volvo</li>
<li>mercedes</li>
<li>jaguar</li>
</ul>
Dit is een ongeordende lijst. Wil je een lijst op volgorde, dus van 1 naar 4, dan gebruik je <ol>.
Wanneer je deze lijst zo maakt, dan krijg je het volgende resultaat:

  • volkswagen
  • volvo
  • mercedes
  • jaguar

Wanneer je hier nu een andere vorm voor in de plaats wilt hebben dan kun je CSS gebruiken. We zetten dan het volgende
in ons stijlblad:

li {
list-style-type: square;
}

De lijst gaat er dan ineens als volgt uit zien:

  • volkswagen
  • volvo
  • mercedes
  • jaguar

We kunnen de volgende manieren gebruiken voor een ongeordende lijst:

  • square
  • disc
  • circle
  • none

Nu gaan we hetzelfde doen, maar dan met de geordende lijst.
Normaal ziet deze er zo uit:

<ol>
<li>volkswagen</li>
<li>volvo</li>
<li>mercedes</li>
<li>jaguar</li>
</ol>

Met het volgende resultaat:

  1. volkswagen
  2. volvo
  3. mercedes
  4. jaguar

De volgende opties zijn in alle belangrijke browsers mogelijk:

  • decimal
  • tweede
  • decimal-leading-zero
  • tweede
  • lower-roman
  • tweede
  • upper-roman
  • tweede
  • lower-alpha
  • tweede
  • upper-alpha
  • tweede
  • lower-latin
  • tweede
  • upper-latin
  • tweede

Daarnaast zijn er nog mogelijk; lower-greek (Safari, Mozilla en Netscape 6+),
hebrew (Safari, Mozilla en Netscape 6+), hiragana, katakana, hiragana-iroha en
katakana-iroha (japanse tekens voor Mozilla en Netscape 6+).

Daarnaast is er nog een belangrijke mogelijkheid, en dat is het zelf toevoegen
van een plaatje. Dit gebeurd met de stijl ‘list-style-image’.
De code is dan als volgt:

li {
list-style-image: url(bullet.jpg);
}

Met als resultaat:

  • volkswagen
  • volvo
  • mercedes
  • jaguar

html en css voor beginnersWil jij ook leren hoe je je eigen website kunt maken?

Wil jij tips en tricks om zo goed mogelijk zelf met alles aan de slag te kunnen?
Meld je hieronder aan voor de HTML-site nieuwsbrief en krijg elke week handige tips om een website te bouwen.
En je ontvangt meteen mijn GRATIS ebook HTML & CSS voor Beginners.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.