Aufzählungen richtig formatieren

Montag, 1. September 2008

Geschrieben von Armin Vieweg

Mit Aufzählungen kann man viele Dinge umsetzen und man sieht sie häufig im Einsatz. Hier ein paar kleine Tipps um die Aufzählungen zu formatieren.

Ungeordnete Listen (ul) und geordnete Listen (ol) findet man in Internetseiten immer häufiger. Navigationen können damit umgesetzt werden, Aufzählungen oder Kommentare in einem Blog.

Das Gute daran ist, dass innerhalb der Listen eine Struktur besteht. Google und Co. erkennt praktisch direkt schon an der Liste welcher Punkt zu welchem gehört. Eine Liste sollte in HTML immer so aussehen:

<ul>
<li>Hauptpunkt 1</li>
<li>Hauptpunkt 2
    <ul>
      <li>Unterpunkt 1</li>
      <li>Unterpunkt 2</li>
    </ul>
</li>
<li> Hauptpunkt 3</li>
</ul>

Unterpunkte werden in einem nicht geschlossenen Listenpunkt angegeben, in dem dort wieder eine Liste geöffnet wird. Das was hier etwas kompliziert aussieht ist aber in Wirklichkeit wohl durchdacht, denn auf die Art und Weise kann man verschiedene Listen-Typen miteinander verbinden.

Listenarten sind:

ungeordnete Listen (ul)
geordnete Listen (ol)

Man kann die Navigation beispielsweise ungeordnet aufbauen und einem der Unterpunkte mit einer geordneten Liste ausstatten. Der Hauptunterschied ist, dass eine ungeordnete Liste nur mit Punkten, Quadraten oder Strichen aufgeführt werden und geordnete Listen können mit a,b,c oder 1,2,3 oder I, II, III aufgeführt werden.

Eine Liste mit CSS formatieren
Man sollte bevor man mit Listen in HTML arbeitet erst mal ein paar Grunddinge im Vorfeld abklären:

ul {
padding:0;
margin:0;
list-style:none;
}

Dadurch werden sämtliche Abstände innerhalb aller ungeordneten Listen entfernt. Darüberhinaus wird das meist störende Aufzählungszeichen entfernt. Man sollte sowieso davon absehen damit zu arbeiten und lieber ein Background setzen. So sehen die Aufzählungszeichen immer gleich aus und man ist dynamischer im Layout, da man ein x-beliebiges Bild verwenden kann.

Um ein Aufzählungszeichen manuell mit einem Hintergrund-Bild zu realisieren einfach folgenden CSS-Code adaptieren:

ul li {
background:url(images/bullet.gif) no-repeat left center;
padding-left:20px;
}

So wird jedem Listenpunkt innerhalb einer ungeordneten Liste ein Hintergrundbild zugeordnet, dass für den Besucher aussieht wie ein Auflistungszeichen.

Durch den Margin- und Padding-Reset für ungeordnete Listen liegt jetzt der Text direkt über dem Hintergrundbild. Von daher sollten wir hier noch einen linken Padding definieren. Je nach Größe des Bullet (Punktes) sollten ca. 20 Pixel Abstand ausreichen.

So kann man recht schnell Listen nach den eigenen Wünschen optisch beeinflussen. Verwendet man die Standard-Bullets die auch über CSS veränderbar sind, kann es je nach Browser zu einem Unterschied kommen.

Keine Kommentare vorhanden

Letzte Aktualisierung ( Montag, 1. September 2008 )

< Zurück		Weiter >

Startseite Tipps & Tricks Aufzählungen richtig formatieren

Aufzählungen richtig formatieren

Tipps & Tricks Kategorien

Beliebteste Tipps