Opsommingen

Een lijstje maak je met <ul> (met bolletjes) of <ol> (met nummers). Elk punt zet je tussen <li> en </li>. Handig voor je hobby's, je lievelingsmuziek of je top 3.

Bolletjes en nummers

<b>Mijn hobby's</b>
<ul>
<li>Tekenen</li>
<li>Zwemmen</li>
<li>Chatten</li>
</ul>
<b>Zo maak je een tosti</b>
<ol>
<li>Kaas tussen twee boterhammen</li>
<li>In het tosti-ijzer</li>
<li>Drie minuten wachten</li>
</ol>

Een ander teken

Met list-style-type kies je het teken voor elk punt.

• Bij <ul>: disc (bolletje), circle (rondje), square (blokje) of none (niets).
• Bij <ol>: decimal (1, 2, 3), lower-alpha (a, b, c), upper-alpha (A, B, C), lower-roman (i, ii, iii) of upper-roman (I, II, III).
• De oude manier werkt ook: <ul type="square"> of <ol type="a">.

<ul style="list-style-type: square">
<li>Blokjes</li>
<li>in plaats van bolletjes</li>
</ul>
<ol style="list-style-type: upper-roman">
<li>Romeinse cijfers</li>
<li>zoals in een geschiedenisboek</li>
</ol>
<ol type="a">
<li>Letters</li>
<li>met het oude type</li>
</ol>

Tellen vanaf een ander getal

Met start begint een lijst bij een ander nummer, bijvoorbeeld als hij verdergaat na een stukje tekst. Met reversed telt hij af, handig voor een top 3 met de winnaar onderaan.

<b>Mijn top 3 liedjes</b>
<ol reversed>
<li>Het derde</li>
<li>Het tweede</li>
<li>Mijn nummer één!</li>
</ol>
<b>En verder</b>
<ol start="4">
<li>Telt door vanaf 4</li>
</ol>

Tekens uit de galerij

Met list-style-image wordt elk bolletje een plaatje. In de galerij staan tekens van toen (een hartje, een ster, een bloem, een pijl, een vinkje en een glimlach) en strakke tekens in negen kleuren (een cirkel, een vinkje, een pijl en een ruit). Bij elk teken staat "Kopieer code": die geeft je meteen een lijstje met twee punten.

<ul style="list-style-image: url(/assets/profielhulp/tekens/hartje.png)">
<li>Met hartjes van toen</li>
<li>zoals in 2003</li>
</ul>
<ul style="list-style-image: url(/assets/profielhulp/strak/tekens/vinkje-groen.svg)">
<li>Met strakke vinkjes</li>
<li>in het groen</li>
</ul>

Je eigen plaatjes uit Mijn bestanden kunnen ook: list-style-image: url(ster.gif). Kies een klein plaatje, van ongeveer de hoogte van een letter.

Kleur en inspringen

De kleur van de bolletjes of nummers geef je met ::marker in een <style>. Met padding-left bepaal je hoe ver de lijst inspringt. Wil je helemaal geen tekens, gebruik dan list-style-type: none met padding-left: 0.

<style>
.roze li::marker { color: #e0338a; font-weight: bold; }
.kaal { list-style-type: none; padding-left: 0; }
</style>
<ol class="roze">
<li>Roze nummers</li>
<li>bij gewone tekst</li>
</ol>
<ul class="kaal">
<li>Geen tekens</li>
<li>en niet ingesprongen</li>
</ul>