Sie sind hier: Home > HTML & CSS > Listen ...

Listen mit CSS

Stand vom 12.03.2002
HTML hat als Auflistungstyp nur eine Variante. Mit CSS 1 und CSS 2 werden jedoch weitere Listentypen, und Gestaltungsmöglichkeiten eröffnet.

Fachbegriffe
 Linktipps
 GPS Navigation   Webhosting inkl. Domain für Einsteiger und Profis.   AWD Erfahrung

Um einfache Auflistungen zu erzeugen gibt es in HTML zwei Tags. <ol> wird für numerische Listen verwendet, <ul> dagegen für Listen mit "Punkten" oder "Bullets" als Auflistungssymbol.

Zunächst die <li> Listen

  • Erstes...
  • Zweites...
  • Drittes...

Wie Sie sehen sollten, hat diese Liste, im Vergleich zu "normalen" vordefinierten Listen einen Bullet, welches nicht ausgefüllt ist.

<ul style="list-style-type:circle">
<li> Erstes...</li>
<li> Zweites...</li>
<li> Drittes...</li>
</ul>

Der CSS Befehl list-style-type definiert den Typ der Liste. In diesem Fall ist circle als Attribut gewählt.

Weitere Elemete:

list-style-type:square

  • Erstes...
  • Zweites...
  • Drittes...

list-style-type:disc

  • Erstes...
  • Zweites...
  • Drittes...

Eine eigene Listengrafik, oder Bullet können Sie ebenfalls mit CSS einsetzen. Hierzu wird das CSS Sprachelement list-style-image in Anspruch genommen.

  • Erstes...
  • Zweites...
  • Drittes...

<ul style="list-style-image:url(../images/biggrin.gif)">
<li>Erstes...</li>
<li>Zweites...</li>
<li>Drittes...</li>
</ul>

Der Pfad zum Bullet-Bild wird mit url() angegeben.


Nun die <ol> Aufzählungen:

  1. Erstens...
  2. Zweitens...
  3. Drittens...

<ol style="list-style-type:decimal">
<li>Erstens...</li>
<li>Zweitens...</li>
<li>Drittens...</li>
</ol>

Die Angabe, wie die Liste aussehen soll erfolgt über list-style-type, und dem Wert. Im folgenden werden ihnen einige dieser Typen vorgestellt.

  1. Erstens...
  2. Zweitens...
  3. Drittens...

<ol style="list-style-type:lower-roman"></ol>

Mit upper-roman ist die gleiche Aufzählung nur groß geschrieben.

  1. Erstens...
  2. Zweitens...
  3. Drittens...

<ol style="list-style-type:lower-alpha"></ol>

Mit upper-alpha ist die gleiche Aufzählung nur groß geschrieben.

Es gibt weitere Typen für Listen, diese werden bisher jedoch nur vom Netscape 6.1 interpretiert.

(tf)