CSS - Opsommingen (UL / OL)


Lijstjes voor opsommingen kunnen worden geplaatst op twee manieren, je hebt de unordered list (UL) en de ordered list (OL). Als eerst de unordered list, hiermee maak je een opsomming waarbij elk item is voorzien van een punt, cirkel of een afbeelding en er zit dus eigenlijk geen vaste volgorde in. Met een ordered list maak je een opsomming met nummering. Meer over de HTML codes van de opsommingen lees je in de tutorial hier.

Unordered list

Als eerst dan de unordered list, de HTML code is als volgt.

<ul>
        <li>test</li>
        <li>test</li>
</ul>


List-style is de optie voor de CSS waarmee je opsommingen kunt voorzien van een punt, cirkel of een afbeelding. Je kunt diverse opsommingstekens gebruiken, waardes voor de List-style zijn disc, circle en square. In de CSS geef je stel je de waardes als volgt in.

<style type="text/css">
ul li {
        list-style-type: square;
}
</style>


Hieronder werkende voorbeelden van disc, circle en square.

  • disc
  • disc
  • circle
  • circle
  • square
  • square

Het is ook mogelijk de eigenschappen disc, circle en square van een eigen kleur te voorzien. Normaal gesproken zijn deze bullets zwart maar door in de CSS de regel "color:#FF0000;" toe te voegen kun je een eigen kleur aan de bullet meegeven. Echter, de tekst binnen de LI krijgt dan ook deze kleur. Als alternatief kun je bijvoorbeeld <P> tags plaatsen om de tekst en vervolgens middels CSS de P een andere kleur meegeven.

Een andere optie om de opsomming op te maken is om een eigen afbeelding als bullet te gebruiken in plaats van de netgenoemde opties hierboven wat vaak net even beter kan staan op de pagina. Dit bereik je door in de CSS de onderstaande code te gebruiken.

ul {
        list-style-image: url('afbeelding.gif');
}


Dit is handig om toe te passen bij bijvoorbeeld een menu dat je opbouwt middels een UL.

Positie

Als laatste kun je ook de positie bepalen van de bullets van de lijst. De code hiervoor is: ul { list-style-position: outside } waarbij je outside kunt vervangen voor inside.

  • outside
  • outside
  • inside
  • inside

Als CSS code totaal ziet het er dan als volgt uit bij bijvoorbeeld een unordererd list.

ul {
        list-style-type:square;
        list-style-position:outside;
}