Gunnar Bittersmann: 3 Boxen über Seitenbreite verteilt

Beitrag lesen

@@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; und display: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)