Wem die einfachen Listenpunkte zu schlicht sind, der kann auch eigene Grafiken als Aufzählungspunkte in Listen verwenden.
Hierzu muss im HTML-Dokument lediglich die Aufzählungssyntax <ul><li>Aufzählungstext</li></ul> stehen und im Stylesheet die definition dazu:
ul {list-style:none;}
li {list-style-image:url(pics/aufzählungsbild.gif); margin:5px 0 10px 10px; padding-left:10px; line-height:10px; }
Jetzt haben wir nur noch ein Problemchen mit der vertikalen Zentrierung der Listenpunkt-Grafik vor dem Text.
Firefox und Co. zeigen die Grafik so wie es sein soll vertikal zentriert vor dem Aufzählungstext an, unser Marktführer Internetexplorer meint er bräuchte sich nicht an die Statuten zu halten. Also muss man wieder versuchen zu tricksen.
Wir gehen jetzt mal davon aus, dass die Grafik eine Höhe von 10 px hat. Hier ordnen wir dann wie oben schon geschehn eine Zeilenhöhe von enbenfalls 10 px zu. Wem dies alles zu klein (Zeilenhöhe) wird muss ggf. die Grafik anpassen und paralell dazu die Zeilenhöhe (Bsp: 15px).
li {list-style-image:url(pics/aufzählungsbild.gif); margin-left:10; padding-left:10px; line-height:15px;}
© Agadoo 2001 - 2007