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:

Ich denke mal die meisten von euch wird das Aufzählungszeichen selbst stören, das ist aber kein Problem da man dieses ganz einfach per Stylesheet ausblenden lassen kann. Das ganze geht wie folgt:

 #ul 
{   list-style-type: none; }
 
#li 
{  list-style-type: none; }

Durch diese list-style-Aussage gebt ihr dem Browser an dass er die Aufzählungszeichen im gesamten Dokument nicht anzeigen soll, ihr könnt dies natürlich auch nur für einen bestimmten div festlegen, wie zum Beispiel “navi”. Das sieht dann so aus:

 #nav ul 
{   list-style-type: none; }
 
#nav li 
{   list-style-type: none;}