HTML, CSS, PHP, MySQL

html-php.de

HTML & CSS Stylesheets Referenz JavaScript PHP MySQL Sonstiges Gästebuch Inhalt Impressum

[ Listen definieren ] [ Unnummerierte Listen ] [ Listenpunkte ] [ CSS-Listen ] [ Aufzählungen ] [ Einrückungen ] [ Eigene Bulletgrafik ]

Aufzählungen und Listen

Um Aufzählungen und Listen zu erstellen gibt es die Elemente <dl> für unnummerierte Listen, <ul> für Listenpunkte und <ol> für nummerierte Listen

<dl> Unnummerierte Listen </dl>

Die Elemente <dl>...</dl> (dl = definition list = Definitionsliste) geben an, wo die Liste beginnt, und wo aufhört. Mit <dt>...</dt> (dt = definition (list) term = Ausdruck in der Definitionsliste) kann eine Überschrift zur Liste eingegeben werden. Die Elemente <dd>...</dd> (dd = definition (list) definition = Definition in der Definitionsliste) geben die Listenpunkte an.

CodeAusgabe
<dl>
<dt>Überschrift der Liste</dt>
<dd>Listenpunkt 1</dd>
<dd>Listenpunkt 2</dd>
</dl>
Überschrift der Liste
Listenpunkt 1
Listenpunkt 2

<ul> Listenpunkte </ul>

Die Elemente <ul>...</ul> (ul = unordered list = unsortierte Liste) geben an, wo die Liste beginnt, und wo aufhört. Die Elemente <li>...</li> (li = list item = Listeneintrag) geben die Listenpunkte an.

CodeAusgabe
<ul>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>
  • Listenpunkt 1
  • Listenpunkt 2
  • Listenpunkt 3

CSS-Listen

Mit CSS-Stylesheets können Listenpunkte in verschiedenen Formen dargestellt werden.

CodeAusgabe
<ul style="list-style-type:disc">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>

  • Listenpunkt 1
  • Listenpunkt 2
  • Listenpunkt 3
<ul style="list-style-type:circle">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>

  • Listenpunkt 1
  • Listenpunkt 2
  • Listenpunkt 3
<ul style="list-style-type:square">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>

  • Listenpunkt 1
  • Listenpunkt 2
  • Listenpunkt 3
<ul style="list-style-type:none">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ul>

  • Listenpunkt 1
  • Listenpunkt 2
  • Listenpunkt 3

Aufzählungen

Auch nummerische Listen können Dargestellt werden:

CodeAusgabe
Nummerische Liste
<ol style="list-style-type:decimal">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>

Nummerische Liste
  1. Listenpunkt 1
  2. Listenpunkt 2
  3. Listenpunkt 3
Kleine Römische Zahlen
<ol style="list-style-type:lower-roman">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>

Kleine Römische Zahlen
  1. Listenpunkt 1
  2. Listenpunkt 2
  3. Listenpunkt 3
Große Römische Zahlen
<ol style="list-style-type:upper-roman">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>

Große Römische Zahlen
  1. Listenpunkt 1
  2. Listenpunkt 2
  3. Listenpunkt 3
Liste mit kleinen Buchstaben
<ol style="list-style-type:lower-alpha">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>

Liste mit kleinen Buchstaben
  1. Listenpunkt 1
  2. Listenpunkt 2
  3. Listenpunkt 3
Liste mit großen Buchstaben
<ol style="list-style-type:upper-alpha">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>

Liste mit großen Buchstaben
  1. Listenpunkt 1
  2. Listenpunkt 2
  3. Listenpunkt 3

Des weiteren gibt es neuere Listenpunkte, die jedoch zur Zeit nur von Netscape ab Version 6.1 unterstützt wird:

CodeAusgabe
Griechische Buchstaben
<ol style="list-style-type:lower-greek">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>

Griechische Buchstaben
  1. Listenpunkt 1
  2. Listenpunkt 2
  3. Listenpunkt 3
Hebräischen Buchstaben
<ol style="list-style-type:hebrew">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>

Hebräischen Buchstaben
  1. Listenpunkt 1
  2. Listenpunkt 2
  3. Listenpunkt 3
mit führender 0
<ol style="list-style-type:decimal-leading-zero">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>

mit führender 0
  1. Listenpunkt 1
  2. Listenpunkt 2
  3. Listenpunkt 3
ideographischen Zeichen
<ol style="list-style-type:cjk-ideographic">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>

ideographischen Zeichen
  1. Listenpunkt 1
  2. Listenpunkt 2
  3. Listenpunkt 3
Japanisch
<ol style="list-style-type:hiragana">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>

Japanisch
  1. Listenpunkt 1
  2. Listenpunkt 2
  3. Listenpunkt 3
Japanisch
<ol style="list-style-type:katakana">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>

Japanisch
  1. Listenpunkt 1
  2. Listenpunkt 2
  3. Listenpunkt 3
Japanisch
<ol style="list-style-type:hiragana-iroha">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>

Japanisch
  1. Listenpunkt 1
  2. Listenpunkt 2
  3. Listenpunkt 3
Japanisch
<ol style="list-style-type:katakana-iroha">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
<li>Listenpunkt 3</li>
</ol>

Japanisch
  1. Listenpunkt 1
  2. Listenpunkt 2
  3. Listenpunkt 3

Listeneinrückung

Um zu bestimmen, um mehrzeilige Listen einzurücken, benutze den Stylesheet list-style-position

CodeAusgabe
<ol style="list-style-type:decimal;
   list-style-position:inside">
<li>Listenpunkt 1<br>
   zweite Zeile</li>
<li>Listenpunkt 2<br>
   zweite Zeile</li>
<li>Listenpunkt 3<br>
   zweite Zeile</li>
</ol>

  1. Listenpunkt 1
    zweite Zeile
  2. Listenpunkt 2
    zweite Zeile
  3. Listenpunkt 3
    zweite Zeile
<ol style="list-style-type:decimal;
   list-style-position:outside">
<li>Listenpunkt 1<br>
   zweite Zeile</li>
<li>Listenpunkt 2<br>
   zweite Zeile</li>
<li>Listenpunkt 3<br>
   zweite Zeile</li>
</ol>

  1. Listenpunkt 1
    zweite Zeile
  2. Listenpunkt 2
    zweite Zeile
  3. Listenpunkt 3
    zweite Zeile

Eigene Bullet-Grafik

Man kann auch eigene Bullet-Grafik für Aufzählungslisten bestimmen

CodeAusgabe
<ul style="list-style-image:url(bilder/ordner.gif)">
<li>&#160;<a href="index.html">Startseite</a></li>
<li>&#160;<a href="listen.html">Listen</a></li>
<li>&#160;<a href="tabelle.html">Tabellen</a></li>
</ul>

back top next