CSS Navigation horizontal mit mouseover?

filament

filament

Erfahrenes Mitglied
Hallo liebe Community,

ich finde die Navigation der ARD Seite echt gut. Habe versucht das mal nachzubauen, aber irgendwie gelingt mir das nicht so richtig. (http://www.ard.de)

Folgendes habe ich bisher erstellt:

Index.html:

HTML: 
<body>
 <div id="navi">
  <ul id="menu">
   <span>Home</span>
   <li><a href="aktuelles.php">Aktuelles</a></li>
   <li><a href="registrieren.php">Registrieren</a></li>
   <li><a href="screenshots.php">Screenshots</a></li>
   <li><a href="impressum.php">Impressum</a></li>
  </ul>
 </div>
 </body>

So sieht meine screen.css aus die natürlich eingefügt wird oben im Head der index.html:

HTML: 
/* -- Allgemeines -- */
html,body{
  height:100%;
  width:100%;
  margin:0;
} 


body {
  background: #e7f3f7;
  color: black;
  margin: 0;
  padding: 0;
  min-width: 640px;
  width: 70%;
  font-size: 100.01%;
  font-family: verdana, arial, sans-serif ;
}

#navi {
  background: #d6e3ed;
  color: black;
  margin: 0;
  padding: 0;
  width: 100%;
  border-bottom: solid 3px #001f4d;
}

ul li {margin: 0px; padding: 0px;}

#menu li {
  font-size: 0.8em;
  display: inline; 
  list-style-type: none;
  font-weight: bold;
  background: #d6e3ed;
}

#menu span {
  font-size: 0.8em;
  display: inline; 
  list-style-type: none;
  font-weight: bold;
  background: white;
  border-top: solid 2px #082c5e;
}

#menu li a {
  color: black;
  text-decoration: none;
}

#menu li a:hover {
  color: black;
  text-decoration: none;
}

#menu li:hover {
  color: black;
  text-decoration: none;
  background: white;
  border-top: solid 2px #082c5e;  
}

Die Seite hat aber folgende Fehler:

1. Der Div-Container fängt erst nach einigen Pixeln an, nicht am Anfang der Seite, warum das, hab doch kein Padding oder Margin angegeben?
2. Der Border (Bottom) ist nicht direkt an der Liste dran? Warum dass? Ich wollte schließlich den nächsen Div-Container weiß machen, damit es aussieht, als wenn das aktive Element zum Content gehört.
3. Die Textlinks bzw. das Hover des Textlinks umschließt nur den Text. Auf der ARD Seite ist es aber ein Kasten, der an den nächsten Anschließt. Die Hovers haben also nicht wie bei mir lücken zwischen den weißen Umrandungen. Woran liegt das nun wieder?

Vielleicht kann mal jemand über meinen Quelltext gucken und findet die Fehler?

Danke im Voraus!
 
Ich weiß gar nicht wo ich da anfangen soll .. Mal einige Tipps:
Wenn Du ein horizontales Menü erstellen willst bei dem die Links eine bestimmte Höhe haben, mach die Links zu Blockelemten (display: block). Danach kannst Du per padding dem Link eine Höhe geben. Die <li>'s müssten dagegen zu Inline-Elementen gemacht werden die auch noch floaten (Kompatiblität zu IE<9).
Den Strich oben sollte man als border-top des Links umsetzen. Wenn der Link nicht aktiv ist, setze dennoch einen border ohne Farbe (border-top: 2px solid transparent). Wenn der Link aktiv ist, ändere die Farbe entsprechend (border-top-color: red).
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück