Listige Listenzeichen

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.

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>