Navigation horizontal gleichmäßig verteilen

[Auge]

Hallo

ich habe zweierlei Probleme mit dem Versuch eine Navigation zu basteln, deren Elemente horizontal gleichmäßig verteilt sind, beginnend linksbündig, endend rechtbündig. Wie man auf dem Bild sieht verteilen sich die Elemente zwar, beginnen aber nicht linksbündig.

   <li> <a href="#anker_vita"><div class="naviitem"></div></a> </li>

Zuallererst fällt mir auf, dass zwischen <li> und <a> und hinter dem schließenden Tag </a> jeweils Leerzeichen sind, welche natürlich auch Platz in der Anzeige in Anspruch nehmen. Weiterhin haben die <div> in allen außer dem ersten Menüpunkt ebenfalls jeweils ein Leerzeichen. Die solltest du testweise mal sämtlichst entfernen.

Weiterhin stellt sich mir die Frage nach dem Zweck der <div> der Klasse naviitem. Einerseits ist die Schachtelung von <div> in <a> zwar mit HTML5 erlaubt, aber meiner Meinung nach sowohl fragwürdig als hier vermutlich auch unnötig. Falls sie nämlich auschließlich dem Zweck dienen, das Hintergrundbild aufzunehmen, können das die <a> selbst genauso gut.

Schlussendlich ist da noch das <span>-Element am Ende der Liste. Das hat dort nichts zu suchen.

Nimm also erst einmal die Leerzeichen aus den Links, entferne das <span> und teste die Ausgabe. Danach können wir uns der weiteren Optimierung zuwenden. Aus dem Aufbau ist noch einiges herauszuholen (Verwendung von HTML5-Elementen und Weglassung überflüssiger Elemente).

<div id="wrapper">
 
   <div id="header">
   <div id="navi">
   <ul>
   <li> <a href="#anker_vita"><div class="naviitem"></div></a> </li>
   <li> <a href="#anker_vorträge"><div class="naviitem"> </div></a> </li>
   <li> <a href="#anker_publikationen"><div class="naviitem"> </div></a> </li>
   <li> <a href="#anker_forschung"><div class="naviitem"> </div></a> </li>
   <li> <a href="#anker_lehre"><div class="naviitem"> </div></a> </li>
   <li> <a href="#anker_kontakt"><div class="naviitem"> </div></a> </li>
   <span></span>
   </ul>
   </div> <!-- end navi -->
  </div> <!-- end header -->
  <div class="clear">
  </div> <!-- clear -->

Zusatzlich stellt sich der Navi Bereich breiter dar als der Content, obwohl ich beiden width:50% zugeornet habe. Wenn dazu zufällig auch noch jemand eine Lösung wüssste wäre ich unendlich dankbar.

Dazu können wir ohne Angaben zu den Elementwen mit dem Content nichts sagen.

Tschö, Auge