Gekleurde HTML-bullets in lijsten

In ongeordende lijsten <ul> worden bullets getoond voor de list items. In een eerder artikel hebben we gezien dat je je eigen plaatjes als bullets in lijsten kunt gebruiken. Maar je kunt ook veel doen met de gewone HTML-bullets. De standaard bullets zien er niet erg fraai uit, maar met behulp van CSS kunnen we deze bullets een stuk mooier maken.

Laten we eerst eens kijken naar een standaard ongeordende lijst met de standaard bullets voor de list items:

• appels
• peren
• bananen

De bullets zijn gewone stippen in dezelfde kleur als de tekst van je lijst.

We kunnen de bullets laten verschillen van de tekstkleur door van de list items links te maken:

• appels
• peren
• bananen

Ook kunnen we heel makkelijk een ander symbool gebruiken om voor de list items te plaatsen. In plaats van de stip kunnen we bijvoorbeeld voor een vierkantje kiezen:

• appels
• peren
• bananen

Hiervoor plaats je de volgende CSS-code in het Head-gedeelte van je pagina:

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

De HTML code voor de lijst zelf wordt gewoon:

<ul>
 <li>Line1</li>
 <li>Line2</li>
 <li>Line3</li>
</ul>

Nu een combinatie van bovenstaande voorbeelden. We maken nu een ongeordende lijst met vierkantjes voor de list items en met links in de list items met een andere kleur dan de list items en de normale linkkleur op de pagina. Ook hebben we nu een andere kleur gekozen voor de tekst van de list items dan de normale tekstkleur.

• appels
• peren
• lekkere bananen

Je ziet dat er nu lichtblauwe vierkantjes voor de list items staan. Dit is weer dezelfde kleur als de tekst in list items. Alleen verschilt deze tekstkleur nu van de normale tekstkleur op de pagina. Ook de linkkleur is veranderd. De CSS-code die we hiervoor gebruikten:

<style type="text/css">
<!--
li { color: #0099FF;
 list-style-type: square;
}
li a { text-decoration: none;
 color: #FF6600;}
-->
</style>

Door gebruik te maken van CSS classes kun je meerdere CSS lijsten op één pagina verschillend laten weergeven. Zo wordt het mogelijk om bijvoorbeeld een compleet menu te maken voor je site met behulp van een CSS lijst. Je zet de hele lijst gewoon in een <div> die je de CSS class laat gebruiken. Bijvoorbeeld:

De CSS-code die we voor dit menu gebruiken is:

<style type="text/css">
<!--
.menu { border: 1px solid black; background-color: #FFCC00;
 padding-top: 5px;
 padding-right: 20px;
 padding-bottom: 5px;
 padding-left: 0px;
 width: 100px }
.menu li { color: #FF3300}
.menu li a { color: #FF6633;
 list-style-type: square;
 font-family: Verdana, sans-serif;
 font-size: 12px}
.menu li a:hover { color: #FF6633;
 background-color: #FF9966;;
 text-decoration: none}
-->
</style>

De HTML-code blijft simpel. Je hoeft alleen de lijst met het menu tussen <div> en </div>-tags te plaatsen en deze de menu class te geven.

<div class="menu">
 <ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
 </ul>
</div>

Je ziet dat er veel mogelijk is met de gewone HTML-lijsten door gebruik te maken van Cascading Style Sheets. Veel informatie op websites is heel geschikt om in lijstvorm te publiceren, met name menu's. Toch doen veel webmasters dit niet, omdat ze niet op de hoogte zijn van de mogelijkheden van lijsten in combinatie met CSS. Met CSS laat je je lijsten er beter uitzien, terwijl je pagina's een logische opbouw blijven houden.

MijnHomepage Tip