CSS » Listen formatieren
Listen können besonders für ein übersichtliches Textlayout sehr hilfreich sein.Damit die Listen aber auch optisch ansprechend sind und den eigenen Vorstellungen entsprechen, können sie über CSS angepasst werden.
Kommen wir als erstes zu den Auflistungszeichen. Dazu gibt es das Attribut list-style-type. Als Listentyp können jetzt verschiedene, mehr oder weniger bekannte Typen angegeben werden.
Hier ist ein Übersicht der wichtigsten Typen:
- none (kein Aufzählungszeichen)
- circle (Kreis; nur Rahmen)
- square (Quadrat)
- disc (gefüllter Kreis)
- decimal (dezimal Zahlen: 1. 2. 3. ...)
- upper-roman> (römische Zahlen: I. II. III. ...)
Wenn du dich für einen Listentyp entschieden hast, kann die entsprechende Liste beispielsweise über ein style="" angepasst werden.
<ul style="list-style-type: square;">
<li>Vor diesem Text würde ein Quadrat erscheinen</li>
</ul>
<li>Vor diesem Text würde ein Quadrat erscheinen</li>
</ul>
Falls du ein eigenes Aufzählungszeichen verwenden möchtest, kannst du dieses als Grafik erstellen und dann als Aufzählungszeichen festlegen.
Alles was du dazu benötigst, ist das CSS Attribut list-style-image. Als Angabe wird dann die URL zu der entsprechenden Aufzählungsgrafik gesetzt.
<ul style="list-style-image: url(grafiken/list.jpg);">
<li>Vor diesem Text erscheint nun eine individuelle Grafik</li>
</ul>
<li>Vor diesem Text erscheint nun eine individuelle Grafik</li>
</ul>
Dies waren im Prinzip schon die wichtigsten Attribute speziell für Listen.
Um nun aber auch noch die Einrückung der Listenelemente festzulegen, kann eine margin>-Angabe gemacht werden.
Da die Listenelemente ja nur von links eingerückt werden sollen, verwenden wir die Angabe margin-left. Das könnte dann beispielsweise so aussehen:
<ul>
<li style="margin-left: 20px;2>Dieser Listeneintrag hat einen linksseitigen Abstand von 20 Pixeln</li>
</ul>
<li style="margin-left: 20px;2>Dieser Listeneintrag hat einen linksseitigen Abstand von 20 Pixeln</li>
</ul>
Als letztes können wir nun noch den Abstand der einzelnen Listeneinträge voneinander festlegen. Dazu verwenden wird das CSS Attribut padding.
Da wir dazu aber nur einen oberen und unteren Abstand benötigen, benutzen wir die genaueren Angaben padding-top und padding-bottom.
Hier ist ein kleines Beispiel dazu:
<ul>
<li style="padding-top: 2px; padding-bottom: 2px;">Zwischen diesen beiden Einträgen ist ein</li>
<li style="padding-top: 2px; padding-bottom: 2px;">Gesamtabstand von 4 Pixeln</li>
</ul>
<li style="padding-top: 2px; padding-bottom: 2px;">Zwischen diesen beiden Einträgen ist ein</li>
<li style="padding-top: 2px; padding-bottom: 2px;">Gesamtabstand von 4 Pixeln</li>
</ul>
Damit sind wir auch schon wieder am Ende dieses Tutorials. Natürlich lassen sich auch noch diverse andere CSS Attribute auf Listen anwenden, ich denke aber, dass in diesem Tutorial die wichtigsten genannt wurden.
Jetzt solltest du in der Lage sein, deine Listen so zu formatieren, wie es dir gefällt.
· zurück zur Übersicht