Aufzählungslisten mit eigener Grafik

Aufzählungslisten werden im Browser meist entweder mit einem Punkt, oder einem Kästchen dargestellt. Diese lassen sich zwar farblich anpassen, sehen bei manchen Designs jedoch nicht immer vorteilhaft aus. Es ist allerdings auch möglich, Aufzählungslisten mit eigener Grafik darzustellen. Dazu ist ein wenig CSS vonnöten.

In diesem Artikel zeige ich dir, wie du mit CSS die Aufzählungszeichen mit einer eigenen Grafik anpassen kannst.

 

Definition von Aufzählungslisten mit eigener Grafik

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

 

Beispiel:

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

 

Verwendest du dieses Snippet, zeigt der Browser infolgedessen die Aufzählungsliste mit dem eigenen Bild „grafik.jpg“ an.

 


Anzeigebeispiel:

  • Erster Punkt in der Liste
  • Zweiter Punkt in der Liste
  • Dritter Punkt in der Liste

 

Der Quellcode dieses Anzeigebeispiels lautet dabei wie folgt:

<ul style="list-style-image: url('https://webmasterparadies.de/favicon.ico');">
     <li>Erster Punkt in der Liste</li>
     <li>Zweiter Punkt in der Liste</li>
     <li>Dritter Punkt in der Liste</li>
 </ul>

 

Weitere Möglichkeiten

Listen lassen sich noch viel weiter gestalten. Eine Reihe an Möglichkeiten zeige ich dir im Artikel „Listen in HTML erstellen und gestalten“ .


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.