Frage stellen
Formatierung der Listen
Die folgenden CSS-Eigenschaften dienen speziell zur Formatierung von Listen, also <ol> und <ul> Elementen.
Listentyp
Die Art der Darstellung einer Liste läßt sich in CSS mit der Eigenschaft list-style-type bestimmen. Dabei sind für ol-Listen folgende Werte möglich: decimal (1., 2., 3. etc.), lower-roman (i., ii, iii, etc.), upper-roman (I., II., III., etc.), lower-alpha (a., b., c., etc.), upper-alpha (A., B., C., etc.) und none (keine Nummerierung). Für ul-Listen, also Bulletlisten sind folgende Werte möglich: circle (rundes Bulletzeichen), square (rechteckiges Bulletzeichen), disc (Dateisymbol als Bulletzeichen) und none (kein Bulletzeichen). Ein Beispiel:
ul { list-style-type:square; }
Einige Beispiele wie das aussehen kann:
- Dies ist eine Liste mit
- quadratischen Bulletzeichen
- Dies ist eine nummerierte Liste
- bei der die Angabe list-style-type:upper-alpha
- verwendet wurde.
- Bei dieser Bulletliste wurde ein Dateisymbol
- als Bulletzeichen verwendet.
- Dieser Typ wird von vielen Browsern nicht korrekt dargestellt.
Listeneinrückung
Mit der Angabe list-style-position kann bestimmt werden ob nachfolgende Zeilen innerhalb eines Listenpunktes eingerückt werden sollen oder nicht. Möglich Werte sind: inside (eingerückt) und outside (ausgerückt, also die Voreinstellung). Ein Beispiel:
ol { list-style-position:inside; }
Die Angabe hat folgende Wirkung:
- Die Angabe inside
hat bei mehrzeiligen Listenpunkten diesen Effekt
Wie zu sehen ist wird die 2. Zeile nicht mehr wie sonst üblich um den gleichen Wert eingerückt wie die erste Zeile. Netscape 4 interpretiert diese Angabe allerdings nicht.
eigene Bulletgrafik
Mit der Eigenschaft list-style-image läßt sich eine eigene Grafik bei ul-Listen verwenden. Hierbei muß als Wert eine url als Pfad zu der Grafik übergeben werden. Es gelten dabei die üblichen Regeln für relative und absolute Pfade in HTML. Ein Beispiel:
ul { list-style-image:url(bullet.png); }
Dabei kann sich folgendes Problem ergeben: Verwendet man eine externe CSS-Datei die in einem anderen Verzeichnis liegt als die HTML-Datei die diese CSS-Datei verwendet, werden relative Pfadangaben von manchen Browsern in Relation zum Pfad der CSS-Datei gesehen und von anderen Browsern in Relation zum Pfad der HTML-Datei. Zur Lösung des Problems sollten entweder CSS- und HTML-Datei immer im gleichen Ordner liegen oder die referenzierte Grafik liegt im selben Ordner wie die CSS-Datei (das funktioniert nach meinen Tests problemlos) oder der Pfad wird einfach mit absoluter Adresse angegeben. Netscape 4 interpretiert diese Angabe nicht.