Zo simpel als iets


Maar je moet er maar op komen natuurlijk. Ik heb dit al eens moeten realizeren voor een klant, maar had er toen niet zoveel aandacht aan geschonken.
Eens je het gezien hebt zal je denken “ahjaa, waarom ben ik daar zelf niet op gekomen“.

HTML

Neem nu een gewone <ul> en <ol> lijst:

<ul>
<li>CSS Design</li>
<li>PSD to XHTML</li>
<li>Photoshop slicer</li>
<li>XHTML Strict 1.0</li>
<li>Gigadesign</li>
</ul>

<ol>
<li>CSS Design</li>
<li>PSD to XHTML</li>
<li>Photoshop slicer</li>
<li>XHTML Strict 1.0</li>
<li>Gigadesign</li>
</ol>

Zonder al te veel styling ziet dit er gewoon zo uit, let op dat de kleuren van de bullets of nummers altijd de kleur hebben van de kleur die je bepaalde voor je tekst.

Om nu de bullets of de nummers in een andere kleur te hebben kan je natuurlijk afbeelingen gebruiken, maar dit is natuurlijk véél lastiger als het om de nummers gaat, daarom deze eenvoudige tip. Het vergt wel een kleine aanpassing aan de HTML

HTML aanpassing

<ul>
<li><span>CSS Design</span></li>
<li><span>PSD to XHTML</span></li>
<li><span>Photoshop slicer</span></li>
<li><span>XHTML Strict 1.0</span></li>
<li><span>Gigadesign</span></li>
</ul>

<ol>
<li><span>CSS Design</span></li>
<li><span>PSD to XHTML</span></li>
<li><span>Photoshop slicer</span></li>
<li><span>XHTML Strict 1.0</span></li>
<li><span>Gigadesign</span></li>
</ol>

Voel je hem al komen?

Nu kunnen we natuurlijk de <span> een andere kleur geven als de <li> en klaar is Jan Kees.

Kijk in de broncode als je interesse hebt voor de CSS. Om onnodig zoeken te vermijden heb ik er comments bijgezet!