menue verschwindet wenn maus über iframe

missmo · 8. Dezember 2005

Hallo Leute

Meine vertikale Navigation mit Untermenus steht direkt neben dem iframe.

Problem: wenn das untermenue über dem iframe aufgeht und ich will mit der maus drauf, verschwindet dieses submenue. im firefox ist dies gar kein prob, in safari und netscape aber schon, und Opera macht das submenu sowieso hinter dem iframe auf. im ie habe ich gar noch nicht geschaut, weil ich die weiche für css noch nicht gemacht habe.
bis jetzt konnte ich nur auf mac testen

Code:

<body >
<div>
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td height="500" bgcolor="#430000">&nbsp;</td>
      <td width="196" height="400" align="left" valign="top" bgcolor="#333333"><br />
	  <ul id="menue">
	  <li>unser muotathal&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	     <ul id="submenu">
			<li><a href="#">&nbsp;&nbsp;&nbsp;lageplan</a></li>
			<li><a href="#">&nbsp;&nbsp;&nbsp;karte</a></li>
			<li><a href="#">&nbsp;&nbsp;&nbsp;links</a></li>
		</ul>
	</li>
	
	<li>abenteuer&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<ul id="submenu">
			<li>im sommer
			<ul id="subsubmenu">
				<li><a href="inhalt/abenteuer/so/muotaraft.html" target="inhalt">muotaraft</a></li>
				<li><a href="#">wanderungen</a></li>
				<li><a href="#">..........</a></li>
				<li><a href="#">..........</a></li>
			</ul>
			</li>
			<li>im winter
			<ul id="subsubmenu">
				<li><a href="#">iglunacht</a></li>
				<li><a href="#">schneeschuh</a></li>
				<li><a href="#">..........</a></li>
				<li><a href="#">..........</a></li>
			</ul></li>
			<li>das ganze jahr
			<ul>
				<li><a href="#">husky-traum</a></li>
				<li><a href="#">...</a></li>
			</ul></li>
			</ul>
	</li>
			
	<li>kultur &amp; bildung&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	  		<ul id="submenu">
			<li>im sommer
			<ul>
				<li><a href="#">...</a></li>
				<li><a href="#">...</a></li>
			</ul>
			</li>
			<li>im winter
			<ul>
				<li><a href="#">...</a></li>
				<li><a href="#">...</a></li>
			</ul></li>
			<li>das ganze jahr
			<ul>
				<li><a href="#">...</a></li>
				<li><a href="#">...</a></li>
			</ul></li>
			</ul>
	</li>
		
		<li>gruppen &amp; firmen&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	  		<ul id="submenu">
			<li>im sommer
			<ul>
				<li><a href="#">...</a></li>
				<li><a href="#">...</a></li>
			</ul>
			</li>
			<li>im winter
			<ul>
				<li><a href="#">...</a></li>
				<li><a href="#">...</a></li>
			</ul></li>
			<li>das ganze jahr
			<ul>
				<li><a href="#">...</a></li>
				<li><a href="#">...</a></li>
			</ul></li>
			</ul>
		</li>


	<li>freizeitd&ouml;rfli&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		  	<ul id="submenu">
			<li>&uuml;bersicht
			<ul>
				<li><a href="#">karte</a></li>
				<li><a href="#">bilder</a></li>
			</ul>
			</li>
			<li><a href="#">g&auml;stehaus</a></li>
			<li>g&auml;steh&uuml;ttli
			<ul>
				<li><a href="#">family</a></li>
				<li><a href="#">junior</a></li>
			</ul>
			</li>
			<li>huskys
			<ul id="submenu">
				<li><a href="#">huskygehege</a></li>
				<li><a href="#">huskybar</a></li>
			</ul>
			</li>
			<li><a href="#">camping &amp; zeltplatz</a></li>
			<li><a href="#">d&ouml;rfliteam</a></li>
			</ul>
	</li>

		<li>unser team&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<ul id="submenu">
			<li><a href="#">g&auml;steleiter/-innen</a></li>
			<li><a href="#">leitbild</a></li>
			<li><a href="#">ausbildung</a></li>
			</ul>
		  </li>
	<li>unsere hunde&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<ul id="submenu">
			<li><a href="#">g&ouml;nner &amp; paten</a></li>
			<li><a href="#">huskygehege</a></li>
			<li><a href="#">portraits</a></li>
			<li><a href="#">schnappsch&uuml;sse</a></li>
			</ul>
	</li>
	<li>arrangements&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<ul id="submenu">
			<li><a href="#">skitouren im winter</a></li>
			<li><a href="#">skitouren-kurse</a></li>
			<li><a href="#">musher-kurs</a></li>
			<li><a href="#">erlebniscamp</a></li>
			</ul>
	</li>
</ul>

      <td width="584" rowspan="2" align="left" valign="top" bgcolor="#001A3B"><div id="inhalt"><iframe src="table_test.html" frameborder="0"  scrolling="auto"  name="inhalt"></iframe></div><td height="500" bgcolor="#001A3B"></td>
    </tr>
    <tr>
      <td bgcolor="#430000">&nbsp;</td>
      <td width="196" bgcolor="#430000">&nbsp;</td>
      <td bgcolor="#001A3B">&nbsp;</td>
    </tr>
  </table>
</div>
</body>

Code:

#inhalt {
	z-index: 1;
	height: 100px;
	width: 584px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	overflow: hidden;
	visibility: visible;
}

#menue, #menue ul
{
	list-style-type:	none;
	padding:		0;
	margin:			0;
}

#menue li > ul
{
	position:		relative;
	left:			183px;
	top:			-25px;
	display:		none;
}

#menue li:hover > ul
{
	display:		block;
	z-index:		4;
}

#submenu li > ul
{
	position:		relative;
	left:			107px;
	top:			-16px;
	display:		none;
}

#submenue li:hover > ul 
{
	display:		block;
	z-index:		3;
}


body 
{
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #CCCCCC;
}

#menue li
{
	margin: 		0;
	height: 		34px;
	line-height: 		34px;
	text-align: 		right;
	color:			#CCCCCC;
	text-decoration:	none;
	background-color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999999;
	width: 196px;
	top: 257px;
	cursor: pointer;
	visibility: visible;
	display: block;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	list-style-type: none;
	border-top-color: #999999;
	border-right-color: #999999;
	border-left-color: #999999;
	z-index:5;
}
 #menue li:hover {
	margin: 		0;
	height: 		34px;
	line-height: 		34px;
	text-align: 		right;
	color:			#121212;
	text-decoration:	none;
	background-color: #636363;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: inset;
	border-bottom-color: #333333;
	width: 196px;
	top: 257px;
	cursor: pointer;
	z-index:5;
	visibility: visible;
	display: block;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	list-style-type: none;
	border-top-color: #999999;
	border-right-color: #999999;
	border-left-color: #999999;
	white-space: nowrap;
}

#submenu li
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 26px;
	font-weight: bold;
	font-variant: normal;
	color: #CCCCCC;
	text-decoration: none;
	background-color: #333333;
	height: 26px;
	width: 129px;
	text-align: left;
	text-indent: 5px;
	white-space: nowrap;
	cursor: pointer;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #666666;
	border-right-color: #666666;
	border-bottom-color: #666666;
	border-left-color: #666666;
	z-index: 4;
}
#submenu li:hover
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 26px;
	font-weight: bold;
	font-variant: normal;
	color: #121212;
	text-decoration: none;
	background-color: #636363;
	height: 26px;
	width: 129px;
	text-align: left;
	text-indent: 5px;
	white-space: nowrap;
	cursor: pointer;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #666666;
	border-right-color: #666666;
	border-bottom-color: #666666;
	border-left-color: #666666;
	z-index: 4;
}
#subsubmenu li
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 22px;
	font-weight: bold;
	font-variant: normal;
	color: #CCCCCC;
	text-decoration: none;
	background-color: #333333;
	height: 22px;
	width: 130px;
	text-align: left;
	text-indent: 5px;
	white-space: nowrap;
	cursor: pointer;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #666666;
	border-left-color: #666666;
	z-index: 3;
}
#subsubmenu li:hover
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 22px;
	font-weight: bold;
	font-variant: normal;
	color: #121212;
	text-decoration: none;
	background-color: #636363;
	height: 22px;
	width: 130px;
	text-align: left;
	text-indent: 5px;
	white-space: nowrap;
	cursor: pointer;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #666666;
	border-left-color: #666666;
	z-index: 3;
}

ich traute mich noch nicht alles mit css zu machen (und verzeiht mir eventuellen code, darum habe ich auch die guten alten tables drin)

fish-guts · 8. Dezember 2005

Moin

Hast du deinem iframe einen z-index gegeben? Wenn nicht, versuch ihn damit unter das Menu zu legen.

Gruss

FG

missmo · 8. Dezember 2005

fish-guts hat gesagt.:
Moin

Hast du deinem iframe einen z-index gegeben? FG

Ja, ansonsten würde ich die submenus ja in keinem browser sehen; ich habe dem iframe den kleinsten z-index gegeben zuerst über css jetzt direkt in den tag geschrieben
so -->

Code:

 <td width="584" rowspan="2" align="left" valign="top" bgcolor="#001A3B"><iframe src="table_test.html" style="z-index:1;"  frameborder="0"  scrolling="auto"  width="584" height="400" name="iframe"></iframe><td height="500" bgcolor="#001A3B">

ansonsten wenn die iframes nicht so der hammer sind, muss ich es wohl oder übel anders machen

gibt es da nicht eine bessere möglichkeit aber wenn möglich ohne php

missmo · 8. Dezember 2005

ansonsten hier ein link zum dreinschauen

http://www.erlebniswelt.ch/neu/start.html

fish-guts · 8. Dezember 2005

Moin

Naja, da würde ich sowieso nicht mit iframes lösen. Nimm dazu lieber die PHP-Funktion include()

Gruss

FG

menue verschwindet wenn maus über iframe

missmo

Grünschnabel

fish-guts

Erfahrenes Mitglied

missmo

Grünschnabel

missmo

Grünschnabel

fish-guts

Erfahrenes Mitglied

Neue Beiträge