Formatierung von Listen
Listenpunkte können auf unterschiedliche Art und Weise formatiert werden. In der einfachsten Form wird ein spezielles Bulletzeichen verwendet. Wenn es optisch attraktiver wirken soll, helfen Listenbilder bzw. Hintergrundbilder.
Die folgenden Beispiele sollen das Prinzip veranschaulichen.
Generell gilt: Die notwendigen Stylesheet-Angaben sind idealerweise in einer separaten Datei abzulegen und einzubinden.
Beispiel 1 - die einfache Form ohne zusätzliche Formatierungen
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
Ergebnis:
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
Beispiel 2 - Gestaltung der Listenpunkte mittels list-style-type
.bsp2{
list-style-type:circle;
}
</style>
<ul class="bsp2">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
Ergebnis:
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
Beispiel 3 - Gestaltung der Listenpunkte mittels list-style-image
.bsp3{
list-style-type:none;
list-style-image:url(../image/pfeil_dopp.gif);
}
</style>
<ul class="bsp3">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
Ergebnis:
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
Beispiel 4a - Gestaltung der Listenpunkte mittels background-image
.bsp4 li{
list-style-type:none;
background:url(../image/pfeil_dopp.gif) no-repeat left top;
padding-left:20px;
}
</style>
<ul class="bsp4">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
Ergebnis:
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
Beispiel 4b - Gestaltung der Listenpunkte mit unterschiedlichen background-image Angaben je Listenebene
.bsp4 li{
list-style-type:none;
background:url(../image/pfeil_dopp.gif) no-repeat left top;
padding-left:20px;
}
.bsp4 li ul li{
list-style-type:none;
background:url(../image/pfeil.gif) no-repeat left top;
}
</style>
<ul class="bsp4">
<li>Listenpunkt 1
<ul>
<li>Listenpunkt 1.1</li>
<li>Listenpunkt 1.2</li>
<li>Listenpunkt 1.3</li>
</ul>
</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
Ergebnis:
- Listenpunkt 1
- Listenpunkt 1.1
- Listenpunkt 1.2
- Listenpunkt 1.3
- Listenpunkt 2
- Listenpunkt 3
Hinweis:
Das Beispiel 3 und Beispiel 4 sieht möglicherweise gleich aus.
Die Variante mit background-images (Beispiel 4) ist allerdings zu bevorzugen, da in dieser Variante die Darstellung browserübergreifend korrekt erfolgt.
In der Variante mit list-style-image kann es browserspezifisch Abweichungen geben.