• Startseite
• CSS-Tutorials
• CSS-Eigenschaften
• Formate definieren
• Numerische Werte
• Selektoren
• Klassen
• Pseudoformate
• Häufige Fragen
• Layer - Ebenen
• Ebenen erstellen
• Rahmen
• Hintergrund
• Mauszeiger
• Tabellen
• Textformatierung
• Listenformatierung
• Formularelemente
• Farbige Scrollbars
• Seitenübergänge
• Druckerstylesheets
• Grafik-Tutorials

• Downloads
• Support
• Kontakt
• CSS-und Grafik Tutorials
• Referenzen und Showcase
• EcomBiz Partner

Software News

---

Tipp: Was ist neu im SoftwareShop? Infos und Gutscheine abonnieren!

Vorname: *

Nachname: *

E-Mail: *

Passwort: *

Passwort (Wiederh.) *

*) Eingabe obligatorisch

Statistik

---

Sie sind hier: Startseite  » CSS-Tutorials » Listenformatierung

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 verschachtelen 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 verschachtelen 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

Nach oben springen..