Listenzeichen
Listenzeichen sind ein leidiges Thema.
Es ist ja optisch ganz nett, wenn die Listenpunkte einer ungeordneten Liste vom Browser automatisch mit einem Listenzeichen versehen werden. Dadurch wird die Liste optisch noch einmal hervorgehoben.
Dumm ist nur wenn die Listenzeichen in jedem Browser anders aussehen. Ganz übel wird es dann, wenn sie im Internet Explorer zu sehen sind im Firefox aber nicht, oder umgekehrt.
Was tun sprach Zeus?
Ihr könntet list-style-position auf inside setzen (beim Firefox ist es per Default-Einstellung outside), aber die Punkte sind im Internet Explorer trotzdem klein, dünn und kraftlos.
Es gibt einen besseren Weg:
Erst mal schalten wir die Listenzeichen mit list-style-type:none; alle aus.
Dann erstellen wir mit einem Grafikprogramm ein eigenes Listenzeichen und binden das als Hintergrundgrafik ein.
Bitte CSS ergänzen:
li {list-style-type:none;}
Der Stand im Browser:
Die erstellte Grafik: 
Die Grafik hat die Maße 14×14px und ist ein gelber Punkt. Nicht spektakulär, aber für unsere Zwecke mehr als ausreichend.
Nun binden wir die Grafik als HG-Grafik ein. Dazu bilden wir eine Klasse die wir li zuweisen.
Aussehen des Quellcodes:
<ul><li class="listenzeichen">Erster Listenpunkt</li><li class="listenzeichen">Zweiter Listenpunkt</li><li class="listenzeichen">Dritter Listenpunkt</li><li class="listenzeichen">Vierter Listenpunkt oder watt?!</li></ul>
Bitte CSS ergänzen:
.listenzeichen {background:url(listenzeichen.png) no-repeat left top;}
Stand im Browser:
Naja, da ist zwar was gelbes, aber an der falschen Stelle.
Bitte CSS ergänzen:
.listenzeichen {background:url(listenzeichen.png) no-repeat left 0.3em;padding-left:1.5em;}
Stand im Browser:
Man kann jetzt darüber streiten, ob die HG-Grafik im Internet Explorer 0.1em zu tief sitzt und das dann per Conditional Comment korrigieren, aber das müßt ihr selbst entscheiden.
Auf jeden Fall erhaltet ihr so Listenzeichen, die browserübergreifend gleich aussehen und auch leicht zu positionieren sind.
Außerdem ist der Text wenn der Listenpunkt mehr als einzeilig ist sauber eingerückt, was bei den autom. Listenzeichen oder list-style-image nicht der Fall ist.
- Kategorien:
- XHTML/CSS
- Tags:
- HG-Grafik, Hintergrundgrafik, listenpunkte, listenzeichen
- Kommentare:
- Kommentare verfolgen oder Kommentar abgeben
Wieso Kompliziert wenn es auch einfacher geht?
Seit CSS1 gibt es die Eigenschaft
list-style-imagedie es ermöglicht eine eigene Bullet-Grafik für Listenpunkte anzugeben.Das ganze wäre dann so zu Realisieren:
li { list-style-image:url(list_style_image.gif); }
Der Vorteil an der Eigenschaft ist, das man sich nicht um die Positionierung der Bullet-Grafik kümmern muss, so wie in deinem Beispiel.
Auch nochmal auf SELFHTML Nachzulesen unter: CSS Listenformatierung: list-style-image (eigene Bullet-Grafik).
Gruss Fabian
Hallo Fabian,
die Eigenschaft kenne ich.
Leider wird sie von den unterschiedlichen Browsern genau wie das automatisch erzeugte Listenzeichen indifferent behandelt.
Browserübergreifend korrekt geht das sicher nur mit background-image.
Wirf doch mal einen kurzen Blick in die Spezifikation.
Scroll ein bißchen tiefer zu list-style-image. Unter dem grünen Kasten steht:
Das heißt also das Bild ersetzt das automatisch erzeugte Listenzeichen.
Damit ist klar das es auch die Nachteile des automatisch erzeugten Listenzeichens erbt.
Hm, schön wär’s. Meiner Erfahrung nach werden sie sehr wohl unterschiedlich behandelt.
Moin,
Dann täuscht dich deine Erfahrung vielleicht etwas.
Folge dem Link zur Spezifikation in meinem ersten Kommentar.
Dort steht etwas weiter unten ganz eindeutig zu list-style-image:
Ok ist CSS 2.0.
In 2.1 steht da:
Das automatische Listenzeichen wird nur durch das image ersetzt.
Ganz egal was deine Erfahrungen sind, in der Spezifikation steht wie die Browser sich bei sowas zu verhalten haben.
Ach ja ein weiterer Vorteil der Methode mit background-image ist, das der Listenpunkt ruhig mehrere Zeilen haben kann.
Durch das padding werden auch weitere Zeilen richtig eingerückt.
Hallo,
hier ist ein Beispiel mit einer Standard-Bullet-Grafik und einem Bild als Bullet-Grafik, sowie jeweils ein paar Screenshots:
(URL bitte spätestens nach drei Tagen entfernen! Vielen Dank!)
Bei den verschiedenen Browsern kann ich beim besten Willen keine Indifferenz erkennen. Wie gesagt: Schön wär’s. Gerade weil die Darstellungen so unterschiedlich sind, ist die von dir empfohlene Methode mit Hintergrundbildern ja nötig bzw. besser.
[...] [...]
[...] [...]
[...] [...]