Sie befinden sich hier:
» 
» 
07.11.2010

Formatierung von Listen

Kategorie(n): HTML und CSS Tipps

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

<ul>
  <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

<style type="text/css">
  .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

<style type="text/css">
  .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

<style type="text/css">
  .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

<style type="text/css">
  .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.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

5