CSS Kochbuch

5.8 Die Darstellung einer Liste durch Grafiken verstärken

Problem

Durch die Verwendung von Grafiken soll die Aufmerksamkeit der Benutzer auf eine Liste gelenkt werden.

Lösung

Verwenden Sie als Hintergund für das Element ul und die Aufzählungszeichen der li-Elemente eigene Grafiken.

Erzeugen Sie zuerst ein Hintergrundbild für die ungeordnete Liste und für das Aufzählungszeichen (siehe Abbildung 5-11).

Im nächsten Schritt definieren Sie für das Element ul das Hintergrundbild. Um der Liste die gleiche Breite zu geben wie dem Bild, verwenden Sie außerdem die Eigenschaft width (siehe Abbildung 5-12):

ul {
    background: url(list-bkgd.gif) bottom;
    width: 298px;
    list-style: none;
    padding: 0 0 12px;
    margin: 0;
}

Abbildung 5-11. Die für die Darstellung verwendeten ...