HTML/Tutorials/Listen/Gestaltung mit CSS

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

Informationen zu diesem Text

Lesedauer
20min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
HTML
CSS


Listen haben ihre eigene 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.

list-style[Bearbeiten]

Die Eigenschaft list-style ist eine Zusammenfassung der möglichen Einzelangaben zu list-style-type, list-style-position und list-style-image.

list-style-type[Bearbeiten]

Die Eigenschaft list-style-type ermöglicht es, für Aufzählungslisten (ul) das Erscheinungsbild des Bullet-Zeichens; für nummerierte Listen (ol) die Darstellung der Durchnummerierung zu beeinflussen. Sie können die Eigenschaft für die Liste, aber auch für das Listenelement setzen.[1] [2]

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Erlaubt ist unter anderem eine der folgenden Angaben:

  • für ungeordnete Listen (ul)
    • disc, Standardwert gefüllter Kreis als Bullet-Zeichen
    • circle, leerer Kreis als Bullet-Zeichen
    • square, quadratisches Bullet-Zeichen
    • none, kein Bullet-Zeichen
    • inherit, Bullet-Zeichen des Elternelements
  • für geordnete Listen (ol)
    • decimal Nummerierung 1., 2., 3., 4. usw.
    • decimal-leading-zero, Nummerierung 01., 02., 03., 04. usw.
    • lower-roman, Nummerierung i., ii., iii., iv. usw.
    • upper-roman, Nummerierung I., II., III., IV. usw.
    • lower-alpha, Nummerierung a., b., c., d. usw.
    • lower-latin, ebenso
    • upper-alpha, Nummerierung A., B., C., D. usw.
    • upper-latin, ebenso
    • none, keine Nummerierung
    • inherit, Nummerierung des Elternelements

Durch das Attribut start im Starttag einer geordneten Liste können Sie die Nummerierung beeinflussen; das Setzen des reversed-Attributs bewirkt eine Umkehrung der Zählrichtung.

Außerdem gibt es Nummerierungen in vielen verschiedenen Sprachen wie z.B. hebräisch, chinesisch usw.


verschiedene Werte für list-style-type ansehen …
ul.first  {list-style-type: disc;}
ul.second {list-style-type: circle;}
ol.first  {list-style-type: decimal;}
ol.second {list-style-type: lower-roman;}

frei wählbare Aufzählungszeichen[Bearbeiten]

Mit CSS3 sollen auch eigene Aufzählungszeichen durch die Angabe einer Zeichenkette, etwa list-style-type: "P"; oder list-style-type: "Punkt"; festgelegt werden können.

  • CSS 3.0
  • Chrome
  • Edge
  • Firefox
  • Opera
  • Leer

Details: caniuse.com

frei wählbare Aufzählungszeichen ansehen …
/* Variante mit string */
.zeichenkette {
  list-style-type: "♥ ";
}

/* Variante mit at-Regel */
@counter-style box {
  system: cyclic;
  symbols: '\25FD ';
  suffix: ' ';
}

.symbols {
  list-style-type: box;
}

Mit dieser Methode können Sie (allerdings nicht im IE9-11 und im Safari) ein beliebiges Zeichen oder eine Zeichenkette als Aufzählungszeichen verwenden. Eine weitere Formatierung ist allerdings nicht möglich.

Diese könnten Sie erreichen, indem Sie die Aufzählungszeichen mit list-style-type: none; ausblenden und durch ein Pseudoelement ersetzen, dass dann unabhängig vom Listenelement gestylt werden kann. Dies wird im nächsten Kapitel Aufzählungszeichen anders gezeigt.

list-style-position[Bearbeiten]

Die Eigenschaft list-style-position bestimmt, ob die mit list-style-type oder list-style-image festgelegten Aufzählungszeichen innerhalb oder außerhalb des Listenelements positioniert werden.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0

Folgende Angaben sind möglich:

  • inside Aufzählungszeichen innerhalb des Listenelements, nur erste Zeile wird eingerückt
  • outside (Standardwert) Aufzählungszeichen außerhalb des Listenelements
  • initial setzt Wert auf Standardwert zurück
  • inherit Wert wird vom Elternelement übernommen
Beispiel ansehen …
ul       { max-width: 15em; border: 1px solid blue; }
li       { background-color: lightblue; margin: 2px; }
.outside { list-style-position: outside; }
.inside  { list-style-position: inside; }

Bei einzeiligen Listenelementen ist der Unterschied nur dann wirklich wahrnehmbar, wenn die betreffenden Listen unmittelbar untereinander stehen. Interessant ist diese Eigenschaft erst, wenn die Texte der Aufzählungselemente länger werden, weil es dann tatsächlich unterschiedliche Darstellungsformen gibt. So wird bei list-style-position: inside nur die erste Zeile eingerückt, um Platz für das Aufzählungszeichen zu schaffen.

list-style-image[Bearbeiten]

Die Eigenschaft list-style-image bestimmt eine eigene geeignete Grafik als Aufzählungssymbol.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Folgende Angaben sind möglich:

  • url(Pfad) Wenn die Grafik in einem anderen Verzeichnis steht, müssen Sie den relativen oder absoluten Pfadnamen angeben. Das funktioniert genau so wie beim Einbinden von Grafiken in HTML.
  • none (Standardwert)
Beispiel ansehen …
<style> li { list-style-image: url(Pdf.png); } </style>
<h1>archivierte Rechnungen</h1> <ul> <li><a href="#">2016001</a></li> <li><a href="#">2016002</a></li> </ul>


Beachten Sie: Das Verhalten der Browser weicht leicht voneinander ab. Einige Browser beschneiden die Grafik auf die Höhe des Listenelements, andere vergrößern das Listenelement damit die Grafik vollständig sichtbar ist. Ebenso weicht die Ausrichtung ggf. um einige Pixel ab und kann nicht korrigiert werden. Einen Workaround für diesen Umstand bietet die Verwendung einer Hintergrund-Grafik oder einer Grafik als generierter Inhalt (siehe background-image bzw. content).

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.

weitere Gestaltung[Bearbeiten]

Sie können Aufzählungszeichen mit list-style formatieren, aber z. B. Aufzählungszeichen nicht abweichend von der Textfarbe einfärben.

marker[Bearbeiten]

In CSS3 können die Aufzählungszeichen mit dem ::marker-Selektor ausgewählt und bedingt formatiert werden.[3][4]

  • CSS 3.0
  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Details: caniuse.com

Selektierung des ::marker-Pseudoelements ansehen …
li {
  list-style-type: "♥ ";
  padding-left: .5em;
}

::marker {
  color: red;
  content: "I ♥  ";
  font-size: 1.5em;
}

Für Browser, die die Formatierung noch nicht unterstützen, wird mit list-style-type ein Herz-Zeichen festegelegt. Der ::marker-Selektor ersetzt dieses Zeichen durch die in content festgelegte Zeichenkette, die jetzt mit color eine eigene Farbe erhält.

Da eine Formatierung mit width, padding oder margin noch nicht möglich ist, erhält das li-Element ein padding-left, um einen Abstand zwischen Aufzählungszeichen und Listeninhalt zu haben.


Beachten Sie, dass nur bestimmte Eigenschaften verwendet werden können:

als Pseudoelement[Bearbeiten]

Es gibt aber auch Anwendungsfälle, in denen Sie Aufzählungszeichen völlig unabhängig von Listenelementen formatieren wollen.

Dieses Beispiel sieht auf den ersten Augenblick ähnlich wie oben aus - beruht aber auf einer anderen Technik. Anstelle des mit list-style-image festgelegten 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: '• ';
}

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: "» ";
}


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 Kindelemente 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.



Weblinks[Bearbeiten]

  1. CCSWG: CSS Lists Module Level 3
  2. W3C: alle vordefinierten Aufzählungszeichen und Nummerierungen (CSS2.1)
  3. W3C: Modul Listen und Counter
  4. MDN: ::marker