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.

Werbung

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