Bullets van lijsten veranderen

In HTML heb je twee soorten lijsten: Geordende lijsten en ongeordende lijsten.
Een geordende lijst (tag: <ol> ... </ol>) begint met een cijfer of letter. Daarvoor zijn binnen HTML diverse stijlen beschikbaar: gewone cijfers, romeinse cijfers, hoofdletters, kleine letters.
En ongeordende lijst (tag: <ul> ... </ul>) begint met een bullet: een dikke stip (disc), rondje (circle), vierkantje (square).

Deze bladzijde gaat over ongeordende lijsten, en over de bullets in het bijzonder. In HTML hebben die een vast uiterlijk. De kleur is gelijk aan de tekst achter de bullet, de grootte wordt bepaald door de tekst.
Alle lijsten springen in. Dat is een vast gegeven in HTML.
Het is in HTML niet mogelijk om het uiterlijk van de bullets en de verdere opmaak van lijsten aan te passen. Met CSS kan dat wel. Hier staat beschreven hoe je dit aanpakt.

• Er worden twee items besproken:
  1. Aanpassen van bullets bij een ongeordende lijst
  2. Andere opmaak kenmerken aanpassen

Aanpassen van bullets bij een ongeordende lijst
Hieronder zie de de drie standaard-bullets in de standaard-opmaakt die HTML 4 beschikbaar stelt:

• disc (default); de code is:<li type="disc"> .... </li>
• circle; de code is:<li type="circle"> .... </li>
• square; de code is:<li type="square"> .... </li>

Het attribuut type komt niet meer voor in de HTML5-standaard voor een ongeordende lijst. Voor een geordende lijst is dat er nog wel! Het gaat daarbij om het soort lijst: Letters of (Romeinse) cijfers alsmede om het begin van de lijst (tellen vanaf A of B of C, of 1 of 2 of 3, enz.).
Opmerking: De <li> ... </li>-tags in het voorbeeld zijn natuurlijk omsloten door <ul> ... </ul>.

We gaan nu eerst de bullets helemaal weghalen. Dat doen we met een class in een style-block. Zie onderaan deze bladzijde. De <li> ... </li>-tags zijn omsloten door
<ul class="nobullets"> ... </ul>.

• disc (default); de code is:<li> .... </li>
• circle; de code is:<li> .... </li>
• square; de code is:<li> .... </li>

Je kunt dit ook bereiken door class="nobullets" bij elke <li>-tag apart op te geven.

Je kunt ook kleine figuurtjes gebruiken als bullet. Op deze manier kun je elke bullet maken die je wilt. Bij voorkeur neem je daarvoor .GIF-plaatjes, met een transparante achtergrond.
Hieronder zie je een lijst die is opgemaakt met smileys. Om de standaard bullets te vervangen door de plaatjes worden de classes smiley en tongue gebruikt, zie onderaan.

• List-item met een smiley als bullet, 10px tussenruimte.
  class="smiley"
• Natuurlijk kun je er ook een ander plaatje in zetten, met grotere tussenruimte.
  class="tongue"

Merk op dat je zelf moet zorgen voor een tussenruimte tussen het plaatje en de tekst. Dat doe je met het CSS-attribuut padding. Als het plaatje gedeeltelijk wordt afgekapt, kun je dat verhelpen door padding te vergroten.
ls je de inspringing van de lijst wilt veranderen moet je margin gebruiken, zie verder op deze bladzijde.

Op internet zijn nog meer technieken te vinden om bullets te veranderen, bijvoorbeeld door het eerste karakter op te laten treden als bullet en dat eerste karakter apart op te maken. Daarbij wordt de pseudo-class first-letter uit CSS gebruikt. De toepassing vind ik nodeloos ingewikkeld. Dit blijft dus verder onbesproken. Want waarom moeilijk doen als het ook gemakkelijker kan?

Andere opmaak kenmerken aanpassen met CSS
Hieronder zie je twee dezelfde lijsten, alleen de plaats van de is anders. Er is gebruik gemaakt van het CSS-attribuut list-style-position, dat achtereenvolgens de waarde outside (default) en inside heeft. Hiermee bepaal je of de bullets onderdeel zijn van de lijst of er voor staan.

De eerste lijst heeft de class buiten, de tweede heeft de class binnen.
Voor de onderste twee list-tems zijn de classes nobullets en smiley gebruikt.

• Dit is een disc.
  Dit is de tweede regel van een list-item met een disc.
• Dit is een circle.
  Dit is de tweede regel van een list-item met een circle.
• Dit is een square.
  Dit is de tweede regel van een list-item met een square.
• Dit is zonder bullet.
  Dit is de tweede regel van een list-item zonder bullet.
• Dit is met een plaatje.
  Dit is de tweede regel van een list-item met een plaatje.

• Dit is een disc.
  Dit is de tweede regel van een list-item met een disc.
• Dit is een circle.
  Dit is de tweede regel van een list-item met een circle.
• Dit is een square.
  Dit is de tweede regel van een list-item met een square.
• Dit is zonder bullet.
  Dit is de tweede regel van een list-item zonder bullet.
• Dit is met een plaatje.
  Dit is de tweede regel van een list-item met een plaatje.

Zoals je ziet kun je met list-style-position:inside een rafelrandje krijgen, zeker als je de bullet weg laat. In dit specifieke geval helpt padding niet!

In beide gevallen hier boven zijn de lijsten nog steeds ingesprongen. Als je de bullets helemaal tegen de linkermarge van de bladzijde wilt hebben moet je het CSS-attribuut margin inzetten.
De afstand tussen de bullet en de tekst verander je met padding.

• Dit is een disc.
  Dit is de tweede regel van een list-item met een disc.
• Dit is een circle.
  Dit is de tweede regel van een list-item met een circle.
• Dit is een square.
  Dit is de tweede regel van een list-item met een square.
• Dit is zonder bullet.
  Dit is de tweede regel van een list-item zonder bullet.
• Dit is met een plaatje.
  Dit is de tweede regel van een list-item met een plaatje.

De lijst hierboven heeft buitenmarges rondom (margin) van 10 pixels en linker- en rechter binnenmarge (padding) van 5 pixels. De binnenmarges boven en onder zijn 0. Op deze manier maak je de witruimte tussen de lijst en de tekst. Een en ander is vastgelegd in de class marges in het style-block.

Om een ander "goed" te krijgen moeten de margin en de padding aan de linkerkant "kloppend" zijn, anders vallen de bullets buiten beeld. Dat is een kwestie van uitproberen.
De margin en de padding aan de boven- en onderkant kun je natuurlijk naar je eigen smaak aanpassen.

Code van het Style-block op deze bladzijde.
<style>
.nobullets {list-style:none}     /* Algemeen beschikbaar, wordt door ul EN li gebruikt */
li.smiley {list-style-image:url(smile.gif); padding:0 0 0 10px}
li.tongue {list-style-image:url(tongue.gif); padding:0 0 0 40px}
ul.buiten {list-style-position:outside}
ul.binnen {list-style-position:inside}
ul.marges {margin:10px; padding:0 5px}
</style>

Tenslotte ...
In de code hierboven zijn zowel list-style-type als list-style gebruikt. Beide zijn geldig en leiden tot hetzelfde. Met de korte vorm list-style kun je een aantal regels van de 'uitgebreide' vorm list-style-type samen voegen, bijvoorbeeld list-style:url(smile.gif) outside;.

Opmerking:
 
De nummering van geordende lijsten kan ook worden aangepast met CSS. Je hebt dan wat meer mogelijkheden dan HTML (sec) biedt, bijvoorbeeld Hebreeuwse of Russische cijfers. Voor ons westerlingen zijn de mogelijkheden van HTML op dit punt echter ruim voldoende.
Zie het item "Nummering van lijsten veranderen".