Listen

Listen bei selfthtml

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

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

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
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
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;}

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

Navigationen

Listen sind das adäquate Mittel, um Navigationsmenüs darzustellen. Im folgenden einige weitere Beispiele:

Siehe dazu auch folgende Beispiele