Probleme im IE mit Hover-Effect für ein Menü! @ tutorials.de: Tutorials, Forum & Hilfe

daddz · 16.03.05 17:34

Ich bins mal wieder...und mal wieder spackt der IE rum. Ich weiß nicht wieso aber naja...
Das ganze ist hier zu betrachten: Klick!
Zum Problem:
Im IE wird beim Menü der Hover Effekt nur zur hälfte angezeigt! Ich weiß nicht wieso aberich vermute das es daran liegt das ein div auf dem anderen drauf ist und ich irgendwas mit dem z-index ändern muss...hab ich aber erfolglos ausprobiert! Vielleicht hab ich den z-index einfach nur in die falschen divs geschrieben! Naja...ich hoffe ihr könnt mir helfen...
Hier ein bisschen Code:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 		"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Roessleins Radlereck</title>
		<link rel="stylesheet" type="text/css" href="main.css">
		<link rel="stylesheet" type="text/css" href="menu.css">
	</head>
	<body>
		<div id="box">
			<div id="header">
				<div id="logo_bg"></div>
				<div align="center">
					<div id="logo" ></div>
				</div>
				<div id="main_menue">
					<div class="menu">
						<div class="menu_punkt a">
							<a href="#">Main1</a>
							<a href="#">Main2</a>
							<a href="#">Main3</a>
							<hr>
							<a href="#">Main4</a>
						</div>
					</div>
					<div id="menu_footer"></div>
				</div>
				<div id="sub_menue">
					<div class="menu2">
						<div class="menu_punkt a">
							<a href="#">Sub1</a>
							<a href="#">Sub2</a>
							<a href="#">Sub3</a>
							<hr>
							<a href="#">Sub4</a>
						</div>
					</div>
					<div id="menu_footer2"></div>
				</div>
			</div>
			<div id="center">
				<div id="content"></div>
			</div>
			<div id="footer"></div>
		</div>
	</body>
</html>

CSS-Datei:

HTML-Code:

#box {
	position: absolute;
	top: 10px;
	left: 5%;
	width: 90%;
	right: 5%;
	border-width: 1px;
	border-color: black;
	border-style: solid;
}

#header {
	position: relative;
	height: 189px;
}

#logo {
	position: relative;
	background: url('pics/roess_rad_logo.gif') no-repeat;
	width: 300px;
	height: 189px;
}

#logo_bg {
	position: absolute;
	background: url('pics/logo_bg2.jpg') repeat-x;
	width: 100%;
	height: 189px;
}

#main_menue {
	position: relative;
	float: left;
	top: -86px;
	width: 89px;
	text-align: center;
}

#sub_menue {
	position: relative;
	float: right;
	top: -86px;
	width: 89px;
	text-align: center;
}

#menu_footer {
	position: relative;
	background: url('pics/ecke2.jpg') no-repeat top left;
	width: 89px;
	height: 23px;
}

#menu_footer2 {
	position: relative;
	background: url('pics/ecke3.jpg') no-repeat top right;
	width: 89px;
	height: 23px;
}

Danke schonmal!

greetz
daddz

**Jan-Frederik Stieler** · 16.03.05 18:37

Du solltest noch die Menü.css posten.

MFG

daddz · 16.03.05 18:44

Okay...hier ist die menu.css:

HTML-Code:

.menu {
	border-width:1px;
	border-style:solid;
	border-color:#545457;
	border-top:0px;
	border-bottom:0px;
	border-left:0px;
	background-color:#6487DB;
	padding:3px;
}


.menu_punkt a {
	display:block;
	border-width:1px;
	border-style:solid;
	border-color:#6487DB;
	background-color:#6487DB;
	padding:5px;
	text-decoration:none;
	font-size:12px;
	font-family:Verdana, Arial, Sans-Serif;
	color:white;
}

.menu_punkt a:hover {
	display:block;
	border-width:1px;
	border-style:solid;
	border-color:#A2B7E9;
	background-color:#7393DF;
	padding:5px;
	text-decoration:none;
	font-size:12px;
	font-family:Verdana, Arial, Sans-Serif;
	color:white;
}

.menu2 {
	border-width:1px;
	border-style:solid;
	border-color:#545457;
	border-top:0px;
	border-bottom:0px;
	border-right:0px;
	background-color:#6487DB;
	padding:3px;
}

greetz
daddz

**Jan-Frederik Stieler** · 16.03.05 19:07

Also entweder ich bin blind oder du hast garkeinen z-index vergeben. Aber ich würde für a nicht nur den hovereffekt definieren sondern auch noch den Rest (visited, link, active).
Obs daran liegt weiß ich jetzt nicht müßte das erst mal ausprobieren, hab nachher vielleicht etwas Zeit dafür.

MFG

daddz · 16.03.05 19:15

Ja ich habe den Z-Index wieder rausgenommen weils nicht funktioniert hat! Wo müsste ich ihn richtigerweise hinschreiben?

greetz
daddz

daddz · 17.03.05 20:53

Könnt ihr mir nicht helfen? Es ist wichtig! Hab schon vieles ausprobiert komm aber net weiter!

greetz
daddz

**Jan-Frederik Stieler** · 18.03.05 03:45

Hi,
also das mit dem z-index ist eigentlich dafür ja nicht gedacht und es hilft dir auch nicht wirklich weiter.
Ich hab mal alles bei dir ausseinander genommen und ausprobiert aber hatt alles nichts genützt.
Meiner Meinung nach hast du auch ein paar ID und classen die du in andere integrieren kannst.

Ich denke das liegt irgendwie an irgendeinem ID weil die sind ja primärer als classen, versuch mal das menü ohne den Rest zu erstellen um zu sehen ob du da schonmal einen Unterschied hast.

daddz · 18.03.05 12:27

Das Menü alleine funktioniert ja! Das ist nicht das Problem! Das div vom Logo überlappt das Menü im IE anscheinend! Aber ich weiß nicht wie ich es wegbekomm!

greetz
daddz

Maik · 18.03.05 14:05

Hallo daddz,

um den z-index für die beiden MenüDIVs anwenden bzw.steuern zu können, müssen sie auch absolut positioniert werden - bei einer relativen Position funktioniert die Angabe z-index nämlich nicht!

Okay, habe mal in deiner main.css folgende Modifikationen vorgenommen:
[ Browsercheck: IE 5.5, Moz 1.6, NN 7.0, Opera 7.23 ]

Code :

#main_menue {
        position: absolute;
        left: 0;
        top: 103px;
        width: 89px;
        text-align: center;
        z-index: 2;
}
 
#sub_menue {
        position: absolute;
        right: 0;
        top: 103px;
        width: 89px;
        text-align: center;
        z-index: 2;
}

Im HTML-Source ist mir zudem ein Syntax-Fehler aufgefallen:

Code :

<div class="menu_punkt [COLOR=Red]a[/COLOR]">
 
<!-- korrigiert -->
<div class="menu_punkt">

greez, maik.l

**Jan-Frederik Stieler** · 18.03.05 16:20

@michaelsinterface: Aber das komische ist doch das das Menü überall gleich aufgebaut ist also müßte der Hover doch auch überall funktionieren ohne das man den Z-Index vergibt, oder?

Maik · 18.03.05 17:14

@DirtyWorld: Das <div id="logo_bg"></div> ( Hintergrundbild 'logo_bg2.jpg' / 5x189px ) liegt definitiv über den beiden MenüDIVs:

Auszug aus der Original main.css:

Code :

#logo_bg {
        position: absolute;
        background: url('pics/logo_bg2.jpg') repeat-x; /* Grafik horizontal wiederholen */
        width: 100%;
        [B]height: 189px;[/B]
        z-index:0;
}
 
#main_menue {
    [B]position: relative;[/B]
    float: left;
    [B]top: -86px;[/B]
    width: 89px;
    text-align: center;
}
 
#sub_menue {
    [B]position: relative;[/B]
    float: right;
    [B]top: -86px;[/B]
    width: 89px;
    text-align: center;
}

Mit dem negativen top: -86px schiebt 'daddz' die beiden Menüs innerhalb der Grafik mit einer Höhe von 189px an die dünne schwarze horizontale Linie ... dummerweise befinden sich unterhalb der Linie noch 86px mit weissem / transparentem Hintergrund

greez, maik.l

**Jan-Frederik Stieler** · 18.03.05 18:20

Aha, dann haste rechte. Hab das übersehen. Das sollte daddz versuchen das ein wenig anderst aufzubauen.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

a hover CSS Menü

horizontales Menü hover

Hover Menü und Bild Hover

hover-effect nicht ganz perfekt

Hover Menü

E-Mail:

Abonnieren Abbestellen