Kommen wir jetzt zu einen wichtigen Teil einer anständigen Homepageprogrammierung, den Listenelementen. Generell solltet ihr euch zweier Dinge bewusst machen, es gibt geordnete Listen und ungeordnete Listen. Die Unterschiede zwischen beiden Listenarten werde ich euch hier einmal deutlich machen.

Ungeordnete Listen:
Ungeordnete Listen führen vor dem jeweiligen Listentext ein einheitliches Aufzählungszeichen.
Ungeordnete Listen werden mit dem Element <ul> eingeleitet und mit einem Element </ul> abgeschlossen. In den Zeilen zwischen diesen beiden Elementen fügt ihr li-Elemente ein, welche natürlich von einem schließendem li-Element wieder geschlossen werden. Hier ein kleines Beispiel:

1
2
3
4

<ul>
<li><a href="index.htm" title="Startseite von CSS-Roots">Startseite</a></li>
<li><a href="about.htm" title="N&auml;here Informationen &uuml;ber CSS-Roots">Startseite</a></li>
</ul>

Das Ergebnis sieht dann so aus:

Geordnete Listen:
Bei geordneten Listen läft der Hase etwas anders, hier wird das ganze von einem ol-Element eingeleitet und wieder geschlossen, das ist jedoch das einzige was sich in der Programmierung ändert. Das Ergebnis ist aber deutlich anders, hier erscheint eine Aufzählung mit Zahlen statt einem festen Aufzählungszeichen. So sieht der dazugehörige Quellcode aus:

1
2
3
4

<ol>
<li><a href="index.htm" title="Startseite von CSS-Roots">Startseite</a></li>
<li><a href="about.htm" title="N&auml;here Informationen &uuml;ber CSS-Roots">Startseite</a></li>
</ol>

Ergebnis:

Diese beiden Aufzählungen eignen sich sehr gut für eine Menüführung oder bei Aufzählungen innerhalb eines Textes.

Dies ist eigentlich nichts großartiges aber ich für es für euch mal mit auf. Ihr könnt natürlich geordnete Listen und ungeordnete Listen beliebig verschachteln, so lange ihr die Synthax einhaltet. Ich denke mal hier ist sehen besser als erklären:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<ul>
<li><a href="index.htm" title="Startseite von CSS-Roots">Startseite</a></li>
<li><a href="about.htm" title="N&auml;here Informationen &uuml;ber CSS-Roots">About us</a></li>
<li><a href="pseudo.htm" title="Pseudoseite">Pseudoseite 1</a></li>
<li><a href="pseudo.htm" title="Pseudoseite">Pseudoseite 2</a></li>
<li><a href="pseudo.htm" title="Pseudoseite">Pseudoseite 3</a></li>
<li><a href="pseudo.htm" title="Pseudoseite">Pseudoseite 4</a></li>
<li><a href="pseudo.htm" title="Pseudoseite">Pseudoseite mit Unterthemen</a></li>
<ol>
<li><a href="pseudo.htm" title="Pseudoseite">Unterthema 1</a></li>
<li><a href="pseudo.htm" title="Pseudoseite">Unterthema 2</a></li>
</ol>
<li><a href="pseudo.htm" title="Pseudoseite">Pseudoseite 5</a></li>
</ul>

Das ganze könnt ihr natürlich auch anders herum machen. Im übrigen sieht das Ergebnis dann so aus:

Jetzt seit ihr wahrscheinlich soweit dass ihr eure Listen etwas ansprechender formatieren möchtet. Das ist kein Problem denn ihr könnt das gesamte Aussehen eurer Listen über den Stylesheet definieren. Erstmal der Quellcode:

 #nav ul {
   list-style-type: none; /*Entfernen der Aufzaehlungen*/
   margin:	0; /*Abstaende auf Null setzen*/
   padding:	0; /*Abstaende auf Null setzen*/
   }
#nav li {
 
   margin: 5px; /*Außenabstand auf allen Seiten auf 5px setzen*/
   text-align: center; /*Text auf zentriert einstellen*/
   list-style-type: none; /*Entfernen der Aufzaehlungen*/
}
#nav li a  /*Hier werden die Verlinkungen eurer Listen definiert*/
{
   text-decoration: none;  /*Entfernen aller formatierungen wie unterstrich etc.*/
   color:#3d3d3d; /*Festlegen der Linkfarbe*/
   margin: 5px;/*Außenabstand auf allen Seiten auf 5px setzen*/
}

So ich denke durch die Kommentierung sollte sich der Code-Teil selbst erklären.
Das Ergebnis sieht dann so aus: