✔ CSS Menu IE Problem und horiz. Ausrichten

Status
Nicht offen für weitere Antworten.
E

emonem

Erfahrenes Mitglied
Hi,

baue grad ein vertikales CSS Menu welches mittels der Pseudoklasse :hover ein anderen Background anzeigt wenn man auf einen Button geht.
Klappt auch bis dahin. Hab jetzt aber das Problem das im IE freiräume zwischen den Buttons sind.Im Firefox sieht es dagegen normal aus.
Ist mein CSS Code irgendwo falsch?
Vielleicht weiß jemand rat.
Hier ist der link zu der Page
CSS Code:
PHP: 
#navi li a { 
width: 200px; 
height: 40px; 
display: block; 
} 

#navi li { 
list-style:none; 
width: 200px; 
} 

#navi li a:hover { 
background-image: none; 
background: transparent; 
} 

span { 
display:none; 
} 

a#navi_1_norm { 
background-image: url('_images/news.jpg'); 
} 

a#navi_2_norm { 
background-image: url('_images/reviews.jpg'); 
} 

a#navi_3_norm { 
background-image: url('_images/music.jpg'); 
} 

a#navi_4_norm { 
background-image: url('_images/lyrics.jpg'); 
} 

#navi_1_hover { 
background-image: url('_images/news2.jpg'); 
} 

#navi_2_hover { 
background-image: url('_images/reviews2.jpg'); 
} 

#navi_3_hover { 
background-image: url('_images/music2.jpg'); 
} 

#navi_4_hover { 
background-image: url('_images/lyrics2.jpg'); 
}

Html Code:
PHP: 
<div id="navi">
  <ul>
    <li id="navi_1_hover"><a  id="navi_1_norm" href="#" title="News"><span>News</span></a></li>
    <li id="navi_2_hover"><a  id="navi_2_norm" href="#" title="Reviews"><span>Reviews</span></a></li>
    <li id="navi_3_hover"><a  id="navi_3_norm" href="#" title="Music"><span>Music</span></a></li>
    <li id="navi_4_hover"><a  id="navi_4_norm" href="#" title="Lyrics"><span>Lyrics</span></a></li>
  </ul>
</div>

Wie krieg ich dann noch das Menu Horizontal Ausgerichtet?(Buttons nebeneinander statt untereinander)
Danke und Gruß
 
Das liegt an dem SPAN-Block der erzeugt komischerweise einen Abstand unter dem Listenobjekt. Verursacht wird das durch das display: none; wenn du stattdessen visibility: hidden; nimmst dann funktioniert es auch im IE.
 
emonem hat gesagt.:
Wie krieg ich dann noch das Menu Horizontal Ausgerichtet?(Buttons nebeneinander statt untereinander)
Danke und Gruß
Zum Vergrößern anklicken....
Die CSS-Regel für eine horizontal ausgerichtete Liste lautet:

CSS: 
li {
display: inline;
}
In deinem Fall greift die Regel aber nicht auf Anhieb, da für die Links durch display:block der Block-Level-Charakter bestimmt wurde, was sie untereinander anordnet und die Liste weiterhin vertikal ausrichtet.

Es bedarf der Ergänzung float:left, damit sie vom nachfolgenden Element umflossen werden:

CSS: 
#navi li {
display: inline;
}

#navi li a {
width: 200px;
height: 40px;
display: block;
float: left;
text-decoration: none;
}

Nun wird die Liste horizontal ausgerichtet, aber die hover-Grafiken werden in keinem Browser mehr angezeigt! :confused:

Hier ein 'konventioneller' Lösungsvorschlag, um die Hintergrundgrafiken zu tauschen:
  • Browsercheck: FF 1.5, IE 6.0, MOZ 1.7, NN 7.0, OP 8.50 | Win2000
CSS: 
#navi li a {
width: 200px;
height: 40px;
display: block;
float: left;
text-decoration: none;
}

#navi li {
list-style: none;
display: inline;
width: 200px;
height: 40px;
}

span {
visibility: hidden;
}

a#navi_1:link, a#navi_1:visited {
background-image: url('_images/news.jpg');
}

a#navi_1:hover {
background-image: url('_images/news2.jpg');
}

a#navi_2:link, a#navi_2:visited{
background-image: url('_images/reviews.jpg');
}

a#navi_2:hover {
background-image: url('_images/reviews2.jpg');
}

a#navi_3:link, a#navi_3:visited {
background-image: url('_images/music.jpg');
}

a#navi_3:hover {
background-image: url('_images/music2.jpg');
}

a#navi_4:link, a#navi_4:visited {
background-image: url('_images/lyrics.jpg');
}

a#navi_4:hover {
background-image: url('_images/lyrics2.jpg');
}
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="navi">
  <ul>
    <li><a id="navi_1" href="#" title="News"><span>News</span></a></li>
    <li><a id="navi_2" href="#" title="Reviews"><span>Reviews</span></a></li>
    <li><a id="navi_3" href="#" title="Music"><span>Music</span></a></li>
    <li><a id="navi_4" href="#" title="Lyrics"><span>Lyrics</span></a></li>
  </ul>
</div>
</body>
</html>
 
Hi,
danke für die hilfe, jetzt klappt es.
Allerdings hab ich noch ein Problem mit der Ausrichtung.
Hab dieses hier als Menuhintergrund eingefügt.
PHP: 
#navi {
width:900px;
height:40px;
background-color:green;
}

Man sieht hier das das Menu links nicht bündig abschließt obwohl
float:left; eingetragen wurde. Wenn ich dagegen float:right wähle dann schließt das Menu
an der rechten seite ab.
Wie kann ich diesen Schönheitsfehler beheben?
 
Füge im Stylesheet noch folgende Regel für die Liste ein:

CSS: 
#navi ul {
margin: 0;
padding: 0;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück