Listen
Listen sind ein ausgezeichnetes Mittel um Stichworte aufzählend, Punkt für Punkt zu ordnen und zusammengefasst zu präsentieren. Eine Hierarchie ist dabei gewollt, entweder durch vorangestellte Zahlen oder in der Reihenfolge der Leserichtung. Dank CSS kann ich Listen endlich weniger einrücken, die Bullets davor dezenter gestalten, zu Pfeilen wandeln oder ganz weg lassen. Ich kann Listeneinträge sogar nebeneinander darstellen.
Ausrücken
margin-left: padding-left:
Diese Liste soll nicht bzw. weniger eingerückt werden. Die Angaben für
Margin und Padding spielen dabei zusammen.
Vorteile und Nachteile von CSS:
- Zentrale Steuerung der Styles, einmal das StyleSheet ändern, ändert die Styles in allen verbundenen Dokumenten
- Trennung von Stiel und Inhalt
- Viele Inline-Stile müssen mühsam gesucht werden
- Unterschiedliche Browser interpretieren Styleangaben immer noch unterschiedlich oder gar nicht
.bu1 { margin-left:0; padding-left:0; } (Dem ul-Tag zuordnen. Der Wert 0 erzeugt schon einen Minus-Effekt!)
Einrücken
list-style-position:
- Mehrzeiliger Text wird unter die Aufzählungszeichen umgebrochen, also die Listen-Punkte rücken nach innen durch folgende Anweisung (Damit der Effekt eintritt, muss eventuell die Seitenbreite verringert werden, um einen Zeilenbruch im Listenelement zu erzeugen.):
-
<ul style="list-style-position:inside"> -
Hingegen ändert der Wert
outsidenichts, bzw. sorgt für den Normalzustand. Eine Pixelangabe ist hier nicht vorgesehen.
Bullets ändern
list-style-type:
Liste ohne Bullets
- Listenzeile eins
- Listenzeile zwei
- Listenzeile drei
.bu2 { list-style-type:none; } (dem li-Tag zugeordnet)
Liste mit anderen Bullets
- Listenzeile eins
- Listenzeile zwei
- Listenzeile drei
.bu3 { list-style-type:square; } /* Quadrat */
.bu4 { list-style-type:disc; } /* Scheibe */
.bu5 { list-style-type:circle; } /* Ring */
Bildchen als Bullets
list-style-image:
- Listenzeile eins
- Listenzeile zwei
- Listenzeile drei
.bu6 { list-style-image: url(images/butn_1.gif) } (dem ul-Tag oder li-Tag zugeordnet)
Zebraliste
:nth-child(odd)
- > Listenzeile eins
- > Listenzeile zwei
- > Listenzeile drei
- > Listenzeile vier
- > Listenzeile fünf
Jedes zweite (ungerade) Listenelement auszeichnen, das geht seit CSS 3:
/* oder jedes 2. gerade (even) */
.zebra li:nth-child(odd) {...};
Siehe auch bei den Tabellen
Liste mit Titel
:first-child
- Vorteile und Nachteile von CSS:
- Zentrale Steuerung der Styles
- Trennung von Stiel und Inhalt
- Inline-Stile müssen mühsam gesucht werden
- Browser interpretieren Styleangaben unterschiedlich
Der erste Listeneintrag wird zur Überschrift. Der Klasse zuordnen. Dieser Selektor ist CSS3.
.child1:first-child { list-style-type:none; color:#A7A7A7; font-weight: bold;}
Definitionsliste
display:block
Definition und Inhalt auf einer Zeile (an Stelle einer Tabelle mit 2 Kolonnen):
- 1999
- Letztes Jahrhundert
- 2000
- Dieses Jahrhundert
- ab 2100
- Kommendes Jahrhundert
CSS Element-Style:
dt { display: block; width: 120px; float: left; font-weight: bold; color:#666; }
dd { display: block; margin: 0 0 12px 120px; width: 360px; }
Horizontale Liste
display:inline
Schon fast eine Navigationsleiste. Die Listeneinträge werden ohne Aufzählungszeichen dargestellt, alle Listeneinträge befinden sich auf einer Linie durch die Angabe display:inline;
- · Listenzeile eins ·
- · Listenzeile zwei ·
- · Listenzeile drei ·
Achtung! Das funktioniert nur, wenn die Listenzeilen mit </li> abgeschlossen werden (strict HTML oder xHTML).
CSS: ul.horizontaleliste li { display:inline; background-color: goldenrod; }
HTML: <ul class="horizontaleliste">
Das Styling der Navigation gilt dem a-Tag!
Siehe auch Links
Oder Navigationen
Check den Code.