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:
- volkswagen
- volvo
- mercedes
- 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
