CSS, HTML und Javascript mit {stil}

CSS list-style für ul und ol

list-style: Kugeln, Bullets, square, Bilder

CSS list-style wirkt auf HTML-Listen – sowohl auf ungeordnete Listen (HTML ul) als auf geordnete Listen (HTML ol). list-style ist die Kurzform für list-style-type, list-style-image und list-style-position.

Listen bestehen aus zwei Boxen: der Box für die Aufzählungssymbole (marker) und der Box für die Listenelemente.

ul und ol Listen mit zwei Boxen: Aufzählungsbox (marker) und Inhaltsbox

Für den Abstand der Marker-Box war ursprünglich marker-offset vorgesehen. marker-offset hat den Weg zum Standard nicht überstanden.

Anstelle dessen kann text-indent sowohl für ul als auch für ol verwendet werden, um dem Abstand zwischen Bullets bzw. Ordnungszahlen und Aufzählungstext zu verkleinern oder zu vergrößern.

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

Mit text-indent kann der Text in li-Boxen eingezogen oder der Abstand zwischen Bullets bzw. Ordnungszahlen und Aufzählungstext vergrößert werden.

  1. Montag
  2. Dienstag
  3. Mittwoch
  4. Donnerstag
  5. Freitag
<ol style="text-indent: 2em">
   <li>Montag</li>
   …
   <li>Freitag</li>
</ol>

Listen ohne Punkte

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 } // ab IE8

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.

  1. Montag
  2. Dienstag
  3. Mittwoch
  4. Donnerstag
  5. 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(sym.png) }

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 muss das Öffnen des Menüs triggern.

1 2 3 1