CSS/Tutorials/Listen mit CSS gestalten

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche


HTML kennt drei verschiedene Arten von Listen, jede mit einer eigenen Semantik und von Browser zu Browser ggf. unterschiedlichen Standard-Darstellung. Mithilfe von CSS lässt sich die Darstellung sehr flexibel anpassen, ohne auf die Semantik verzichten zu müssen. Die zunächst unerwünschte Darstellung ist nämlich häufig der Grund für den Verzicht auf Listen. Das ist allerdings gar nicht nötig.

Der Artikel CSS/Tutorials/Dropdown-Menüs mit CSS gestalten beschreibt Aufbau und Gestaltung; Grundlagen/Navigationstechniken grundlegende Konzepte von Menüs und Navigationen.

Aufzählungszeichen[Bearbeiten]

Grafiken[Bearbeiten]

Sie können mit list-style auswählen, ob das Aufzählungszeichen als gefüllter oder leerer Kreis oder als Quadrat dargestellt werden soll. Es gibt aber auch Anwendungsfälle, in denen Sie Verweisen visuelle Hinweise voranstellen wollen.

So könnten pdf-Dateien durch ein vorangestelltes Symbol kenntlich gemacht werden.

Beispiel ansehen …
.archiv {
  list-style-image: url('pdf.gif');
}

Der Einsatz von solchen Rastergrafiken hat mehrere Nachteile:

  • sie lassen sich nicht genau positionieren
  • sie passen sich nicht unterschiedlichen Standardschriftgrößen an
  • auf hochauflösenden Bildschirmen sehen sie pixelig aus.

Sie können die Grafiken auch als Pseudoelemente realisieren:

Beispiel ansehen …
.archiv {
  list-style: none;
}
.archiv li::before {
  content: url('pdf.gif');
}

Die beiden letztgenannten Nachteile bleiben auch hier.

Alternativen wären der Einsatz von SVG-Icons oder von Unicode-Zeichen.

Unicode-Symbole[Bearbeiten]

Dieses Beispiel sieht auf den ersten Augenblick ähnlich wie oben aus - beruht aber auf einer anderen Technik. Anstelle des Aufzählungszeichens wird ein Pseudoelement erzeugt, dessen Inhalt im CSS festgelegt ist.

Beispiel ansehen …
li {
  list-style-type: none;
}
li::before  {
  content: "♥ ";    
  color: red;
  font-size: 1.5em;
}
Mit ::before wird ein Pseudoelement erzeugt. Es erhält über die CSS-Eigenschaft content einen Inhalt. Dies kann eine normale Zeichenkette, oder wie hier, ein Unicode-Symbol sein. Mit color und font-size wird der Inhalt nach Wunsch formatiert.

horizontale Navigationsleiste[Bearbeiten]

Viele Webseiten haben zum Beispiel im Seitenfuß eine kleine einzeilige Navigationsleiste, die semantisch einer (un-) geordneten Liste von Links entspricht.

Beispiel ansehen …
<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/impressum">Impressum</a></li></ul>
Die Darstellung inline stellt alle Listenelemente li unmittelbar fortlaufend dar. Diese werden hier ohne Aufzählungszeichen (list-style-type) dargestellt.
li {
    display: inline;
    list-style-type: none;
}
In unserem Beispiel soll ein Punkt zwischen den einzelnen Listenelementen auftauchen. Häufig findet man auch das Pipe-Zeichen oder Bindestriche. Daher wird bis auf das erste Element jedem anderen der Punkt vorangestellt.
li:not(:first-child)::before {
    content: '• ';
}

Information

In CSS 3 (siehe Modul Listen und Counter) ist für solche Zwecke das Pseudoelement ::marker vorgesehen.

Brotkrumen-Navigation[Bearbeiten]

Das obige Beispiel mit einer Navigationsleiste kann etwas abgewandelt auch zur Auszeichnung und Darstellung einer sogenannten „Brotkrumen-Navigation“ (bread crumb) verwendet werden:

Beispiel ansehen …
<ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Abschnitt</a></li>
    <li><a href="#">Unterabschnitt</a></li>
    <li><a>diese Seite</a></li>
</ol>
li {
    display: inline;
    list-style-type: none;
}
li:not(:first-child)::before {
    content: "» ";
}

Information

In CSS 3 (siehe Modul Listen und Counter) ist für solche Zwecke das Pseudoelement ::marker vorgesehen.


Der Ordnung entsprechend steht hierbei Home an erster, Abschnitt an zweiter und Unterabschnitt an dritter Stelle. Der letzte Eintrag zeigt die aktuelle Seite und ist in diesem Beispiel nicht verlinkt. Andere Brotkrumen-Navigationen (wie auch die in diesem Wiki) verzichten auf die Angabe der aktuellen Seite.

Listen mit Kindelementen[Bearbeiten]

Listen können auch aus Textabsätzen mit mehreren Elementen bestehen.

Beispiel ansehen …
<ul>
  <li>
    <img src="frühling.png" alt="Bild einer Narzisse, Quelle Wikipedia">
    <h3>Frühling</h3>
    <p>Endlich wird es wieder ein bisschen sonniger und wärmer. 
       Wer jetzt spazieren geht, sieht schon die ersten grünen Knospen sprießen.
     </p>
  </li>
...
Innerhalb der Listenelemente befinden sich eine Grafik img, eine Überschrift h3 und ein Textabsatz p.
ul {
  list-style-type: none;
  width: 30em;
}

li h3 {
  font: bold 1.2em/1.5 Helvetica, Verdana, sans-serif;
}

li img {
  float: left;
  margin: 0 15px 0 0;
  width: 5em;
}

li p {
  font: 100 0.75em/1.5 Georgia, Times New Roman, serif;
}

li {
  padding: 10px;
  overflow: auto;
}

li:hover {
  background: #F1F3F4;
  cursor: pointer;
}
Die Liste erhält eine feste Breite, ihre Listenelemente werden ohne Aufzählungszeichen untereinander dargestellt.
Die Grafiken werden 5em groß skaliert und links gefloatet. Rechts hat die Grafik einen 15px breiten Rand; daneben werden Überschrift und darunter der Textabsatz platziert. Beide erhalten eine typografische Formatierung.

alternative Umsetzung mit display:tablecell[Bearbeiten]

Sie können die Kindelemenenta auch mit display:table-cell oder flexbox positionieren.

Beispiel ansehen …
<ul>
  <li>
    <img src="frühling.png" alt="Bild einer Narzisse, Quelle Wikipedia">
    <div>
    <h3>Frühling</h3>
    <p>Endlich wird es wieder ein bisschen sonniger und wärmer. 
       Wer jetzt spazieren geht, sieht schon die ersten grünen Knospen sprießen.
     </p>
    </div>
  </li>
...
Innerhalb der Listenelemente befinden sich eine Grafik img, eine Überschrift h3 und ein Textabsatz p. Im Unterschied zum oberen Beispiel benötigen Sie noch ein ansonsten funktionsloses Wrapper-Element für die untereinander angeordneten h3 und p-Elemente.
li {
  display: table;
}

li img {
  margin: 0 15px 0 0;
  width: 5em;
  display: table-cell;
}

li div {
  display: table-cell;	
}
Das li-Element und das als Wrapper-Element dienende div werden mit display:table-cell nebeneinander positioniert.

Durch die missbräuchliche Verwendung von float zur Gestaltung ganzer Webseiten ist diese Eigenschaft etwas in Verruf geraten. Die Positionierung von Bildern ist jedoch genau der Aufgabenbereich, für die diese Eigenschaft erschaffen wurde.

dt und dd in einer Zeile[Bearbeiten]

Standardmäßig werden in einer Definitionsliste dt und dd untereinander dargestellt (jeweils display: block), dd ist etwas eingerückt:

Beispiel
dt ………………
 dd ………………

Möchte man hingegen den Term (dt) und dessen Definition (dd) in einer Zeile nebeneinander stehen haben, z. B. noch mit einem Doppelpunkt voneinander getrennt,

Beispiel
dt ………………: dd ………………
dt ………………: dd ………………

liegt zwar display: inline nahe, was allerdings die komplette Definitionsliste in eine Zeile setzt. Stattdessen muss dd rechts am dt „vorbeifließen“:

Beispiel ansehen …
dt {
  float: left;
  font-weight: bold;
  margin-right: 0.5em;
}

/* und noch der Doppelpunkt */
dt::after { 
  content: ": "; 
}

/* einen Clearfix für Folge-dd-Elemente */
dd::after {
  clear: left;
  content: " ";
  display: block;
}
Beachten Sie: Unter Umständen, besonders bei kleinen Viewscreens oder großen Inhalten der dt- bzw. dd-Elemente, könnte floating allein nicht das gewünschte Ergebnis erzielen.


Siehe auch[Bearbeiten]