Navigation zerreißt

[Vinzenz Mai]

Hallo,

am besten ihr macht euch erst einmal ein Bild davon was ich meine: www.die-twedde.de/atw/index3.php

Meine Navigation wird wie ihr seht ziemlich hart auseinander gerissen.
CSS-Code:

  

> #menu {	  
>     width: 800px;   /* Dein Menü ist 800 Pixel breit */  
>     height: 30px;  
> }  
  

> li {  
>     float: left;  
>     position: relative;  
>     width: 10em;    /* Die Einträge sind jedoch 10em breit */  
> }  
  

> a.home {  
>     display:block;  
>     width:100px;    /* und enthalten 100 Pixel breite und */  
>     height:100px;   /* 100 Pixel hohe Links (ohne Inhalt) */  

      /* Diese erhalten Hintergrundbilder, die zum Teil breiter sind und  
         daher abgeschnitten werden. */  

>     background-repeat:no-repeat;  
>     background-image:url('Bilder/menu_01.gif');  
> }

» <ul id="nav">  

>   <li><a href="index3.php" class="home"></a></li>  
>   <li><a href="weltkarte.php" class="welt"></a></li>  
>   <li><a href="stadt.php" class="stadt"></a>  
>     <ul>  
>       <li><a href="paris.php" class="paris">Paris, Frankreich</a></li>  
>       <li><a href="prag.php" class="prag">Prag, Tschechien</a></li>  
>       <li><a href="hamburg.php" class="hamburg">Hamburg, Deutschland</a></li>

[...]

Für Deinen Hover-Effekt benötigst Du doch gar keine Bilder, das läßt sich doch wundervoll mit CSS erledigen. Netter Nebeneffekt: deine vielen Klassen, die einfach nur für die Hintergrundbilder da sind, kannst Du umweltschonend entsorgen.

Schreibe als erstes den entsprechenden Linktext ins HTML:

<ul id="nav">  
  <li><a href="index3.php">Home</a></li>  
  <li><a href="weltkarte.php">Weltkarte</a></li>  
  <li><a href="stadt.php">Städtereisen</a>  
    <ul>  
      <li><a href="paris.php">Paris, Frankreich</a></li>  
      <li><a href="prag.php">Prag, Tschechien</a></li>  
      <li><a href="hamburg.php">Hamburg, Deutschland</a></li>  
    </ul>  
  </li>  

Du hast fünf Hauptnavigationspunkte, was spricht dagegen, diese gleich breit zu machen? Deine a-Elemente solltest Du nicht höher machen als die Menüleiste, die Textposition kannst Du per padding-left und padding-top regeln, die Breite sollte gleich der des enthaltenden Listenelementes sein. Gib den a-Elementen als Hintergrundfarbe schwarz und die Vordergrundfarbe weiß. Bei Hover ändere die Vordergrundfarbe in die Farbe Deines Seitenhintergrundes ab ...

Bei der Unternavigation sieh' zu, dass der Text in eine Zeile passt.

Freundliche Grüße

Vinzenz