Hier bist Du: Home « Tipps und Tricks « Farbige Listensymbole

Tipps und Tricks: Farbige Listensymbole

Listensymbole müssen nicht immer die Farbe des Eintrags erhalten. Es sind durchaus kunterbunte Mischungen möglich, wie du in dem folgenden Beispiel sehen kannst.

Variante 1

Beispiel

Internet Explorer 4.0, Netscape 4.7, Opera 5, Mozilla 1.0, Mozilla Firefox 0.8 
<ul style="color:#ff0000;">
<li><span style="color:#ff0000;">Eintrag 1</span></li>
<li><span style="color:#00ff00;">Eintrag 2</span></li>
<li><span style="color:#0000ff;">Eintrag 3</span></li>
</ul>

Die Sache ist eigentlich ganz einfach. Im <ul>-Element legst du die Farbe für die Listensymbole fest. Diese ist nun aber auch für die Einträge gültig. Also musst du diese in ein <span>-Element setzen und dem Text eine andere Farbe geben. Das ist alles.

Variante 2

Beispiel

Internet Explorer 4.0, Netscape 4.7, Opera 5, Mozilla 1.0, Mozilla Firefox 0.8 
<ul>
<li style="color:#ff0000;"><span style="color:#000000;">Eintrag 1</span></li>
<li style="color:#00ff00;"><span style="color:#0000ff;">Eintrag 2</span></li>
<li style="color:#0000ff;"><span style="color:#ff0000;">Eintrag 3</span></li>
</ul>

Variante 1 hat die Einschränkung, dass alle Listensymbole die gleiche Farbe haben. Du kannst die Farbe des Symbols aber auch in jedem <li>-Element einzeln festlegen. Die Einträge setzt du wieder in ein <span>-Element, um dem Text eine andere Farbe geben. Fertig sind die kunterbunten Listen.

Siehe auch Listeneigenschaften.