Aufzählungslisten mit eigener Grafik

Scripting-Tipps - CSS


Aufzählungslisten werden im Browser standardmäßig mit einem Punkt oder einem Kästchen dargestellt. Diese lassen sich zwar farblich anpassen, sehen bei manchen Designs jedoch nicht immer vorteilhaft aus. Lesen Sie in diesem Artikel, wie Sie die Aufzählungslisten mittels CSS mit eigenen Grafiken versehen können.

Definition eigener Grafiken in einer Aufzählungsliste

Mittels des Attributes list-style-image lassen sich eigene Grafiken für Aufzählungslisten definieren. Im Stylesheet selbst sieht es dann wie folgt aus.

Beispiel:

ul {
 list-style-image:url('grafik.jpg');
}


Beim Einsetzen dieses Code-Schnipsel, würde die Aufzählungsliste fortan mit der eigenen Grafik "grafik.jpg" angezeigt werden.

Anzeigebeispiel:

  • Punkt 1 in der Liste
  • Punkt 2 in der Liste
  • Punkt 3 in der Liste

Der Quellcode dieses Anzeigebeispiels lautet dabei wie folgt:

<ul style="list-style-image: url(http://www.webmasterparadies.de/favicon.ico);">
    <li>Punkt 1 in der Liste</li>
    <li>Punkt 2 in der Liste</li>
    <li>Punkt 3 in der Liste</li>
</ul>




Weitere Artikel: