CSS Grundlagen: Geordnete und ungeordnete Listen im Web-Design: Alles, was Einsteiger wissen müssen

Geordnete und ungeordnete Listen formatieren

Geordnete und ungeordnete HTML-Listen gehören zu den wichtigsten Werkzeugen zur Gestaltung von Webseiten. In HTML werden Listen verwendet, wenn man Text auf der Webseite in einer strukturierten und übersichtlichen Form darstellen möchte. Je nach Bedarf kann man die Inhalte als geordnete Liste mit Nummerierung oder als ungeordnete Liste (Aufzählung) mit vorangestellten Marker (z.B. ⏺) gestalten.

HTML-Listen sind ein wichtiges Element für abwechslungsreiche und klar strukturierte Webseiten. Sie sorgen für eine präzise und schnelle Vermittlung von Informationen.

Listen werden aber nicht nur für Aufzählungen verwendet. Auch die Navigation wird fast immer als ungeordnete Liste realisiert. Listen haben eine eigene Semantik und je nach Browser kann die Standard-Darstellung unterschiedlich sein.

Mit Hilfe von CSS lässt sich die Darstellung jedoch recht einfach individuell anpassen, ohne die Semantik zu verändern.

Ein einfaches Beispiel für Listen mit den Standard-Einstellungen

<h2>Ungeordnete Liste</h2>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ul>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea tak</p>

<h2>Geordnete Liste</h2>

<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ol>

<p>No sea takimata sanctus est Lorem ipsum dolor labore elit. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos accusam et justo duo dolores est.</p>

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Aufzählungen (UL) und nummerierte Listen (OL) individuell gestalten

Im oben gezeigten Beispiel haben wir die Aufzählungsliste (<ul>) und die nummerierte Liste (<ol>) kennengelernt. Mit CSS können wir den Marker-Typ und die Abstände der Liste individuell gestalten.

Jeder Punkt der Liste wird mit <li> eingeleitet und mit </li> abgeschlossen. Für jedes LI-Element wird vom Browser-Stylesheet die Eigenschaft display: list-item festgelegt. Das Besondere an dieser Eigenschaft ist, dass zwei Boxen erzeugt werden:

• eine Block-Box für den Inhalt des Listenelements
• und eine Inline-Box für den Marker, der vor dem Inhalt eingefügt wird.

Die Aufzählungszeichen (Marker) für Listen festlegen

Es gibt drei Listen-spezifische Eigenschaften mit denen man die Darstellung der Listenelemente ändern kann:

• list-style-type
• list-style-image
• list-style-position

Mit list-style-type kann man das Bullet-Zeichen (Aufzählungszeichen) für eine ungeordnete Liste oder die Art der Nummerierung für eine geordnete Liste festlegen. Folgende Werte sind möglich:

Die beiden oben dargestellten Tabellen sind logisch voneinander getrennt. Es ist wichtig, dass Listen logisch benutzt werden. Mit CSS kann man zwar problemlos eine Aufzählung (UL-Liste) mit nummerierten List Items anzeigen lassen. Dies würde aber im Widerspruch zur Logik der Liste stehen.

Ein beliebiges Zeichen als Aufzählungszeichen festlegen

Man kann auch eigene Aufzählungszeichen durch Angabe einer Zeichenkette festlegen: z.B. mit einem UTF-8-Zeichen list-style-type: "✔ "

Beachte, dass bei dieser Methode die für das Listenelement definierte Schriftgröße und Farbe auch für die Aufzählungspunkte verwendet wird.

Im nächsten Abschnitt erfährst du, wie man die Marker unabhängig vom Listenelement gestalten kann.

Marker und Listenelemente separat formatieren

Mit CSS3 ist es jetzt sogar möglich, eigene Aufzählungszeichen (Marker) durch Angabe einer Zeichenkette zu definieren (zum Beispiel list-style-type: "✅ " ) und diese unabhängig vom Listenelement zu formatieren.

Die Aufzählungszeichen in einer Liste werden als Marker bezeichnet. Die Inline-Box, in der sich das Aufzählungszeichen befindet, wird Marker-Box genannt. Sie steht ganz am Anfang vor dem eigentlichen Inhalt des Listenelements.

Die Marker-Box kann man mit dem Pseudo-Element ::marker separat selektieren und unabhängig vom Listenelement gestalten.

/* Marker für Listen definieren */
h2 {
  margin: 0.5em 0;
  font-size: 1.5em;
  color: #0000bb;
}

p {
  margin: 0 0 0.5em 0;
}

/* Listen definieren */
ul.n1 {
  margin: 0 0 1.0em 0;
  padding: 0 0 0 2.0em;
  font-size: 1.0em;
  color: #6a1782;
  list-style-type: "✅ ";
}

ul.n2 {
  margin: 0 0 1.0em 0;
  padding: 0 0 0 2.0em;
  font-size: 1.0em;
  color: #6a1782;
  list-style-type: "✔ ";
}

::marker {
  font-size: 1.2em;
  color: #ff0000;
}

<h2>Marker für Listen</h2>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea tak</p>

<ul class="n1">
  <li>Listenelement 1</li>
  <li>Listenelement 2</li>
  <li>Listenelement 3</li>
  <li>Listenelement 4</li>
</ul>

<p>No sea takimata sanctus est Lorem ipsum dolor labore elit. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos accusam et justo duo dolores est.</p>

<ul class="n2">
  <li>Listenelement 1</li>
  <li>Listenelement 2</li>
  <li>Listenelement 3</li>
  <li>Listenelement 4</li>
</ul>

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Ein Bild als Aufzählungszeichen verwenden

Mit der Eigenschaft list-style-image: url("PATHNAME/bild.png") ist es möglich, ein Bild als Aufzählungszeichen zu verwenden. Wenn die Grafik sich in einem anderen Verzeichnis als die CSS-Datei befindet, muss der Pfad zur Bild-Datei relativ oder absolut angegeben werden.

Dabei muss PATHNAME relativ zur CSS-Datei angegeben werden.

Wenn sowohl list-style-type als auch list-style-image angegeben ist, wird list-style-type als Fallback verwendet, falls die Grafik aus irgendeinem Grund nicht geladen werden kann.

Das Verhalten der verschiedenen Browser ist nicht konsistent. Einige beschneiden die Grafik auf die Höhe des Listenelements. Andere vergrößern das Listenelement, so dass die Grafik vollständig angezeigt wird.

Der Einsatz von Grafiken als Aufzählungszeichen hat mehrere Nachteile:

• Die Grafiken lassen sich nicht präzise positionieren.
• Die Grafiken passen sich nicht unterschiedlichen Standard-Schriftgrößen an.
• Die Grafiken sehen auf hochauflösenden Displays oft pixelig aus.

Das Aufzählungszeichen (Marker) der Liste positionieren

Mit list-style-position kann man festlegen, ob die Aufzählugszeichen innerhalb der Listenelemente erscheinen sollen oder außerhalb vor dem Beginn der Listenelemente eingefügt werden.

Folgende Angaben sind hier möglich:

• list-style-position: inside Aufzählungszeichen innerhalb des Listenelements
  

  Nur die erste Zeile des Listenelements wird eingerückt, um Platz für das Aufzählungszeichen zu schaffen. Wenn der Text länger als eine Zeile ist, bricht der Text um und umfließt das Aufzählungszeichen. Wirklich sinnvoll ist diese Einstellung nur für kurze, einzeilige Listenelemente

• list-style-position: outside (Standard) Aufzählungszeichen außerhalb des Listenelements
  

  Wenn das Listenelement sich über mehrere Zeilen erstreckt, wird das Aufzählungszeichen links vor den Absatz gesetzt. Das Erscheinungsbild der Liste ist dadurch gewohnt ruhig.

Listen-Elemente linksbündig ausrichten

Alle Browser rücken Listenelemente standardmäßig nach rechts ein. Das Einrücken der Listenelemente vom linken Rand des übergeordneten Blocks ist jedoch keine Eigenschaft, die von UL oder OL unveränderlich vorgegeben ist. Den Einzug der Listenelemente kann man mit den CSS-Eigenschaften Margin oder Padding für UL bzw. OL individuell festlegen.

/* Listen linksbündig ausrichten */
h2 {
  margin: 0.5em 0;
  font-size: 1.5em;
  color: #0000bb;
}

p {
  margin: 0 0 0.5em 0;
}

/* Listen definieren */
ul {
  margin: 0 0 1.0em 0;
  padding: 0 0 0 1.0em;
  font-size: 1.0em;
  color: #00dd00;
  list-style-type: circle;
}

ol {
  margin: 0 0 1.0em 0;
  padding: 0 0 0 1.2em;
  font-size: 1.0em;
  color: #d26a0c;
  list-style-type: decimal;
}

<h2>Ungeordnete Liste</h2>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea tak</p>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>

<h2>Geordnete Liste</h2>

<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ol>

<p>No sea takimata sanctus est Lorem ipsum dolor labore elit. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos accusam et justo duo dolores est.</p>

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Grundlegendes Verständnis einer Navigation in Form einer Liste

Unter der Navigation oder Navigationsleiste versteht man in der Regel die Haupt-Navigation einer Webseite, über die der Besucher bequem jede Unterseite der Website erreichen kann. Die Aufzählungsliste ist das semantisch korrekte HTML-Element zur Auflistung von Links.

Damit hast du ein strukturiertes Element und drei verschachtelte HTML-Elemente, die du mit CSS formatieren kannst, nämlich UL, LI und A.

Wenn man aus einer Liste eine ansprechend gestaltete horizontale Navigation erstellen möchte, muss man beachten, dass Listen Block-Elemente sind.

Schauen wir uns ein einfaches Beispiel an. Zur Verdeutlichung fügen wir Padding und Hintergrundfarben hinzu.

/* Horizontale Navigation */
h2 {
  margin: 0 0 0.5em 0;
  font-size: 1.5em;
  color: #0000bb;
}

nav ul {
  padding: 1.0em;
  background: #ffffd2;
  list-style-type: none;
}

nav li {
  display: inline-block;
  margin-top: 0.2em;
  padding: 0;
  background: #6ccd6c;
}

nav a {
  display: inline-block;
  padding: 0.5em 1.0em;
  text-decoration: none;
  color: #000000;
}

nav a:hover {
  background: #ffa500;
}

<h2>Horizontale Navigation</h2>

<nav>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Angebote</a></li>
  <li><a href="#">Kontakt</a></li>
  <li><a href="#">Datenschutz</a></li>
  <li><a href="#">Impressum</a></li>
</ul>
</nav>

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.