CSS: eigene Grafik in Aufzählungslisten verwenden

Die Verwendung von CSS ist heute eine zeitgemäße Methode, HTML zu formatieren. Im folgenden möchte ich Ihnen zeigen, wie man einer HTML Aufzählungsliste mittels CSS eigene Grafiken als Aufzählungssymbol zuweisen kann.

Sie können eine eigene Grafik als Aufzählungszeichen verwenden, indem Sie den Style der Liste ( <ul> )
mit list-style-image in der Form list-style-image:url(URL ZUR IMAGE DATEI) formatieren.

<ul style="list-style-image:url(dot-nok.gif);">
	<li>Punkt 1</li>
	<li>Punkt 2</li>
	<li>Punkt 3</li>
</ul>

So sieht’s aus:

  • Punkt 1
  • Punkt 2
  • Punkt 3

Verschiedene Grafiken in Aufzählungslisten verwenden

Es ist auch möglich, die einzelnen Aufzählungspunkte einer “Unordered List” mit verschiedenen Grafiken zu versehen. Hierzu wird der Style dem entsprechenden <li> Element zugewiesen.

<ul>
	<li style="list-style-image:url(dot-ok.gif);">Punkt 1</li>
	<li style="list-style-image:url(dot-nok.gif);">Punkt 2</li>
	<li style="list-style-image:url(dot-ok.gif);">Punkt 3</li>
</ul>

So sieht’s aus:

  • Punkt 1
  • Punkt 2
  • Punkt 3

3 Gedanken zu „CSS: eigene Grafik in Aufzählungslisten verwenden“

  1. Pingback: Andreas Horvath
  2. Pingback: Andreas Horvath
  3. Danke, das ist genau was ich gesucht habe.

    Aber fehlt da am Ende der Style-Angabe nicht das Semikolon?

    style=”list-style-image:url(dot-nok.gif);”

    statt

    style=”list-style-image:url(dot-nok.gif)”

Schreibe einen Kommentar