Menue-Formatierung

Unsere erste CSS-Seite ist nun fast schon perfekt.
Bleibt eigentlich nur noch, den anfangs eingefügten Link noch etwas aufzupeppen.
Weil ihr aber mittlerweile schon richtige CSS-Experten seid wollen wir es dabei nicht belassen, sondern wagen uns mal gleich an ein richtiges Menue mit mehreren Links heran.

Listenformat

Wir bedienen uns dabei des HTML-Instruments der "unordered list", kurz "ul" genannt. Das ist keine unordentliche, sondern lediglich eine "unsortierte" Liste. Soll eigentlich nur heißen ohne Durchnummerierung, also eine reine Aufzählungsliste.
Näheres hier.

In unsere Navi-Box (HTML-Teil) fügen wir mal zunächst die Grundstruktur einer solchen Liste ein und versehen jeden Listeneintrag mit einem Link.
Den ersten Listeneintrag verwenden wir für die Überschrift und zeichnen diese zusätzlich mit "h3" aus. Danach kommt unser erster Link zur Startseite. Für den zweiten nehmen wir den vorhandenen zu unserer Seite eins. Bei den anderen verfahren wir entsprechend.
Sehen wir einmal acht Listeneinträge für Menue-Überschrift, Startseite und sechs Einzelseiten vor.

<div id="navi">

<ul>
<li> <h3>Menue</h3> </li>
<li> <a href="index.html">Startseite</a> </li>
<li> <a href="seite1.html">CSS Teil 1</a> </li>
<li> <a href="seite2.html">CSS Teil 2</a> </li>
<li> <a href="seite3.html">CSS Teil 3</a> </li>
<li> <a href="seite4.html">CSS Teil 4</a> </li>
<li> <a href="seite5.html">CSS Teil 5</a> </li>
<li> <a href="seite6.html">CSS Teil 6</a> </li>
</ul>

</div><!--Ende Navi-->

Fügt bei Bedarf noch weitere Links hinzu.

Tipp:
Macht euch an dieser Stelle bereits unbedingt Gedanken, wie viele Links ihr für welche Seiten insgesamt braucht. Wie lauten die Dateibezeichnungen für eure Einzelseiten?
Fügt in der Navi möglichst bereits jetzt die Links zu euren Einzelseiten ein.
Ihr könnt dann diesen Code-Teil später einfach kopieren, bei den anderen Seiten einfügen und habt auf diese Weise überall das gleiche Menue.
Wird das Menue nachträglich durch weitere oder wegfallende Links geändert, so müsst ihr diese Änderungen auf allen Seiten vornehmen. Schließlich ist nur unser CSS-Code zentral hinterlegt, nicht aber die Menue-Links.

Wir werden im Fortgeschrittenen Teil (sofern es einen jemals geben sollte) noch eine Lösung kennen lernen, wie man auch diesen Aufwand mit einem kleinen PHP-Script vereinfachen kann.

Speichert nun die "index.html" wieder ab und seht euch die Seite an.
Hat schon eine große Ähnlichkeit mit einem Menue, aber genügt sicher noch nicht unseren Ansprüchen. Deshalb müssen wir erneut unsere "style.css" bemühen und ergänzen.

Entfernen wir einmal zunächst die Aufzählungspunkte und sorgen dafür, dass die Liste keinerlei äußere und innere Abstände zur Navi-Box hat, indem wir unserer unordered list "ul" innerhalb des Navi-ID's folgende Eigenschaften zuweisen:

#navi ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

Statt #navi ul würde auch ein einfaches ul ohne vorangestellte Raute reichen, da "ul" ein Elementselektor ist. Durch Voranstellen des ID's #navi wird jedoch leicht erkennbar, in welchem DIV sich unsere Liste befindet. Verwenden wir dagegen nur "ul", gelten die Formatierungen automatisch für alle weiteren Listen und wir könnten verschiedene Listen nicht unterschiedlich definieren.

Zu den Möglichkeiten der Listenformatierung findet ihr hier weitere Hinweise.

Etwas Arbeit wird uns nun die "Linkformatierung" bereiten.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: