Probleme bei der Darstellung einer Navigationsleiste

T

Tikonteroga

Erfahrenes Mitglied
Hallo,

ich möchte eine horizontale Naviationsleiste für eine Website in XHTML und CSS erstellen.

Ich habe jedoch ein Problem mit der Darstellung.

Hier mal mein XHTML und CSS Code.

HTML: 
 <body>
    <ul id="nav">
      <li><a href="Index.html">MenuItem<a/></li>
      <li><a href="Index.html">MenuItem<a/></li>
      <li><a href="Index.html">MenuItem<a/></li>
      <li><a href="Index.html">MenuItem<a/></li>
      <li><a href="Index.html">MenuItem<a/></li>
    </ul>
  </body>

Code: 
ul#nav
{
  list-style-type:none;
  list-style-position:inside;
  margin:0px;
  padding:0px;
}

ul#nav li
{
  display:inline;
  margin:0px;
  padding:0px;
  width:19%;
}

ul#nav a
{
  display:block;
  background-color:rgb(0,0,0);
  color:rgb(255,255,255);
  font-family:'Helvetica';
  font-size:10px;
  text-decoration:none;
  font-weight:bold;
  border:1px solid rgb(127,127,127);
  padding:4px;
  text-align:center;
  margin:0px;
}

ul#nav a:hover
{
  background-color:rgb(127,127,127);
}

Das Problem, dass ich habe, ist dass mit der Internet Explorer 8 unter meine Menüleiste noch eine dünne Zeile anhängt. Man es es gut durch den Rahmen erkennen. Wenn ich den Rahmen entferne wirkt es so, als ob die Schrift nicht richtig vertikal zentriert wurde.

Ich hoffe ihr könnt mir helfen.
 
Zuletzt bearbeitet:
Vielen Dank, dass ist mir gar nicht aufgefallen.

Hab jetzt Stunden an dem Stylesheet rumprobiert und es kamen immer nicht nachvollziehbare Ergebnisse dabei heraus.

Durch die Korrektur im HTML hat es dann fast sofort hingehauen.
 
Hallo,

ich hätte noch eine Frage.

Ich habe ein Anchor-Element <a/> im Stylesheet mit display:block ausgezeichnet, damit ich Höhe und Breite vergeben kann und den Hintergrund durch :hover verändern kann. Wie kann ich jetzt realisieren, dass der Text in <a/> vertikal zentriert wird?
 
Hi,
das ist nicht ganz so einfach. Den
CSS: 
vertical-align
funktioniert nur auf Inline-Elementen.
Du könntest dem Div aber eine Klasse mit
CSS: 
display:table-cell;
vertical-align:middle;
vergeben. Leider kann damit nicht jede Version des IE umgehen.
Eine andere Möglichkeit wäre dem DIV einem
CSS: 
line-height
den selben Wert zugeben wie der Höhe.

Viele Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück