@@Thomas Luethi:
nuqneH
<ul class="nav">
[…]
Ergänzungen/Korrekturen werden sicher noch folgen von Leuten, die wacher sind als ich gerade jetzt...
Das Menü sollte noch in ein nav-Element gesteckt werden.* Dann wäre auch die Klasse "nav" überflüssig. Ist sie auch so schon, denn wenn ein Attribut, dann WAI-ARIA, was der Barrierefreiheit zugute kommt: <ul role="navigation">.
Styling dann per Nachfahrenselektoren 'nav ul'/'nav li'/'nav a' bzw. Attributselektoren '[role="navigation"]'/'[role="navigation"] li'/'[role="navigation"] a'. (IE 6 unterstützen wir nicht mehr, oder?)
Bei mehreren 'nav'- bzw. @role="navigation"-Elementen auf der Seite sollte man natürlich zusätzlich noch IDs (oder Klassen) verwenden.
Und dann ist da noch Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen]: „Verlinke niemals auf die aktuelle Seite.“
Auf der Club-Seite sollte das Menü so aussehen:
<nav>
<ul>
<li><a>Club</a></li>
<li><a href="/ausbild.php">Ausbildung</a></li>
<li><a href="/termine.php">Termine</a></li>
</ul>
</nav>
Auf der Ausbildung-Seite:
<nav>
<ul>
<li><a href="/club.php">Club</a></li>
<li><a>Ausbildung</a></li>
<li><a href="/termine.php">Termine</a></li>
</ul>
</nav>
Auf der Termine-Seite … – die Denkaufgabe überlass ich mal Euch.
Statt
float:left;unddisplay:inline;[…]
Oh, wir unterstützen doch noch IE 6‽
[…] könntest Du ggf. auch
display:inline-block;nehmen, siehe den Artikel von Gunnar.
Da muss man bedenken, dass Whitespace zwischen den </li>- und <li>-Tags als Leerzeichen angezeigt wird.
Qapla'
Das Kleingedruckte:
* in HTML5
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)