Grundlagen CSS
Schöne Listen leicht gemacht
Wie oft kommt es vor, dass in einem HTML-Dokument mit List-Elementen gearbeitet wird. Sei es für eine Aufzählung im Fliesstext oder auch für die Gestaltung eines Menues. Gerade Zweitgenanntes erfreut sich heutzutage allgemeiner Beliebtheit, da Menues in Listenform im Allgemeinen von den Suchmaschinen gut gefunden und interpretiert werden. Wir wollen uns in diesem Kapitel ein wenig damit beschäftigen, wie wir Listen in ein gefälliges Format bekommen - also unser bisher Erlerntes und einige neue Dinge mit einbringen, um ul- und ol-Elemente zu gestalten.
Listenformatierung
Kapitel 13
Wie wir eine Liste darstellen wollen, bestimmen wir in der CSS mit der Eigenschaft list-style-type. Als Wertzuweisungen stehen uns folgende Angaben zur Verfügung: bei OL-Listen z.B. none (keine Nummerierung), decimal (erzeugt in der Auflistung Ziffern wie 1., 2., 3. etc.), lower-roman (erzeugt kleine, römische Zahlen wie i., ii, iii, etc.), oder auch upper-roman ( hier werden "normale" römische zahlen gebildet, wie I., II., III., etc.). Desweiteren kan man auch eine alphabetische Aufzählung definieren mit lower-alpha (Kleinbuchstaben: a., b., c., etc.) und upper-alpha (Grossbuchstaben: A., B., C., etc.).
Beispiel
(Verschiedene OL-Listen)
Normale, numerische Aufzählung - die Anweisung:
ol {list-style-type:decimal; }
Das Ergebnis:
- Erster Punkt
- Zweiter Punkt
- Dritter Punkt
- usw.
Liste mit römischen Zahlen - die Anweisung:
ol {list-style-type:upper-roman; }
Das Ergebnis:
- Erster Punkt
- Zweiter Punkt
- Dritter Punkt
- usw.
Oder eine Liste alpabetische Auflistung - die Anweisung:
ol {list-style-type:lower-alpha; }
Das Ergebnis:
- Erster Punkt
- Zweiter Punkt
- Dritter Punkt
- usw.
Eigentlich doch ganz einfach, oder? Und genau so einfach verhält es sich auch bei den Bulletlisten (ul-Listen). Dabei sind Werte zugelassen wie: circle (rundes Bulletzeichen), square (rechteckiges Bulletzeichen), disc (Dateisymbol) oder none (ohne Bullet).
Beispiel
(Verschiedene UL-Listen)
Liste mit rundem Bulletzeichen - die Anweisung:
ul {list-style-type:circle; }
Das Ergebnis:
- Erster Punkt
- Zweiter Punkt
- Dritter Punkt
- usw.
Liste mit rechteckigem Bulletzeichen - die Anweisung:
ul {list-style-type:square; }
Das Ergebnis:
- Erster Punkt
- Zweiter Punkt
- Dritter Punkt
- usw.
Liste mit Dateisymbol - die Anweisung:
ul {list-style-type:disc; }
Das Ergebnis:
- Erster Punkt
- Zweiter Punkt
- Dritter Punkt
- usw.
Das wären die Angaben zur grundsätzlichen gestaltung einer Auflistung. Zusätzlich kann nun noch mit der Angabe list-style-position kann bestimmt werden, ob nachfolgende Zeilen eingerückt werden sollen. Dazu können die Werte inside (eingerückt) oder outside (ausgerückt) zur Anwendung kommen. Wie sieht denn das in der Praxis aus?
Beispiel
(Verschiedene UL-Listen)
Liste eingerückte Zeile - die Anweisung:
ul {list-style-position:inside; }
Das Ergebnis:
- Hier gebe ich jetzt einen etwas längeren Text ein, damit der Effekt, den diese Anweisung erzeugt, ein bisschen deutlicher wird.
- Zweiter Punkt
- Dritter Punkt
- usw.
Liste ausgerückte Zeile - die Anweisung:
ul {list-style-position:outside; }
Das Ergebnis:
- Hier gebe ich jetzt einen etwas längeren Text ein, damit der Effekt, den diese Anweisung erzeugt, ein bisschen deutlicher wird.
- Zweiter Punkt
- Dritter Punkt
- usw.
Wie man erkennen kann, hat die Anweisung inside oder outside bei mehrzeiligen Listenpunkten den Effekt, dass das Bulletzeichen etweder auf der gleichen Einrückposition zu sehen ist wie der Text, oder nach aussen hin "abgesetzt" erscheint.
Eigentlich ist damit bereits alles gesagt, wenn ... Ja, WENN es da nicht noch eine weitere Variante gäbe. Vielleicht sind Ihnen die "Standard-Listenzeichen" ja zu langweilig und sie wollen selbst gestalterisch tätig werden und Ihrer Liste ein eigenes Bulletzeichen zuweisen. Nun, auch dafür gibt es Lösungen: Mit der Eigenschaft list-style-image läßt sich eine eigene Grafik bei ul-Listen einbinden. Dazu muß als Wert eine URL als Pfad zu der Grafik angegeben werden, die eingebunden werden soll. Auch hier gelten wieder die allgemeinen HTML-Regeln für relative und absolute Pfadangaben.
Beispiel
(Liste mit eigenem Bulletzeichen)
Die Anweisung:
ul { list-style-image:url(eigenesbullet.jpg); }
Das Ergebnis:
- Erster Punkt
- Zweiter Punkt
- Dritter Punkt
- usw.
Hier haben wir einen kleinen, selbstgebauten Pfeil als Bulletzeichen verwendet, der hier anstatt der standardmässigen Zeichen in der Auflistung erscheint. Dieses ist vor allem später, bei der Gestaltung komplexer Navigationsmenues in Listenform von grossem Nutzen.
Nun haben wir uns bereits einige Zeit mit dem Formatieren einzelner HTML-Elemente beschäftigt, um diesen ein bestimmtes Aussehen zu verpassen. Damit wir sie in unserem Dokument nun auch sinnvoll einsetzen können, müssen wir auch die Positionen bestimmen, an denen sie erscheinen sollen. Und das wird das Thema...