Kategorien
Design HTML/CSS

Unterschiedliche Farben für Listenzeichen

Listenzeichen lassen sich auf verschiedene Weise verändern, damit haben wir uns auch des Öfteren beschäftigt. Die kleinen Kugeln (Bullets) lassen sich verändern, durch andere Zeichen ersetzen oder ganz und gar durch eigene Grafiken austauschen. Bleibt eigentlich…

Listenzeichen lassen sich auf verschiedene Weise verändern, damit haben wir uns auch des Öfteren beschäftigt. Die kleinen Kugeln (Bullets) lassen sich verändern, durch andere Zeichen ersetzen oder ganz und gar durch eigene Grafiken austauschen.

Bleibt eigentlich nur eine Anwendung. Klassische Bullets, jedoch in anderen Farben als die ausgewählten Textelemente.

Das funktioniert nicht einfach so. Denn wenn der <li>-Tag verändert wird, nehmen Listenzeichen und Text immer dieselbe Farbe an. Schade eigentlich, doch mit einer Verschachtelung lässt sich auch das machen. Die Textbestandteile der Aufzählung werden separat formatiert.

  • Element 1
  • Element 2
  • Element 3
 <ul> 
 <li style="color : red"><div
style="color : black">Element 1</div></li> 
 <li
style="color : green"><div style="color : black">Element
2</div></li> 
 <li style="color : blue"><div
style="color : black">Element 3</div></li>
 </ul>

Auf diese Weise sorgen wir für bunte Listenzeichen und einen einheitlich lesbaren Text. Das klappt auch mit Ringen:

  • Element 1
  • Element 2
  • Element 3
      <ul type="circle"> 
 <li style="color
: red;"><div style="color : black">Element 1</div></li>

 <li style="color : green"><div style="color : black">Element
2</div></li> 
 <li style="color : blue"><div
style="color : black">Element 3</div></li>
 </ul>

Drachenbrowser (Moz) und Marktbeherrscher (IE) kennen keinen Unterschied, auch die nordische Fröhlichkeit (Opera) spielt zumindest ab Version 7 mit.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.