Listen gestalten – list-style
Geordnete und ungeordnete Listen gehört zu den wichtigsten Werkzeugen des Webdesigns: Listen stehen nicht nur für Aufzählungen, sondern fast immer stehen Listen hinter den Navigationsmenüs und häufig auch hinter Slideshows.
Listen mit ul und ol sind eine alte HTML-Struktur und die Mittel, Listen mit CSS zu gestalten, sind quasi grenzenlos. Listen werden nicht nur für schlichte Aufzählungen genutzt, sondern sind die Basis für das Menü der Navigationsleiste, für Slideshows mit wechselnden Bildern und Cards.
- list-style-type
- ungeordnete Listen ul mit disk, circle, square, geordneten Liste ol mit Ziffer oder Buchstaben
- list-style-position
- Aufzählungssymbol in die Box für Listenelemente einziehen
- list-style-image
- setzt ein Bild anstelle des Listensymbols in ul-Listen
- none
- kein Listensymbol
list-style ist die Kurzform für alle drei Werte.
-
Mann unter Feuer
Der abgewrackte Navy-Soldat Creasy übernimmt einen Bodyguard-Job in Mexiko.
-
Die Peanuts Der Film
Charlie Brown, Snoopy und Lucy haben ihren ersten Auftritt als computeranimierte Helden.
-
Stargate Origins
1930 kämpfen Professor Langford und seine Tochter noch mit den Rätseln des antiken Artefakts.
ul {
list-style: inside url('arrow-right.svg');
}
CSS ::marker für die Marker-Box
Listen bestehen aus zwei Boxen: der Box für die Aufzählungssymbole (marker) und der Box für die Listenelemente.
::marker stylt die Elemente der marker-box.
- lass Rot sein
- lieber Grün?
- und zu guter letzt
li::marker {
color:cyan;
font-size:3em;
}
::marker wirkt auf alle Merkmale der Schrift (font-size, font-family, …), auf white-space, color, content und sogar auf animation und transition. Safari unterstützt allerdings content, animation und transition nicht.
Für den Abstand der Marker-Box war ursprünglich marker-offset vorgesehen. marker-offset hat den Weg zum Standard nicht überstanden. Stattdessen setzt text-indent einen Abstand zwischen die Listensymbole und den Inhalt des Listeninhalts.
Abstand der Symbole zur Textbox
text-indent ist der Ersatz für das fehlende CSS der Marker-Box und zieht den Text der li-Boxen ein oder vergrößert den Abstand zwischen Bullets bzw. Ordnungszahlen und Aufzählungstext.
-
Mann unter Feuer
Der abgewrackte Navy-Soldat Creasy übernimmt einen Bodyguard-Job in Mexiko.
-
Die Peanuts Der Film
Charlie Brown, Snoopy und Lucy haben ihren ersten Auftritt als computeranimierte Helden.
-
Stargate Origins
1930 kämpfen Professor Langford und seine Tochter noch mit den Rätseln des antiken Artefakts.
ol.hanging {
text-indent: 2em;
}
<ol class="hanging">
…
</ol>
text-indent funktioniert allerdings nur für die erste Zeile eines Blocks. Alle folgenden Zeilen haben wieder den von ul oder ol vorgegebenen hängenden Einzug.
Listen ohne Listenpunkt
Ungeordnete Listen sitzen hinter Navigationsmenüs und die wichtigste Aufgabe für CSS list-style ist das Unterdrücken der Listenkugel oder Bullets.
Die klassische Methode ist list-style: none für das ul-Element.
ul { list-style: none } // Zeigt Listen ohne Punkt an
Alternativ können die Kugeln beim li-Element mit display: block entfernt werden. li führt zwar zu einem Zeilenumbruch, ist aber kein Blockelement, sondern ein list-item.
li { display: block }
Für die Listenelemente li werden dieselben Stile verwendet wie für die Formatierung von Fließtext – font-family, margin, padding, border … li hat keinen eigenen Stil.
Geordnete Listen (ol): Ziffen, Buchstaben, Glyphen
CSS zeigt geordnete Listen mit Ziffern, Buchstaben und Glyphen. Der Listenpräfix ist rechts am Punkt ausgerichtet.
- Montag
- Dienstag
- Mittwoch
- Donnerstag
- Freitag
<ol style="list-style:upper-roman"> <li>Montag</li> <li>Dienstag</li> <li>Mittwoch</li> </ol>
Listen ul mit Bildern
- Montag
- Dienstag
- Mittwoch
ul.symbol { list-style: url(apfel.svg) }
Die Darstellungsgröße des Listenbildes hängt von den Abmessungen des Bildes ab.
Listen linksbündig
Der Abstand der Listenpunkte vom linken Rand des umfassenden Blocks ist keine Eigenschaft für ul oder ol, sondern resultiert aus CSS margin oder padding. Alle Browser ziehen Listenelemente nach rechts ein.
Mit
ul { padding-left: 0; }
rutschen die Inhalte der li-Element nach links unter den umgebenden Text, aber die Bullets bzw. die Ordnungszahlen liegen dann vor dem linken Rand der umfassenden Box.
Mit margin-left: 0.6em rutschen die Listenkugeln bzw. die Ordnungszahlen an den linken Rand des Texts.
CSS für Listitems in Navigationsmenüs
Dank der hierarchischen Struktur und der einfachen Verschachtelung ist die Kombination von ul- und li-Tags zu einem beliebten Werkzeug für die Navigation geworden. Selbst aufklappende Navigationsmenüs sind mit einfachen CSS-Regeln, einer Prise CSS transition, aber ohne Javascript möglich.
ul.demo ul {
position:absolute;
height:0; max-height: 0;
transition: max-height 1s;
}
ul.demo li:hover ul {
height:auto;
max-height: 450px;
}
Für die Menüs auf kleinen Monitoren mit Touchscreen reicht CSS alleine nicht, denn hier gibt es kein Hovern mit der Maus. Ein Javascript-Event wie ontouch oder onclick müsste das Öffnen des Menüs triggern.
Auf kleinen Monitoren setzt das Webdesign heute anstelle von Drop-Down-Menüs vorzugsweise ein Hamburger-Icon und hält das Navigationsmenü der Seite schlicht und einfach.
