HTML/Tutorials/Listen/Gestaltung mit CSS
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.
Inhaltsverzeichnis
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-Zeichencircle, leerer Kreis als Bullet-Zeichensquare, quadratisches Bullet-Zeichennone, kein Bullet-Zeicheninherit, Bullet-Zeichen des Elternelements
- für geordnete Listen (
ol)decimalNummerierung 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, ebensoupper-alpha, Nummerierung A., B., C., D. usw.upper-latin, ebensonone, keine Nummerierunginherit, 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.
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.
/* Variante mit string */
.zeichenkette {
list-style-type: "♥ ";
}
@counter-style box-set {
system: cyclic;
symbols: '◽' '◾' '▹';
suffix: ' ';
}
.symbols {
list-style-type: box-set;
}
.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 Kapitel 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:
-
insideAufzählungszeichen innerhalb des Listenelements, nur erste Zeile wird eingerückt -
outside(Standardwert) Aufzählungszeichen außerhalb des Listenelements -
initialsetzt Wert auf Standardwert zurück -
inheritWert wird vom Elternelement übernommen
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)
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:
.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]
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.
- alle font-Eigenschaften
- color
- content
- text-combine-upright, unicode-bidi und direction
- white-space
- animation und transition
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.
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:
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.
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
.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;
}
Viele Webseiten haben zum Beispiel im Seitenfuß eine kleine einzeilige Navigationsleiste, die semantisch einer (un-) geordneten Liste von Links entspricht.
<ul>
<li><a href="/">Home</a></li>
<li><a href="/impressum">Impressum</a></li>
…
</ul>
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;
}
li:not(:first-child)::before {
content: '• ';
}
Das obige Beispiel mit einer Navigationsleiste kann etwas abgewandelt auch zur Auszeichnung und Darstellung einer sogenannten „Brotkrumen-Navigation“ (bread crumb) verwendet werden:
<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.
#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.
#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;
}
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.
<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>
...
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
Sie können die Kindelemente auch mit display:table-cell oder flexbox positionieren.
<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>
...
li {
display: table;
}
li img {
margin: 0 15px 0 0;
width: 5em;
display: table-cell;
}
li div {
display: table-cell;
}
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.
- CSS/Tutorials/Grid/Einführung
Das Media-Objekt
Weblinks
- ↑ CCSWG: CSS Lists Module Level 3
- ↑ W3C: alle vordefinierten Aufzählungszeichen und Nummerierungen (CSS2.1)
- ↑ W3C: Modul Listen und Counter
- ↑ MDN: ::marker
