Navigation horizontal gleichmäßig verteilen

[Gunnar Bittersmann]

@@Nina

OK, habe versucht ein bisschen aufzuräumen

Schon besser. Räumen wir noch ein bisschen weiter.

<div id="wrapper">

Es sind bereits zwei Containerelemente da: html und body. Ein drittest brauchst du nicht. Kann weg.

   <div id="header">
   <div id="navi">

Dafür gibt es in HTML spezielle Elemente: header und nav.

   <ul>
   <li><a href="#anker_vita"><img src="img/vita.png"/></a></li>
   <li><a href="#anker_vorträge"><img src="img/vortraege.png"/></a></li>
   <li><a href="#anker_publikationen"><img src="img/publikationen.png"/></a></li>
   <li><a href="#anker_forschung"><img src="img/forschung.png"/></a></li>
   <li><a href="#anker_lehre"><img src="img/lehre.png"/></a></li>
   <li><a href="#anker_kontakt"><img src="img/kontakt.png"/></a></li>
   <span></span>

   </ul>

Die Liste kann, aber muss nicht sein. Was unbedingt sein muss sind die Alternativtexte für die Grafiken.

   </div> <!-- end navi -->
  </div> <!-- end header -->

Die Verwendung sprechender HTML-Elemente statt divs hat zudem den Vorteil, dass man nicht kommentieren muss, welches div nun gerade geschlossen wird.

Das span-element in der Liste brauche ich um für den Blocksatz (der ja trotzdem nicht funktioniert)

Nö. Matthias wies bereits auf Flexbox hin. Sieht dann beispielsweise so aus.

LLAP 🖖