Auge: Navigation horizontal gleichmäßig verteilen

Beitrag lesen

Hallo

Ja, die Bilder liegen da. Wenn ich sie via Stylesheet einbinde klappt das ja auch, nur so nicht.

Liegt das Stylesheet in einer eigenen Datei und befindet sich diese CSS-Datei im selben Verzeichnis wie das HTML-Dokument?

Das mit dem Breitenunterschied wegen des <span>-Elements ist ein heißer Tipp, ich habs rausgenommen. Aber wie komme ich nun an mein Ziel?

Gucken wir mal. Das ist der HTML-Quelltext aus deinem letzten Posting ohne das <span> und mit neuer Einrückung.

<div id="wrapper">
 <div id="header">
  <div id="navi">
   <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>
   </ul>
  </div> <!-- end navi -->
 </div> <!-- end header -->

Ich ersetze erst einmal nur die Elemente mit HTML5-Elementen, bei denen diese Möglichkeit offensichtlich ist. Frage dazu: <div id="wrapper">, welches ich folgend weglasse, umschließt den gesamten Inhalt der Seite?

 <header>
  <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>
   </ul>
  </nav>
 </header>

du hattest zuletzt für die Liste, die die Navigation bildet, folgendes, von mir an die neue Struktur (Verwendung von <nav> angepasste CSS gezeigt. Lasse dich bitte nicht von meinen Umformatierungen stören.

nav ul {
  text-align:justify;
  width:50%;
  margin:auto;
  margin-top:15px;
  background-color:#9F0;
}

Der Liste selbst weist du eine Breite von „50% “zu. Von welchem Wert aus werden diese 50% berechnet? Gibt es ein Elternelement dieser Liste mit explizit gesetzter Breite oder bezieht sich diese Breitenangabe auf die Breite des Browserfensters?

Tschö, Auge

--
Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.
Jan Koum, Mitgründer von WhatsApp, im Heise.de-Interview