HTML / Aufzählungslisten mit HTML und CSS formatieren

von: Werner Zenk

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

 

• Aufzählungslisten (unsortiert) 
<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">
...

 

 

<ul type="square">
 <li> Äpfel </li>
 <li> Birnen </li>
 <li> Kirschen </li>
 <li> Zitronen </li>
</ul>
CSS-Anweisung: 
<ul style="list-style-type: square">
...

 

 

<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>

 

 

  1. Äpfel
  2. Birnen
  3. Kirschen
  4. 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.

 

 

  1. Äpfel
  2. Birnen
  3. Kirschen
  4. 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. 
<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>
    Und Ihre Meinung?
      Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?  
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!  
 Das könnte Sie interessieren:
Kommentare - Ein HTML- oder JavaScript-Quelltext, der zum Beispiel mit Leerzeilen und Einrückungen übersichtlich aufgebaut ist und an entscheidenden Stellen Umbrüche und Kommentare aufweist, ist deutlich leichter zu pflegen.  Erweiterte Farbnamen  Verzeichnis (Ordner) verlinken!  Frameset Vorlagen (4)  Automatische Texteingabe - Automatische Texteingabe (autocomplete) in Formularfeldern verhindern oder erlauben.  Image Maps - Verweis-sensitive Grafiken sind Grafiken, in denen der Anwender mit der Maus auf ein Detail klicken kann. Daraufhin wird ein Verweis ausgeführt.  Ladehinweis bei großen Bildern anzeigen - Große Bilder sollten mit einem Ladehinweis erscheinen, damit der Besucher die Seite nicht verlässt bevor er das Bild gesehen hat.  Bilder nebeneinander stellen - Mit Hilfe einer HTML-Tabelle können Sie sehr einfach Bilder nebeneinander oder untereinander stellen.  1536 - Farben - Farbtabelle  …mehr
© 2000-2012 Homepage-Total.de Kontakt - Impressum - Banner