Sven Lennartz 20. April 2004

Listige Listenzeichen

Kein Beitragsbild

Listen gehören zu den häufig verwendeten HTML Elementen, leider lassen sie nur wenige Formatierungen zu. Immerhin sind eckige und hohle Bullets, so heißen die trennenden Symbole, möglich.

Legen wir los. Nicht zuletzt Dank CSS verfügen wir über ein gut bestücktes Arsenal interessanter Möglichkeiten. Listenzeichen, die so genannten Bullets, lassen sich einfach verändern.

rund und hohl

  • rund und hohl
 <ul style="list-style-type:circle">
    <li>rund und hohl</li>
    </ul> 

eckig

  • eckig
      <ul type=square>
    <li>eckig</li>
    </ul>

rund (Standard)

  • rund
      <ul style="list-style-type:disc">
    <li>rund</li>
    </ul>

Auch die Farbe können wir bestimmen:

  • rund und hohl
       <ul style="list-style-type:circle">
    <li style="color : red;">rund und hohl</li>
    </ul> 

Sollen sich aber Listenzeichen und Text der besseren Optik wegen unterscheiden, müssen wir etwas tiefer in die Trickkiste greifen. Zum Beispiel so:

  • 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>

Wem das nicht genügt, der greift zu eigenen Listenzeichen. Das ist technisch kein Problem. Es wird eine beliebige, geeignete Grafik eingebunden. Allerdings streiken an dieser Stelle die meisten Browser. Ein Problem ist das aber nicht, schlimmstenfalls bleibt es beim Standardzeichen.

      li { list-style-image: url(re.gif)}

Alle anderen Browser zeigen ihren „Default“-Wert. CSS 3 wird noch mehr können, zum Beispiel Häkchen.

CSS bietet auch die Möglichkeit eine eigene Grafik zu verwenden, leider wird der Effekt nur von sehr neuen Browser unterstützt. Ein Problem ist das aber nicht, da im ungünstigsten Falle die Liste wie immer angezeigt wird.

Die eckige Alternative

Verwenden Sie diesen Befehl. Achten Sie auf den korrekten Pfad zur Grafikdatei (hier re.gif):

      LI { list-style-image: url(re.gif)}

Auf diese Weise ist es ohne Weiteres möglich große Symbole, kleine Zeichnungen und allerlei Farben zu verwenden.

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

Der Quellcode:

      <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.

Enthalten die Aufzählungen längere Texte werden diese bündig hinter dem Listenzeichen dargestellt. Das muss aber nicht sein, mit list-style: inside reiht sich auch das Listenzeichen (für gewöhnlich ein kleiner, schwarzer Kreis) in den Textblock ein. list-style: inside hebt die Formatierung dann wieder auf.

  • Die ist ein längerer Text, der als Muster dient.
  • Die ist ein längerer Text, der als Muster dient.
  • Die ist ein längerer Text, der als Muster dient.

Der Quellcode:

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

    <ul> 
    <li>längerer Text</li> 
    <li>längererText</li> 
    <li>längererText</li> 
    </ul>

Sven Lennartz

Sven Lennartz

Ex Webdesigner, Gründer von Dr. Web und Smashing Magazine. Heute ist Sven als Schriftsteller und Blogger unterwegs. Schau was er jetzt macht…
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Ein Kommentar

  1. Sehr ausführlich und verständlich geschrieben.
    Eine Sache ist mir aufgefallen.

    Bei list-style-image fehlen die Hochkommas:

    Also anstatt list-style-image: url(re.gif) muss es list-style-image: url(‚re.gif‘) heißen.

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.