HTML/Tutorials/Listen/Gestaltung mit CSS

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

Listen haben ihre eigene Semantik und je nach Browser kann die Standard-Darstellung unterschiedlich sein. 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

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

list-style-type

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]

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

Mit CSS3 können auch eigene Aufzählungszeichen durch die Angabe einer Zeichenkette, etwa list-style-type: "P"; oder list-style-type: "Punkt"; festgelegt werden. Die breite Browserunterstützung für freie Strings und @counter-style ist seit Safari Version 17 gegeben, die symbols() Angabe wird bisher (Januar 2024) nur von Firefox unterstützt. Bitte überprüfen Sie die caniuse-Informationen, bevor Sie damit Webseiten gestalten.

Browserunterstützung
caniuse.com
Ein frei gewähltes Zeichen für alle Einträge ansehen …
/* Variante mit string */
.zeichenkette {
  list-style-type: "♥ ";
}

Mit list-style-type kann das Aufzählungszeichen für die Liste festgelegt werden, eine Farbzuweiseung trifft ebenfalls auf die Liste, d.h. auf Aufzählungszeichen und die Listenelemente selbst zu.

Browserunterstützung
caniuse.com
Symbolliste mit @counter-style Regel ansehen …
@counter-style box-set {
  system: cyclic;
  symbols: '◽' '◾' '▹';
  suffix: '  ';
}
.symbols {
  list-style-type: box-set;
}

Mehr zu @counter-style finden Sie im Artikel CSS/@-Regeln/@counter-style.

Browserunterstützung
caniuse.com
anonyme Liste von Symbolen ansehen …
.anon-symbols {
   list-style-type: symbols(cyclic '♣' '♠' '♥' '♦');
}

Mit diesen Methoden können Sie entweder genau ein beliebiges Zeichen oder eine Zeichenkette als Aufzählungszeichen verwenden, oder eine eigene Abfolge von Aufzählungszeichen definieren. 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, das dann unabhängig vom Listenelement gestylt werden kann. Dies wird im nächsten Abschnitt Aufzählungszeichen anders gezeigt.

list-style-position

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.

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

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

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

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

marker

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

Browserunterstützung
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 festgelegt. 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:

list-item

CSS definiert einen Counter namens list-item, der automatisch von <ul> und <ol> geschachtelt und zurückgesetzt und von <li> automatisch inkrementiert wird. Sie können in einem ::marker-Pseudoelement in der content-Eigenschaft darauf Bezug nehmen.

Listennummerierung mit counter(list-item) ansehen …
ul {
   list-style-type: lower-latin;
}
li {
  padding-left: 0.5em;
}
li::marker {
  content: '(' counter(list-item) ')  ';
  color: red;
}

Diese Liste wird mit Zahlen durchnummeriert, obwohl als list-style-type der Wert lower-latin angegeben wurde. Diese Eigenschaft findet aber bei einer eigenen Erzeugung des Marker-Inhalts keine Anwendung. Um einen bestimmte Listenstil zu forcieren, ist der zweite Parameter von counter() zu verwenden:

Listennummerierung mit counter(list-item) ansehen …
li::marker {
  content: '(' counter(list-item, lower-latin) ')';
  color: red;
}

Klicken Sie auf "Ausprobieren" und versuchen Sie es!

als Pseudoelement

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.

SVG als Pseudoelement

Beispiel ansehen …
.pseudo li,
.pseudobackgr {
	list-style: none;
	margin-bottom: 1em;
	}
.pseudo li::before {
	content: url('https://wiki.selfhtml.org/images/c/cd/Bandeira_do_Estado_do_Paran%C3%A1.svg');
	vertical-align: -10px;
    margin-right: 1.5em;
	height: 1em;
	width: 1.5em;		
	display:inline-block;				
	}	
.pseudobackgr li::before {
  content: ' ';
  background-image: url('https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg');
  background-size: 2em 1.33em;
  margin-right: 1.5em;
  height: 1.33em;
  width: 2em;		
  display:inline-block;				
}

horizontale Navigationsleiste

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.

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

Beispiel 
li:not(:first-child)::before {
    content: '• ';
}

Brotkrumen-Navigation

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.

Eine Liste als Zeitstrahl

Im nächsten Beispiel werden zeitliche Ereignisse, die man sonst oft tabellarisch darstellt (z.B. in einem tabellarischen Lebenslauf) in einem Zeitstrahl realisiert.

Beispiel 
#zeitleiste {
  position: relative;
  margin-left: 7.5em;
  list-style-type: none;
}	

#zeitleiste::before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  top: 0;
  background: #3983ab;
  width: 0.4em;
}

#zeitleiste::after {
  position: absolute;
  content: "";
  bottom: -1.3em;
  left: -0.8em;
  width: 0;
  height: 0;
  border-width: 1em;
  border-style: solid;
  border-color: #3983ab transparent transparent transparent;
}

Als HTML-Grundgerüst verwenden wir eine unsortierte Liste, deren Aufzählungszeichen wir mit list-style-type: none; unterdrücken.
Mit den Pseudoelementen :before: und :after werden der Zeitstrahl und der in die Zukunft gerichtete Pfeil dargestellt. Der Pfeil besteht aus einem 0px großen Feld, das nur einen oberen farbigen Rand hat. Da die rechten und linken Seiten einen transparenten Rand haben, entsteht so ein pfeilförmiges Dreieck.


Beispiel 
#zeitleiste >li::before{
  position: absolute;
  content: "";
  width: 1em;
  height: 1em;
  left: -0.5em;  
  border-radius: 50%;
  border: 0.2em solid #3983ab;
  background: #dfac20;
} 

#zeitleiste >li {
  margin-bottom: 3em;
}

Vor die einzelnen Listenelemente wird nun ein gelber Punkt mit blauem Rand gesetzt. Er wird direkt auf der blauen Linie positioniert.


Der fertige Zeitstrahl ansehen …
li h3 {
  margin: -1em 0 0.2em;
}

time {
  display: block;
  font-weight: bold;
  margin-left: -10em;
  width: 6.5em;
  text-align:right;
}

<ul id="zeitleiste">
  <li><time datetime="1995-06-04">04.06.1995</time>
    <h3>SelfHTML geht online.</h3>
  </li> 
  <li><time datetime="1998-01-01">1998</time>
    <h3>Das Self-Forum</h3>
        Das <strong>Forum</strong> beantwortet Fragen und 
        wird vom Tummelplatz technikaffiner Webialisten zur Community.
  </li>
  ...

In HTML 4 konnten Listenelemente nur inline-Elemente wie span usw. enthalten.

In HTML5 ist es auch möglich Überschriften und andere Elemente zu verwenden:

  • Das time-Element beinhaltet die Zeitangaben und wird durch einen negativen margin-left links neben die Zeitleiste geschoben.
  • Die Überschriften bekommen semantisch richtig eine h3-Überschrift
  • der Text ist normaler Teil des Listenelements li


Listen mit Kindelementen

Listen können auch aus Textabsätzen mit mehreren Elementen bestehen. In Kombination mit einem Bild ist diese Anordnung auch als Media-Objekt bekannt.

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.

Beispiel 
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: table-cell

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.

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

Empfehlung: Besser ist es jedoch fortschrittlichere und flexiblere Gestaltungsmöglichkeiten wie z.B. Grid Layout zu verwenden, wie hier:


Weblinks

  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
Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Tutorials/Listen/Gestaltung_mit_CSS&oldid=99696“