Bilder als Aufzählungspunkte

oder auch

Lessons learnt from rebooting, Part 1:

Einen kleinen CSS-Trick möchte ich gerne an euch weitergeben. Bei meinem Relaunch habe ich Bilder als Bullet-Points benutzt, was man ja sehr schön per CSS machen kann:

ul {
    list-style-image: url(bullet-galore.gif);
}

Leider hatte ich bei dieser Lösung das Problem, dass a) das Bild in manchen Browsern vertikal zum Text stets etwas nach oben versetzt dargestellt wurde und b) die Höhe des Bildes die Höhe der Listenpunkte beeinflusst hat.

Verrutschte Aufzählungszeichen

Zu einer schicken Lösung bin ich dank Dan Cederholms Buch Web Standards Solutions gekommen, der für Bilder als Bullet-Points einfach das background-Attribut benutzt. So kann man das Bild genau ausrichten und hat keines der beiden oben beschriebenen Probleme:

ul {
    list-style: none;
}

li {
    background: url(bullet-galore.gif) 0 50% no-repeat;
    padding-left: 15px;
}

Richtig positionierte Aufzählungszeichen

Die 50% Angabe funktioniert allerdings nur bei einzeiligen Listenpunkten. Wenn der Text umbricht, sollte man auf eine Pixel- oder em-Angabe umstellen.

Veröffentlicht am 02.05.2006 um 21:36 Uhr
· · ·

Sorry, für diesen Artikel sind keine Kommentare (mehr) möglich.