Veranderen van lijsten

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
          Leuk als je dit artikel deelt:
Share

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *