Upline: Infos & Dokus Programmierung Webentwicklung css - Cascading Stylesheet HowTo

Listenformatierung

In diesem Beispiel wird zuerst die allgemeine Formatierung (Schriftart, Schriftgröße, Außenabstand) für den Body vorgenommen. Anschließend erfolgt die Definition des Erscheinungsbildes der Listenelemente. Hierfür wird als erstes das ul-Tag angepaßt. Mit der Eigenschaft list-style kann das Erscheinungsbild des Listenpunktes verändert werden, mit list-style outside url(...) kann auch eine eigene Grafik verwendet werden. Bei der Erstellung einer solchen Grafik empfiehlt es sich, das GIF-Format zu verwenden, da die erzeugten Bilder klein sind und transparente Bereiche ermöglichen. Die Größe des Bildes ist von der verwendeten Schriftgröße abhängig. Die Eigenschaft margin definiert den Außenabstand eines Elements zum übergeordneten Element. Entsprechend ist padding für den Innenabstand vom Inhalt eines Elements zu seinem Rand zuständig. Die Parameter hinter diesen Eigenschaften können auf verschiedene Art und Weise aufgezählt werden. Im Beispiel werden alle vier Richtungen in der Reihenfolge oben/rechts/unten/links verwendet. Abschließend wird bei ul noch die Schriftgröße angepaßt. Um die Ausrichtung der einzelnen Stichpunkttexte in Bezug auf die selbst erzeugte Grafik anzupassen, ist es notwendig, diese ebenfalls mit margin und padding zu positionieren. Hierbei sieht man auch die sonst eher selten verwendete Verwendung von negativen Abständen.

body{
 font-family: verdana;
 font-size:13px;
 margin:0px;
}
ul{
 list-style:outside url(bilder/ulli.gif);
 margin:0px 0px 0px 20px;
 padding:0px 0px 5px 5px;
 font-size:11px;
}
li{
 margin:-2px 0px -2px 0px;
 padding:-5px;
}

Das Ergebnis

Hinweise:

1. Die Definition von margin und padding ist bei ul und li äußerst wichtig, da z.B. der Internet Explorer und der Mozilla Firefox hierfür jeweils andere Standards verwenden. Wärend der eine die Abstände über die Eigenschaft margin regelt, macht der andere dies über padding.
2. Im Beispiel wird als Größenangabe px (Pixel) verwendet. Es handelt sich hierbei um eine absolute Angabe, von der meist abgeraten wird, da eine Schriftgrößenänderung nicht über den Browser möglich ist. Dafür erhält man auf jedem Bildschirm absolut identische Ausgaben, die je nach Pixeldichte/Zoll durchaus auch sehr klein werden können.