Listen

HTML geordnete Listen, ungeordnete Listen

Für Listen gibt es zahlreiche Anwendungsmöglichkeiten. Vor allen Dingen bei Navigationen kommen sie zum Einstatz. Mit folgenden CSS Eigenschaften kann man Listen formatieren:

list-style-type
list-style-image
list-style-position
list-style
list::marker Eigenschaften von Listzeichen

Mit der Eigenschaft display kann man Elemente als Listen darstellen oder Listen als Inline Elemente

display: list
display: inline

Listentyp

list-style-type

ul Ungeordnete Listen

Für ungeordnete Listen gibt es die Möglichkeit verschiedene Punkte oder Symbole an den Anfang zu setzen. Diese lassen sich auch per CSS bestimmen.

ul {list-style-type: circle;}

list-style-type für ul
Eigenschaft	Wert	Bedeutung
Standardwert	disc
Vererbbar	ja
Anwendbar	ul
list-style-type	none	kein Zeichem
	circle	ungefüllter Kreis
	square	Quadrat
	disc	gefüllter Kreis

ol geordnete Listen

Für geordnete Listen gibt es in Html verschiedene Möglichkeiten die Art der Nummerierung darzustellen. Auch mit CSS hat man diese und noch mehr Möglichkeiten.

so sieht's aus

list-style-type für ol
Eigenschaft	Wert	Bedeutung
Standardwert	decimal
Vererbbar	ja
Anwendbar	ol
list-style-type	decimal	Dezimal 1,3,4
	lower-alpha	Kleinbuchstaben a, b, c
	upper-alpha	Großbuchstaben A,B,C
	lower-roman	römische Zahlen klein i,ii,iii
	upper-roman	römische Zahlen groß I, I, II
	decimal-leading-zero	Dezimalzahlen mit führender Null, 01, 02, 03
	lower-greek	kleine griechische Buchstaben
	lower-latin	kleine ASCII Zeichen a,b,c
	upper-latin	große ASCII Zeichen A,B,C
	armenian	armenische Zeichen (nicht jeder Browser)
	georgian	gregorische Zeichn (nicht jeder Browser)

Aufzählungszeichen einrücken

list-style-position

Die Aufzählungszeichen stehen normalerweise außerhalb vor dem Text mit list-style-position kann man sie einrücken.

ul {list-style-position: inside}

so sieht's aus

list-style-position
Eigenschaft	Wert	Bedeutung
Standardwert	outside
Vererbbar	ja
Anwendbar	ol / ul / display:list-item
list-style-position	outside	abgesetzte Grafik
list-style-position	inside	eingerückte Grafik

Listengrafik ändern

list-style-image

Anstatt eins der zur Verfügung stehenden Zeichen zu benutzen kann man auch eine eigene Grafik verwenden.

ol {list-style-image: url(img/punkt.jpg)}

so sieht's aus

list-style-image
Eigenschaft	Wert	Bedeutung
Standardwert	none
Vererbbar	ja
Anwendbar	ol / ul / display-list-item
list-style-image	none	abgesetzte Grafik
list-style-image	url	eingerückte Grafik

Kurzform

list-style

Die Kurzform für list- Eigenschaften erfolgt wie immer durch eine Aufzählung der verschiedenen Eigenschaftswerte durch Leerzeichen getrennt. Angaben mit einem Leerzeichen im Wert werden in Anführungzeichen gesetzt. Die Reihenfolge ist egal, man muss nicht zu allen Eigenschaften eine Angabe machen.

ol {list-style:lower-roman inside;}

Listzeichen Eigenschaften `::marker`

Mit dem Pseudoelement ::marker kann man die Listzeichen selbst ansprechen und deren Eigenschaften wie Farbe, Schriftgröße etc. verändern.

li::marker {
  color: red;
}

Darstellung beliebiger Elemente als Liste

display: list-item

Mit der Eigenschaft display und dem Wert list-item ist es möglich andere Elemente als Liste darzustellen.
Aufpassen ! Mit der Eigenschaft margin-left erzeugt man links einen Außenrand. Ohne diesen linksseitigen Außenrand könnte es sein, dass man die Listenzeichen nicht sieht.

div.liste p {display: list-item}

so sieht's aus

<style type="text/css">
  div.punktListe p {
	display: list-item;
	margin-left: 20px;
	list-style-image: url(../../img/punkt1.png);
}
</style>

Darstellung der Listen-Elemente als inline Elemente

display: inline

Für Navigationen sind Listen das richtige Mittel. Nicht immer möchte man eine Navigation untereinander anordnen. Abhilfe schafft man hier mit der Eigenschaft display und dem Wert inline. Die Listenpunkte werden zu inline Elementen und nicht mehr zum Blockelement Liste auf die sich die Listeigenschaften anwenden lassen.

li {display: inline}

Beispiel

Navigation 1 |Navigation 2 | Navigation 3 |

Drop Down Menü | Drop Down 2 | Drop Down 3 | Info Beispiel Position Absolute