 |
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:
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):
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
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:
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.
|
|
|
|
Sie wollen diese Seite ausdrucken? Dafür haben wir eine spezielle Druckversion ohne grafische Elemente entwickelt! |
|
|
Einführung in CSS bei HTMLWorld.
|
|
