CSS List-style • Für Ul Und Ol

• 
• Kontakt
• Impressum
• 🔎

• CSS
• HTML
• Javascript Basis
• Javascript für Webseiten
• Tutorials
• SVG / 3D-Canvas MathML

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-typeungeordnete 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'); } oder anstelle eines Bildes ein Symbol und ::marker für die Farbe ul {list-style: inside "▶ ";} li::marker { color: red; }

CSS ::marker für das Listensymbol

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.

1. Mann unter Feuer

   Der abgewrackte Navy-Soldat Creasy übernimmt einen Bodyguard-Job in Mexiko.

2. Die Peanuts Der Film

   Charlie Brown, Snoopy und Lucy haben ihren ersten Auftritt als computeranimierte Helden.

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

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

• ▶ ✱ Home
  • Javascript
  • Aufbaukurs Javascript
  • HTML Einsteiger
  • CSS Einsteiger
  • Aufbaukurs CSS
  • Responsive Webseiten
• ▶ ✱ Drupal
  • Drupal Administration
  • Drupal Redaktion
• ▶ ✱ WordPress
  • WordPress Installation
  • Administration
  • Redaktion
  • Template-Design
  • Plugin-Programmierung
• ▶ ✱ Impressum
  • Kontakt
  • Anfahrt

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.

Mehr zu Listen und Aufzählungen

• HTML ul und ol für Listen und Aufzählungen
• text-indent Abstand zwischen Listentext und Bullets / Ordnungszahl verändert
• CSS Pseudoklassen :hover, :link, :active, :focus, :visited für Navigationsmenüs mit ul- und li-Elementen

Externe Links

• Listen: Das Wichtigste zum Gestalten von Aufzählungszeichen per CSS
• Listen auf on-design.de
• Farbige Listenpunkte mit CSS ::marker bei kulturbanause.de

Einführung in CSS

• CSS Grundlagen
• CSS einbinden: Datei, Import, style
• @import-Regel: CSS-Datei in CSS laden
• Überblick CSS Eigenschaften
• CSS Konsole: Elemente und Stile untersuchen
• Cascading – die CSS-Kaskade
• Inheritance – Vererbung
• !important Vorschlaghammer der Stylesheets
• CSS vereinfachen: Kurzformen, Gruppen
• Nesting CSS-Regeln verschachteln
• @sope und :scope Stile modularisieren
• CSS Reset, Normalize CSS
• revert und unset CSS zurücksetzen / löschen
• CSS optimieren: Tipps für effizientes CSS
• supports-Regel Abfrage auf Browser-Unterstützung
• Neu in CSS Die nächsten Schritte
• CSS 2024 Was gibts Neues?
• Browser-Präfix und Conditional Comments

Berechnen mit CSS

• CSS Funktionen: Werte berechnen
• calc Breite / Höhe berechnen
• line-clamp • Zahl der Zeilen im Block
• CSS counter • Zähler / Nummerieren
• clamp(), min(), max()
• CSS grid und clamp
• CSS Variablen var() Custom Properties

Selektoren

• Element-, class- und id-Selektoren
• hover, visited, active, focus
• :target interner Anker oder Sprungadresse
• nth-child(n) Index, even/odd, Formel
• CSS je nach Position des Elements im DOM
• CSS :not() Selektor
• :is() / where Selektoren zusammenfassen
• CSS :has() Selektor Parent-Selektor
• ::before ::after content Pseudo-Elemente
• first-letter, first-line, initial-letter – Drop Cap
• CSS elem[] – Attribut-Selektoren
• Kontext-Selektoren div p, div > p, div + p
• h2 + p – Nachbar-Selektoren – Geschwister
• :valid, :invalid Formularfelder
• :hover aber kein :touch

Responsive Webseiten / mobile Geräte

• Breakpoints – Schaltstellen des Layouts
• Media Type Geräteklassen: Screen, Drucker
• Media Queries Größe des Viewports
• Container Queries Größe umfassenden Elements
• Viewport Meta und CSS
• Einfaches responsives Webdesign mit 3 Breakpoints
• Bilder positionieren und zentrieren
• CSS für Video im video-Tag / iframe
• object-fit Bilder anpassen
• iframe CSS

Animation: Transition, Keyframes

• transform: Rotieren, Verzerren, Verschieben
• Rotieren mit transform-origin: Ursprung der Transformation
• Verschieben transform translate
• Verkleinern, Vergrößern transform scale
• transform perspective CSS goes 3D
• Weiche Übergänge transition einfache Animationen
• Kleine Beispiele für transition
• CSS Transition und Animationen auslösen
• CSS @keyframes Animationen
• animation-delay Verzögerter Start der Animation
• CSS Keyframes-Animationen mit Timeline
• Animation Timing Function Easing
• Animation Direction und Fill Mode
• Animation Play State – Pause und weiter

Scrollen, Klicken, Wischen

• overflow • Anzeige übergroße Inhalte
• scroll-behaviour smooth – Weiches Scrollen
• scroll-snap – präzises Scrollen und einrasten
• scrollbar – Scrollleisten oder Rollbalken
• touch action

CSS background und Verlauf

• background • background-color
• Dark Mode die dunkle Seite der Webseite
• background-image – Hintergrundbild
• Mehrere Hintergrundbilder
• background-size
• background-clip • Hintergrund beschneiden
• background-position • Wo sitzt das Hintergrundbild?
• background-repeat • steuert die Wiederholung
• background-attachment scroll, fixed, local
• background-image image-set – responsive Hintergrundbilder
• linear-gradient • Verlauf als Hintergrund
• radial-gradient • Kreisverlauf
• conic-gradient • Konischer Verlauf

CSS color, Transparenz, Filter

• CSS color • für Text, background, border und border-block
• color HSL und HSLA
• color Transparenz / Opacity und HSL-Farben
• Hintergrund-Overlay backdrop-filter und ::backdrop
• Farbrechner HSB zu HSL • und zu RGB / Hex
• mixed-blend-mode Farben überblenden
• text-shadow • Textschatten
• text-stroke • Kontur, Outline
• box-shadow • Box-Schlagschatten
• CSS Filter • Effekte wie in der Bildbearbeitung
• filter: Drop Shadow
• img-rendering Bildqualität / Grafik

CSS Fonts

• font • Kurzschrift
• @font-face • Ladbare Schriften
• font-family • Schriftfamilie
• font-size • Schriftgröße
• font-size em / rem / vw
• font-style • Kursive Schrift
• font-stretch • Dehnen und Stauchen
• font-variant • Kapitälchen, Ziffern, Ligaturen
• font-variant-numeric • Schreibweise von Zahlen
• font-weight • Fette Schrift

Text gestalten

• line-height • Zeilenhöhe
• quotes • Anführungszeichen und Hochkommas
• text-align • Text ausrichten
• CSS text-columns • Spaltensatz
• text-decoration • Links unterstreichen
• text-indent Einziehen
• text-overflow • Text kürzen
• text-transform Großschreibung, Kleinschreibung
• vertical-align • vertikal Ausrichten
• white-space • Leerzeichen
• word-spacing / letter-spacing
• word-wrap Zeilenumbruch erzwingen
• direction | unicode-bidi • Laufrichtung
• writing-mode / text-orientation Text von oben nach unten

Position: Absolut, relativ, float

• position Positionierung
• position:absolute in position:relative
• position: fixed
• position: sticky
• top right bottom left Platzieren
• z-index Elemente überlagern
• float Fließende Positionierung
• clear float beenden

Layout: display:none, display: block, display:flex

• display • block, inline, flex
• display : contents
• display : table CSS-Tabellen
• display : list-item Icon oder Symbol voransetzen
• display : flex Flexbox-Modell
• flex shrink, grow, basis für Flex-Items
• flex : order Reihenfolge der Flex-Items ändern
• flex-direction: column, flex-basis für vertikale Verteilung
• CSS Grid Begriffe und Beispiel
• display: grid Grid-Container
• Ausrichten im Grid-Raster
• grid-template-areas Grid-Raster mit Namen
• Grid repeat(), minmax()

Breite, Höhe und Clip (freistellen)

• width height Breite und Höhe von Elementen
• height Höhe von Layout-Blöcken
• aspect-ratio Seitenverhältnis
• resize Skalieren von Blöcken erlauben
• min-height, max-height • Höhe begrenzen
• min-width, max-width • Breite begrenzen
• visibility Sichtbar / versteckt
• mask-image Motive maskieren / freistellen
• clip-path path() / url() Freiform
• clip-path inset, polygon, circle, ellipse
• CSS shape Text an Form / Kontur ausrichten
• clip • Freistellen / Beschneiden (veraltet)

border, margin, padding

• CSS Box-Modell
• margin • äußerer Abstand
• padding • innerer Abstand
• border und border-block • Sichtbarer Rahmen
• box-sizing Box-Modell intuitiv
• border-image • Rahmen aus Bildern
• border-radius • Abgerundete Ecken
• outline • Extra-Rahmen

Formulare

• input type checkbox / radio für Formularelemente
• appearance für Formularelemente
• CSS für Formulare input, textarea
• Drag & Drop: input type file Datei-Upload
• Formulare gestalten select, range, progress

Tabellen, Maus, Print

• Responsive Tabellen
• table border-collapse
• table border-spacing • empty-cells
• vertical-align • Text ausrichten in Tabellenzellen
• CSS für Tabellen: table-layout, caption-side
• cursor / Mauszeiger
• paged media • CSS für den Druck
• list-style Listen und Aufzählungen
• list-style-image • Bilder für Listen
• list-style-type • Listensymbole
• list-style-position • Einzug von Listen