Service  Tipps  HTML  CSS  JavaScript  PHP  MySQL  Webdesign  Linkliste  SiteMap       

Es gibt zwei Arten von Aufzählungslisten: Unsortiert mit dem HTML-Tag
ul und eine sortierte Aufzählungsliste, HTML-Tag ol.

 

• Aufzählungslisten (unsortiert)

• Äpfel
• Birnen
• Kirschen
• Zitronen

<ul type="disc"> (Voreinstellung)
 <li> Äpfel </li>
 <li> Birnen </li>
 <li> Kirschen </li>
 <li> Zitronen </li>
</ul>

CSS-Anweisung:

<ul style="list-style-type: disc">
...

 

 

• Äpfel
• Birnen
• Kirschen
• Zitronen

<ul type="square">
 <li> Äpfel </li>
 <li> Birnen </li>
 <li> Kirschen </li>
 <li> Zitronen </li>
</ul>

CSS-Anweisung:

<ul style="list-style-type: square">
...

 

 

• Äpfel
• Birnen
• Kirschen
• Zitronen

<ul type=circle>
 <li> Äpfel </li>
 <li> Birnen </li>
 <li> Kirschen </li>
 <li> Zitronen </li>
</ul>

CSS-Anweisung:

<ul style="list-style-type: circle">
...

 

 

• Aufzählungslisten (sortiert)

1. Äpfel
2. Birnen
3. Kirschen
4. Zitronen

<ol>
 <li> Äpfel </li>
 <li> Birnen </li>
 <li> Kirschen </li>
 <li> Zitronen </li>
</ol>

 

 

10. Äpfel
11. Birnen
12. Kirschen
13. Zitronen

<ol start="10">
 <li> Äpfel </li>
 <li> Birnen </li>
 <li> Kirschen </li>
 <li> Zitronen </li>
</ol>

Hier gibt es leider noch keine entsprechende CSS-Anweisung.

 

 

10. Äpfel
11. Birnen
20. Kirschen
21. Zitronen

<ol start="10">
 <li> Äpfel </li>
 <li> Birnen </li>
 <li value="20"> Kirschen </li>
 <li> Zitronen </li>
</ol>

Hier gibt es leider noch keine entsprechende CSS-Anweisung.

 

 

1. Äpfel
2. Birnen
3. Kirschen
4. Zitronen

<ol type="I">
 <li> Äpfel </li>
 <li> Birnen </li>
 <li> Kirschen </li>
 <li> Zitronen </li>
</ol>

CSS-Anweisung:

<ul style="list-style-type: upper-roman">
...

 

 

1. Äpfel
2. Birnen
3. Kirschen
4. Zitronen

<ol type="i">
 <li> Äpfel </li>
 <li> Birnen </li>
 <li> Kirschen </li>
 <li> Zitronen </li>
</ol>

CSS-Anweisung:

<ul style="list-style-type: upper-lower-roman">
...

 

 

1. Äpfel
2. Birnen
3. Kirschen
4. Zitronen

<ol type="A">
 <li> Äpfel </li>
 <li> Birnen </li>
 <li> Kirschen </li>
 <li> Zitronen </li>
</ol>

CSS-Anweisung:

<ul style="list-style-type: upper-alpha">
...

 

 

1. Äpfel
2. Birnen
3. Kirschen
4. Zitronen

<ol type="a">
 <li> Äpfel </li>
 <li> Birnen </li>
 <li> Kirschen </li>
 <li> Zitronen </li>
</ol>

CSS-Anweisung:

<ul style="list-style-type: lower-alpha">
...

 

 

• Mit CSS kann man eine Grafik als Bullet-Zeichen für unsortierte Aufzählungslisten bestimmen.

• Äpfel
• Birnen
• Kirschen
• Zitronen

<ul style="list-style-image: url(bullet.gif)">
 <li> Äpfel </li>
 <li> Birnen </li>
 <li> Kirschen </li>
 <li> Zitronen </li>
</ul>

 

 

• Aufzählungslisten mit führender 0.

1. Äpfel
2. Birnen
3. Kirschen
4. Zitronen

<ol style="list-style-type: decimal-leading-zero">
 <li> Äpfel </li>
 <li> Birnen </li>
 <li> Kirschen </li>
 <li> Zitronen </li>
</ol>

 

 

• Aufzählungslisten einrücken

1. Äpfel
   die zweite Zeile
2. Birnen
   die zweite Zeile
3. Kirschen
   die zweite Zeile
4. Zitronen
   die zweite Zeile

<ol style="list-style-position: inside">
 <li> Äpfel <br> die zweite Zeile</li>
 <li> Birnen <br> die zweite Zeile</li>
 <li> Kirschen <br> die zweite Zeile</li>
 <li> Zitronen <br> die zweite Zeile</li>
</ol>

Hits: 209 - Bewertungen: 0 

 Das könnte Sie interessieren:
CSS Generator - Erstellen Sie Cascading Style-Sheeds ganz einfach.  Effizient mit der Homepage arbeiten  Suchmaschinen  Geburtstage in diesem Monat anzeigen - Dieses PHP-Script zeigt die Geburtstage im aktuellen Monat an. Ein weiteres PHP-Script zeigt Geburtstage in einem bestimmten Zeitraum an.  Textlänge festlegen - Mit diesem PHP-Script wird ein Text auf eine gewisse Textlänge abgeschnitten.  PHP-Einführung  Fliegende Objekte Generator - Horizontal / Vertikal. Mit dem Fliegende Objekte Generatoren können Sie ein JavaScript erstellen, um ein Bild oder Text durch das Browserfenster fliegen zu lassen.  Newsticker Generator - Mit diesem Generator können Sie Ihren eigenen Newsticker erstellen.  …mehr