Eigene Aufzählungszeichen im HTML5

Aufzählungszeichen mit CSS ändern

Wenn die Kreise und Quadrate oder gar die römischen Ziffern Ihnen als Aufzählungszeichen zu langweilig werden, können Sie anhand von Bildern eigene erstellen. Dafür brauchen Sie nicht das HTML zu ändern, sondern nur das CSS.

Eigene Aufzählungszeichen erstellen

In der CSS-Regel für die gewünschte Liste oder das Listenelement geben Sie list-style: none; ein, um die normalen Aufzählungszeichen abzuschalten.
In der Regel für die gewünschte Liste geben Sie anhand der Eigenschaften margin-left und/oder padding-left an, um wie viel die Listenelemente eingerückt werden sollen. (Beide Eigenschaften sind normalerweise erforderlich, um browsergübergreifend ähnliche Resultate zu erzielen.) Durch Setzen von margin-left: 0; und padding-left: 0; werden alle Einrückungen entfernt. Beachten Sie, dass Sie natürlich die Eigenschafgten margin-right und padding-right anpassen müssen, falls für den Inhalt dir="rtl" angegeben wurde.
In der Regel für die li-Elemente innerhalb der gewünschten Liste tippen Sie background: url(bild.ext) wiederholungstyp horizontal vertical;, wobei bild.ext der Pfad und Dateiname des Bilds sind, das Sie als eigenes Aufzählungszeigchen nehmen wollen; wiederholungstyp ist der Wert no-repeat (üblich), repeat-x oder repeat-y und horizontal und vertikal sind die Werte für die Position des Hintergrunds innerhalb der Listenelemente.

Tippen Sie padding-left: wert;, wobei wert mindestens die Breite des Hintergrundbilds sein muss, um zu verhindern, dass der Inhalt des Listenelements das eigene Aufzählungszeichen überlappt.

Dies wirkt wie eine beliebige normale Aufzählungsliste, aber mit ein bisschen CSS lassen wir sie etwas anders aussehen.

Beispiel


<!DOCTYPE html>
<html>
<head>
	<title>HTML5 Lernen - Grundlagen und Tutorials</title>
	<meta charset="utf-8" />
</head>
<body>
	<h1>
		HTML5 Lernen - Grundlagen und Tutorials
	</h1>
	<ul>
		<li>HTML5 bietet neue Elemente für die Definition der Struktur einer Website</li>
		<li>HTML5 ist eine Spezifikation, die einige neue Tags und neues Markup beschreibt</li>
		<li>Wir beginnen mit einem kurzen Überblick über HTML5</li>
		<li>Die neuen Funktionen von HTML5</li>
		<li>Neue semantische Elemente in HTML5</li>
	</ul>
</body>
</html>

Zuerst schalten wir die Standardaufzählungszeichen aus (damit keine Bullets und Pfeile sichtbar sind) und passen die Einrückung der Listenelemente an. Dann weisen wir jedem Listenelement das Pfeil-Hintergrundbild zu und positionieren es ein paar Pixel vom oberen Rand des li und fügen links ein Padding ein, damit der Text die Pfeile nicht überlappt. Achten Sie darauf, im url-Teil von background den korrekten Pfad zum Bild anzugeben. Der url sollte sich dort befinden, wo das Bild relativ zum Stylesheet ist, also nicht zur HTML-Seite.


ul {
	/* Standardaufzählungszeichen abschalten */
	list-style: none;
	
	/* Einrückung der Listenelemente angeben */
	margin-left: 0;
	padding-left: 25px;
}

li {
	/* Bild ist 2 Pixel unterhalb von der oberen ➝ Kante des Elements */
	background: url(arrow-right.gif) no-repeat 0 ➝ 2px;
	
	/* Text rüberschieben, damit Platz für Pfeile ➝ist */
	padding-left: 25px;
}

Der Einzug von Aufzählungszeichen

Standardmäßig sind Listen vom linken Rand (ihres Elternelements) eingerückt. Ihre Aufzählungszeichen können entweder halb rechts neben diesem Startpunkt beginnen (Standard) oder bündig mit dem Rest des Texts abschließen (das nennt man inside).

Einrückungen von Aufzählungszeichen angeben

In der Stylesheet-Regel für die gewünschte Liste oder das Listenelement tippen Sie list-style-position:.
Dann geben Sie inside ein, damit die Aufzählungszeichen bündig mit dem Listenelementtext abschließen, oder outside, damit die Aufzählungszeichen links vom Listenelementtext stehen (Standard).

Dies demonstriert, wie Browser standardmäßig Text in einem Listenelement relativ zum Aufzählungszeichen umbrechen. Die Aufzählungszeichen befinden sich neben dem Inhalt. Dies können Sie mit CSS ändern. Ich habe beim ersten neuen Feature etwas mehr Text eingebaut, damit der Effekt der eingezogenen Aufzählungszeichen offensichtlicher wird.

Wenn man list-style-position auf inside setzt, ändert sich die Darstellung.


li {
	list-style-position: inside;
}

Die Aufzählungszeichen für die umbrochenen Zeilen beginnen am linken Rand des Listenelements anstatt außen links.

Alle Eigenschaften für list-style auf einmal setzen

So wie es eine Kurzschreibweise für background, border, font, outline usw. gibt, enthält CSS auch eines für die Features von list-style.

Alle list-style-Eigenschaften auf einmal ändern

Tippen Sie list-style:.
Geben Sie wie gewünscht die Art der Aufzählungszeichen an, die neben den Listenelementen erscheinen sollen.
Geben Sie dann Ihre gewünschten eigenen Aufzählungszeichen für die Listenelemente an.
Entscheiden Sie nun, ob die Aufzählungszeichen außerhalb der Listenabsätze stehen oder bündig mit dem Text abschließen sollen.

Die Schreibweise dieser CSS-Regel ist äquivalent dazu, das list-style-position auf inside und den list-style-type auf circle zu setzen. Das ist einfach nur kürzer. Sie können das list-style-image auch in der Kurzschreibweise angeben.


li {
	list-style: inside circle;
}