Listen mit CSS formatieren

Gelesen bei AboutWebDesign.de
URL: http://www.aboutwebdesign.de/awd/content/1019821642.shtml

Normale Listen sehen schon einmal etwas langweilig aus. CSS stellt entsprechende Möglichkeiten bereit, Listen an eigene Bedürfnisse anzupassen.

Aufzählungszeichen in ungeordneten Listen

Es ist möglich, das Aufzählungszeichen in ungeordneten Listen zu ändern. Die entsprechende CSS-Eigenschaft ist list-style-type. Erlaubt sind die Werte circle (unausgefüllter Kreis), square (Rechteck) und disc (ausgefüllter Kreis).

Beispiel:

• circle
  

• square
  

• disc
  

Der zugehörige Code:

<ul style="list-style-type: circle">
<li>circle
</ul>
<ul style="list-style-type: square">
<li>square
</ul>
<ul style="list-style-type: disc">
<li>disc
</ul>

Aufzählungszeichen in geordneten Listen

Auch in geordneten Listen lässt sich das vor dem Listeneintrag stehende Aufzählungszeichen bestimmen. Die CSS-Eigenschaft ist wieder list-style-type. Erlaubt sind die Werte (diesmal direkt neben dem Beispiel):

1. decimal

1. decimal-leading-zero

1. lower-roman

1. upper-roman

1. lower-alpha

1. upper-alpha

1. lower-greek

1. lower-latin

1. upper-latin

1. hebrew

1. armenian

1. georgian

1. cjk-ideographic

1. hiragana

1. katakana

1. hiragana-iroha

1. katakana-iroha

... wobei die letzten Möglichkeiten für unseren Kulturkreis wohl eher uninteressant sind und z.B. von der deutschen Version des IE 6 auch nicht dargestellt werden.

Ein Bild als Aufzählungszeichen

Man kann auch Bilder als Aufzählungszeichen verwenden:

• Eins
  
• Zwei
  

Die entsprechende CSS-Eigenschaft ist list-style-image. Code-Beispiel:

<ul style="list-style-image: url('http://www.aboutwebdesign.de/awd/pictures/headericon.gif')">
<li>Eins
<li>Zwei
</ul>

Aufzählungszeichen platzieren

Auch die Position des Aufzählungszeichens selbst lässt sich verändern: entweder, es soll vor dem Text (outside) oder im Text selbst (inside) stehen. Die dafür notwendige Eigenschaft ist list-style-position.

Das kann dann so aussehen:

• outside
  
• Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
• dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  

Oder auch so:

• inside
  
• Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
• dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  

Andere CSS-Eigenschaften

Natürlich kann man auch andere CSS-Eigenschaften auf Listen anwenden, die aber nicht Listen-spezifisch sind. So lässt sich beispielsweise der Abstand zwischen zwei Listenelementen oder auch die Einrückung eines Listenelements festlegen:

• margin-left: 40px;
  
• margin-left: 0px;
  
• margin-left: 0px; margin-top: 30px;
  

Fazit

Listen sind eine gute Möglichkeit, Informationen strukturiert anzuzeigen. Mit CSS kann man diese Anzeige ziemlich weitgehend beeinflussen und so an den eigenen Geschmack anpassen.