Quantcast
Channel: Webmaster-Haus » Georg
Viewing all articles
Browse latest Browse all 10

Gestaltung von Listen mit HTML und CSS

$
0
0

In dem Beitrag Listen mit HTML und CSS wurde beschrieben, wie Listen aufgebaut und grundlegende Einstellungen vorgenommen werden. Ergänzend zu diesem Beitrag folgen nun die verschiedenen Style und Positionseigenschaften von Listen und ihren Elementen.

1. Eigenschaften von Listen (“list-style-type”)

Standard:

ul { list-style-type:Eigenschaftswert; }
Wert: Beispiel: Beschreibung:
armenian
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Armenische Aufzählung
(ordered list)
circle
  • Listeneintrag
  • Listeneintrag
  • Listeneintrag
  • Listeneintrag
Kreis
(unordered list)
cjk-ideographic
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Ideographische Nummerierung
(ordered list)
decimal
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Dezimal Zahlen
(ordered list)
decimal-leading-zero
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Dezimal Zahlen mit führender Null
(ordered list)
disc
  • Listeneintrag
  • Listeneintrag
  • Listeneintrag
  • Listeneintrag
gefüllter Kreis
(unordered list)
georgian
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Georgische Zahlen
(ordered list)
hebrew
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Hebräische Zahlen
(ordered list)
hiragana
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Nummerierung Japanisch
(ordered list)
(a, i, u, e, o, ka, ki, … )
hiragana-iroha
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Nummerierung Japanisch
(ordered list)
(i, ro, ha, ni, ho, he, to, … )
katakana
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Nummerierung Japanisch
“Großbuchstaben”
(ordered list)
(A, I, U, E, O, KA, KI, … )
katakana-iroha
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Nummerierung Japanisch
“Großbuchstaben”
(ordered list)
(I, RO, HA, NI, HO, HE, TO, … )
lower-alpha
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Kleinbuchstaben
(ordered list)
upper-alpha
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Großbuchstaben
(ordered list)
lower-greek
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Griechische Kleinbuchstaben
(ordered list)
lower-latin
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Römische Kleinbuchstaben
(ordered list)
upper-roman
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Römische Großbuchstaben
(ordered list)
lower-latin
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
lateinische Kleinbuchstaben
(ordered list)
upper-latin
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Lateinische Großbuchstaben
(ordered list)
square
  • Listeneintrag
  • Listeneintrag
  • Listeneintrag
  • Listeneintrag
Rechteck
(unordered list)
none
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Kein Aufzählungszeichen

 

2. Positionierung (“list-style-position”)

Durch diese Eigenschaft kann man bestimmen, ob sich die Aufzählungszeichen innerhalb oder ausserhalb des Textflusses befinden.

ul { list-style-position:Eigenschaftswert; }
Wert: Beispiel: Beschreibung:
inside
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Innerhalb des Textflusses
outside
  1. Listeneintrag
  2. Listeneintrag
  3. Listeneintrag
  4. Listeneintrag
Ausserhalb des Textflusses

Nach oben


Viewing all articles
Browse latest Browse all 10

Latest Images

Trending Articles





Latest Images