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

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.

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: