Startseite » Hilfe & Service » Workshop CSS-Stylesheet Entwicklung » Listenformatierung

Listen geben Ihrer Webseite ein geordnetes und übersichtliches Aussehen. Die Erstellung von Listen ist zwar auch im normalen HTML möglich, wird jedoch seit HTML 4.0 als CSS empfohlen. Grundsätzlich wird zwischen folgenden Arten unterschieden:

Aufzählungslisten
"ul" leitet eine Aufzählungsliste ein (ul = unordered list = unsortierte Liste).
Bei einer Aufzählungsliste werden alle Listeneinträge mit einem Aufzählungszeichen (Bullet) versehen.

nummerierte Listen
"ol" leitet eine Aufzählungsliste ein (ol = ordered list = nummerierte Liste).
Mit "li" beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag).
Bei einer nummerierten Liste werden alle Listeneinträge automatisch durchnummeriert.

Definitionslisten
Die Listeneinträge bestehen aus einem zu definierenden Ausdruck (z.B. ein Fachbegriff) und der zugehörigen Definition.
"dl" leitet eine Definitionsliste ein (dl = definition list = Definitionsliste).
"dt" leitet einen zu definierenden Ausdruck ein (dt = definition (list) term = Ausdruck in der Definitionsliste).
"dd" leitet eine Definition eines Ausdrucks ein (dd = definition (list) definition = Definition in der Definitionsliste).

Listenformatierungen sind auch in gemischter (verschachtelter) Form möglich !

Aufzählungsliste (ul) mit verschachtelen Darstellungstypen disk und circle
(zusätzlich eingerückt mit "padding")
möglich ist auch:
square = für ul-Listen: rechteckiges Bulletzeichen,
none = kein Bulletzeichen, keine Nummerierung.

Mit "list-style-position:outside" (Voreinstellung) und "list-style-position:inside" erreicht man eine Aus- oder Einrückung!
Editieren

Volksfest am 31.September 9 Uhr bis 12 Uhr Biertrinken im Festzelt 12 Uhr bis 13 Uhr Pause 13 Uhr bis 16 Uhr Biertrinken im Festzelt Nachfeier am 3.Oktober 8 Uhr bis 9 Uhr allgemeines Wecken 9 Uhr bis 12 Uhr Biertrinken im Festzelt 13 Uhr bis 16 Uhr grosses Saubermachen ab 16 Uhr, alle begeben sich auf den Heimweg (Open End)

Nummerierte Liste (ol) mit verschachteltem Darstellungstypen decimal und lower-alpha
möglich ist auch:
lower-roman = für ol-Listen: Nummerierung i.,ii.,iii.,iv. usw.
upper-roman = für ol-Listen: Nummerierung I.,II.,III.,IV. usw.
upper-alpha = für ol-Listen: Nummerierung A.,B.,C.,D. usw.
Editieren

Märchenstunde Hänsel und Gretel Rotkäppchen Kinderfilme Schneewittchen Hase und Igel Der kleine Muck Horrorfilme

Aufzählungsliste (ul) mit verschachteltem Darstellungstyp "list-style-image:url([Dateiname])"
Im Beispiel erfolgt mit "list-style-position:inside" die Text-Positionierung!
Hier können Sie eine Grafik für das eigene Bulletzeichen angeben. Als Grafikdateitypen sind, wie in HTML üblich, GIF- oder JPG-Grafiken möglich. In diese Liste wurde unser Logo sowie die Ausrufe-/Fragezeichengrafik verwendet.

Die Liste des Editierfeldes enthält einen Link als Navigationselement.
(Wird nicht vom NC 4.x angezeigt!)
Editieren

HTML CSS-Stylesheets Java Script Browser Microsoft-IE Netscape