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 14x14px 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.
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.
Pingback: Anonymous
Pingback: Liste mit unterschiedlichen Bildern? - XHTMLforum
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.
Pingback: Problem mit Listen neben Bildern - XHTMLforum
Pingback: Problem bei einheitlicher Positionierung mit "list-style-image" - XHTMLforum
Wieso funktioniert das bei mir nicht. Listenpunkte allgemein lassen sich ausblenden. Man sieht auch, dass die Liste weiter eingerückt wird, aber das Listenbild wird nicht angezeigt.
Ich verwende das Bildformat png und habe kein quadratisches Bild, so wie in der Anleitung mit 14×14.
Liegt das eventuell daran?
Hi,
dann gib mir doch mal einen Link zum Problem, damit ich mal schauen kann.
edit. Wenn das die Site ist auf die dein verlinkter Name verweist, dann schätze ich das der Pfad zur Grafik nicht korrekt ist.
Der Pfad muss relativ zur Gestaltungsdatei angegeben werden z.B.:
Da du WordPress nutzt befinden sich die Dateien/Ordner in deinem Themeordner. Das ist einmal die style.css für die Gestaltungsanweisungen und der Ordner images für die Grafiken deines Themes
Um von deiner CSS-Datei den korrekten Pfad zur Grafik zu definieren mußt du normalerweise folgendes schreiben:
.listenzeichen { background: url( images/ausrufezeichen3.png) no-repeat left 0.3em; }Versuchs mal und melde dich dann.
Hier ist der Link:
http://www.schmerzfrei-oder-gratis.de
naja, eine mögliche Lösung habe ich ja schon in meinem Vorposting genannt,
Hi, ich bins wieder.
Bei WordPress gibt es ja unzählige Ordner mit dem Namen:”images”. Hab nicht darauf geachtet, das Bild in den richtigen Ordner zu verschieben.
Jetzt klappt es.
Vielen Dank für die Hilfe