Iframe immer auf höchste Priorität??

Frübucher

Hi Leute,

ich hoffe hier kann mir jemand helfen. Ich habe folgendes Problem, das im Internet Explorer auftritt: Ich habe eine Seite mit einem JavaScript-Menü (so richtig schön mit ausklappen und so [Blockierte Grafik: http://www.tutorials.de/images/smilies/smile.gif]), doch leider wird es im IE immer vom iframe verdeckt. (komischerweise wird die Navigation im Firefox super angezeigt).

Änderung vom z-index im Stylesheet helfen auch nicht... [Blockierte Grafik: http://www.tutorials.de/images/smilies/frown.gif]

Hat irgendwer noch ne Idee?

Viele Grüße
Frühbucher

PS: Leider kann ich euch noch keine URL geben da noch nicht Online!!

Paulchen

versuch vielleicht mal, statt dem iframe ein div zu verwenden

Frübucher

Hi danke für den Tip,

aber kann man DIV-Tags so benutzen als wären es iframes (immer wieder aufrufbar an der selben stelle usw.)?? Ich kenne mich leider nicht so gut damit aus.

Paulchen

nun ja...
wenn man keine (i)frames verwendet, muss man etwas anders an die angelegenheit herangehen; grundsätzlich ist es nicht notwendig, für ein gut aussehendes layout einer seite (i)frames zu verwenden
bei einem (i)frame besteht der inhalt des entsprechenden bereichs aus einer separat gespeicherten html-datei, mit div-tags hingegen schließt du nur einen bestimmten bereich deiner seite in einen sogenannten allgemeinen block ein, dessen eigenschaften du dann per CSS festlegen kannst. d. h. der inhalt des blocks befindet sich in jener datei, in welcher du die div-tags setzt.
ein problem hast du dann wahrscheinlich dann, wenn du mehrere seiten hast, in denen jeweils ein iframe vorkommt, der dasselbe enthalten soll. hier könntest du dir vielleicht behelfen, wenn du PHP zur verfügung hast, indem du mit include in den div-bereich die separate datei einbindest.
eine spezielle lösung kann ich dir aber nicht anbieten, dazu müsste ich mehr über das design und den aufbau deiner webseite wissen.

MarvinTheRobot

eine andere möglichkeit wäre natürlich mit jscript die divs ein und auszublenden. mit display:none oder display:block (css) is das möglich. musst dir nur ein skript schreiben dass halt die einzelnen divs abklappert und alle inaktiv setzt (also display:none) und den gewählten auf sichtbar (display:block). is aber net so die tragik. somit kannst eigentlich alles in eine seite packen. (soferns nicht zuviel content ist) ansonsten würd ich auch paulchens lösung vorziehen.

lg, Phil.

Frübucher

Moin,

ich versuchs mal mit eurer Lösung. Wobei ich nicht weiss ob das in meiner Site funktioniert da immer wieder neue Inhalte in diesem Iframe dargestellt werden (z. B. Anzeige von Cocktails, Gästebuch, Kontaktformular etc.).

Trozdem DANKE schonmal und vielleicht klappt es ja

Hier nochmal mein Quelltext

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<html>
<head>
<meta http-equiv="Content-Language" content="de">


<title>- .:: Welcome ² eDrinks ::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="keywords" content="Keywords here">
<meta name="description" content="Description here">


<script language="JavaScript" type="text/JavaScript" src="js/datus.js"></script>
<script type="text/javascript" src="js/mover.js"></script>


<LINK href="css/flyouts.css" type=text/css rel=StyleSheet>




</head>


<link href="css/datus.css" rel="stylesheet" type="text/css">


<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/btn_home_dn.jpg','images/btn_about_dn.jpg','images/btn_contact_dn.jpg','images/btn_products_dn.jpg','images/btn_support_dn.jpg','images/btn_news_dn.jpg')">
<table width="100%" height="582" border="0" cellpadding="0" cellspacing="0">
  <tr> 
	<td height="87"><table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr> 
		  <td width="342" rowspan="2">
		  <img src="images/toplogo+.jpg" width="342" height="87"></td>
		 <td width="34" rowspan="2"><img src="images/topmidspace.jpg" width="34" height="87"></td>
		 <td background="images/topbg.jpg"><img src="images/topbg.jpg" width="1" height="54"></td>
		</tr>
		<tr> 
		  <td background="images/topnavbg.jpg">
		  <a href="Frame2.htm" target="I2">
		 <img src="images/btn_home.jpg" name="btn_home" width="55" height="33" border="0" id="btn_home" onMouseOver="MM_swapImage('btn_home','','images/btn_home_dn.jpg',1)" onMouseOut="MM_swapImgRestore()"></a>
		  <img src="images/navspacer.jpg" width="1" height="33">
		  <a href="/Temp4/php/gbooke/gb.php" target="I2">
		 <img src="images/btn_about.jpg" name="btn_about" width="58" height="33" border="0" id="btn_about" onMouseOver="MM_swapImage('btn_about','','images/btn_about_dn.jpg',1)" onMouseOut="MM_swapImgRestore()"></a>
		  <img src="images/navspacer.jpg" width="1" height="33">
		 <img src="images/btn_products.jpg" name="btn_contact" width="79" height="33" id="btn_contact" onMouseOver="MM_swapImage('btn_contact','','images/btn_products_dn.jpg',1)" onMouseOut="MM_swapImgRestore()">
		  <img src="images/navspacer.jpg" width="1" height="33">
		 <img src="images/btn_contact.jpg" name="btn_products" width="67" height="33" id="btn_products" onMouseOver="MM_swapImage('btn_products','','images/btn_contact_dn.jpg',1)" onMouseOut="MM_swapImgRestore()">
		  <img src="images/navspacer.jpg" width="1" height="33">
		 <img src="images/btn_support.jpg" name="btn_support" width="72" height="33" id="btn_support" onMouseOver="MM_swapImage('btn_support','','images/btn_support_dn.jpg',1)" onMouseOut="MM_swapImgRestore()">
		  <img src="images/navspacer.jpg" width="1" height="33">
		 <!-- <img src="images/btn_news.jpg" name="btn_news" width="50" height="33" id="btn_news" onMouseOver="MM_swapImage('btn_news','','images/btn_news_dn.jpg',1)" onMouseOut="MM_swapImgRestore()"> -->
		  </td>
		</tr>
	  </table></td>
  </tr>
  <tr> 
	<td valign="top" height="478">
<table width="100%" height="437" border="0" cellpadding="0" cellspacing="0" background="images/topnavbg.jpg">
		<tr> 
		 <td height="11" colspan="2" background="images/basebg2.jpg"><img src="images/basebg2.jpg" width="1" height="9"></td>
		</tr>
		<tr> 
		  <td width="150" rowspan="2" valign="top" height="426">
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
			  <tr>
				<td valign="top">
				  <!-- Navigation -->
				<TR>
			  <TD height="1" COLSPAN=1 width="150"></td>
			   </tr>
			  </TD>
				</TR>
		   <table width="150" cellpadding="0" cellspacing="0" height="34">
		  <tr>
		 <TD valign=top width=150 height="50" >


	  <SCRIPT src="js/flyouts.js" type=text/javascript></SCRIPT>


	  <DIV class=contentForSupported>
	  <DIV class=one><SPAN class=flyoutRoot>
	  <DIV class=hiddenFlyout><A class=flyoutLinkRoot
	  onmouseover=autoOpenOver(this.parentNode,1);
	  onclick="toggle(this.parentNode,1);event.cancelBubble=true;return false;"
	  onmouseout=autoOpenOut(1); href="index.html">Drinks</A>
	 /* hierstehen normalerweisse noch submenues mit verlinkung auf PHP-Skript welches dann Cocktails auf den Iframe "I2" darstellt. */
	  <DIV class=setOrigin>
	 <DIV class=flyoutDiv onmouseover=flyoutOver(this,1,event); onclick=event.cancelBubble=true; onmouseout=flyoutOut(1);>
	  <DIV class=flyoutBackground><A class=LinkInFlyoutBold title="">Drinks</A>


	  </DIV></DIV></DIV></DIV></SPAN></DIV>


	  <DIV class=one>
	  <SPAN class=flyoutRoot>
	  <DIV class=hiddenFlyout>
	  <A class=flyoutLinkRoot
	  onmouseover=autoOpenOver(this.parentNode,1);
	  onclick="toggle(this.parentNode,1);event.cancelBubble=true;return false;"
	  onmouseout=autoOpenOut(1); href="index.html">Die Zutaten</A>


	  <DIV class=setOrigin>
	  <DIV class=flyoutDiv onmouseover=flyoutOver(this,1,event);
	  onclick=event.cancelBubble=true; onmouseout=flyoutOut(1);>
	  <DIV class=flyoutBackground><A class=LinkInFlyoutBold title="">Die Zutaten</A>




	  </DIV></DIV></DIV></DIV></SPAN></DIV>


	  <DIV class=one><SPAN class=flyoutRoot>
	  <DIV class=hiddenFlyout><A class=flyoutLinkRoot
	  href="php/lexikon.php" target="I2">Mixology</A>


	  </DIV></SPAN></DIV></DIV>

	<p><IMG height=1 alt="" src="js/s.gif" width=154>
	</TD>
	</tr>
			 <td><img src="images/arrow.jpg" width="20" height="10"><b><font color="#2271A0">News
			    / Events</font></b></td>
			  </tr>
			  <tr>
			 <td><img src="images/spacer.gif" width="1" height="1">
				 <table width="229" border="0" cellspacing="0" cellpadding="0" height="307">
					<tr>
					 <td width="20" rowspan="3" height="72"><img src="images/spacer.gif" width="20" height="1"></td>
					</tr>
					<tr> 
					 <td class="sidelinks2" height="12" width="209">16.02.2005</td>
					</tr>
					<tr> 
					 <td class="sidelinks2" height="48" width="209">Neuer Cocktail
					 <br>
					 Easy Rider<br> <br>
					 <a href="#" class="sidelinks2">&gt;&gt; mehr</a></td>
					</tr>
					<tr>
					 <td rowspan="3" height="85" width="20"><img src="images/spacer.gif" width="20" height="1"></td>
					 <td height="25" width="209"><br>
					 <span class="sidelinks">Buch Tip</span></td>
					</tr>
					<tr>
					 <td class="sidelinks2" height="12" width="209">29.11.2004</td>
					</tr>
					<tr>
					 <td class="sidelinks2" height="48" width="209"> 1000 Cocktails and more...
					 <br> <br>
					 <a href="#" class="sidelinks2">&gt;&gt; mehr</a></td>
					</tr>
					<tr>
					 <td rowspan="3" height="73" width="20"><img src="images/spacer.gif" width="20" height="1"></td>
					 <td height="25" width="209"><br>
					 <span class="sidelinks">Statistik</span></td>
					</tr>
					<tr>
					 <td class="sidelinks2" height="12" width="209">27.11.2004</td>
					</tr>
					<tr>
					 <td class="sidelinks2" height="36" width="209">aktuelle Pagestatistik
					 <br> <br>
					 <a href="#" class="sidelinks2">&gt;&gt; mehr</a></td>
					</tr>
					<tr>
					 <td rowspan="3" height="77" width="20"><img src="images/spacer.gif" width="20" height="1"></td>
					 <td height="17" width="209"><br>
					 <span class="sidelinks">Aktuelles</span></td>
					</tr>
					<tr>
					 <td class="sidelinks2" height="12" width="209">22.11.2004</td>
					</tr>
					<tr>
					 <td class="sidelinks2" height="48" width="209">
					 Cocktail of the Moment<br>Sex on the Beach
					 <br>
					 <br>
					 <a href="" onClick="parent.I2.location='php/einzelanzeige.php?uebergabe=Campari Orange';return false;"onmouseover="on2();" onmouseout="off2()">&gt;&gt; mehr</a></td>
					</tr>
				  </table></td>
			  </tr>
			</table></td>

		  <td valign="top" bgcolor="#FFFFFF" height="454"> 
		    <table width="100%" border="0" cellpadding="0" cellspacing="0">
			  <tr>
			 <td height="29" colspan="3" background="images/navbasebg.jpg"><img src="images/navbasebg.jpg" width="1" height="29"></td>
			  </tr>
			  <tr>
			    <td width="30">&nbsp;</td>
				<td>
			    <!-- Anfang Großer Mittlerer Frame -->
				 <iframe name="I2" width="750" height="401" src="Frame2.htm" marginwidth="0" marginheight="0" scrolling="no" noresize border="0" frameborder="0">
					 Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.</iframe>
				 </td>
			    <td width="20">&nbsp;</td>
			  </tr>
			</table></td>
		</tr>
		<tr>
		  <td bgcolor="#FFFFFF" height="1">&nbsp;</td>
		</tr>
	  </table></td>
  </tr>
  <tr> 
	<td height="1" background="images/basebg1.jpg">&nbsp;</td>
  </tr>
  <tr>
	<td height="1" valign="top" background="images/basebg2.jpg">
	<table width="100%" border="0" cellspacing="0" cellpadding="0" height="16">
	  <tr>
		<td height="16" class="baseline">&nbsp;&nbsp;© Copyright 2004 eDrinks.de All Rights
		Reserved.</td>
		<td align="right" class="baseline" height="16"></td>
	  </tr>
	</table></td>
  </tr>
</table>
</body>
</html>

Alles anzeigen

CSS-Datei

Code

.setOrigin {
	Z-INDEX: 2; LEFT: 0px; POSITION: relative; TOP: 0px
}
.flyoutDiv {
	BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; WIDTH: 240px; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute; BACKGROUND-COLOR: #cccccc
}
.flyoutest {
	BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; WIDTH: 40px; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute; BACKGROUND-COLOR: #cccccc
}
.one .flyoutDiv {
	LEFT: 151px; TOP: -21px
}


.one2 .flyoutest {
	LEFT: 151px; TOP: -21px
}
.two .flyoutDiv {
	LEFT: 234px; TOP: -15px
}


.two2 .flyoutest {
	LEFT: 234px; TOP: -15px
}




.flyoutBold .flyoutDiv {
	TOP: -20px
}


.flyoutBoldt .flyoutest {
	TOP: -20px
}


.hiddenFlyout .flyoutDiv {
	DISPLAY: none
}


.hiddenFlyout .flyoutest {
	DISPLAY: none
}




.flyoutLink {
	BACKGROUND-POSITION: 230px 50%; MARGIN-TOP: 0px; DISPLAY: block; MARGIN-BOTTOM: 0px; BACKGROUND-REPEAT: no-repeat; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; POSITION: relative; TEXT-DECORATION: none
}
.flyoutLinkBold {
	BACKGROUND-POSITION: 230px 50%; MARGIN-TOP: 0px; DISPLAY: block; MARGIN-BOTTOM: 0px; BACKGROUND-REPEAT: no-repeat; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; POSITION: relative; TEXT-DECORATION: none
}
.flyoutLinkRoot {
	BACKGROUND-POSITION: 230px 50%; MARGIN-TOP: 0px; DISPLAY: block; MARGIN-BOTTOM: 0px; BACKGROUND-REPEAT: no-repeat; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; POSITION: relative; TEXT-DECORATION: none
}
.flyoutLinkRoot {
	BACKGROUND-POSITION: 147px 50%
}
.flyoutLinkRoot {
	PADDING-LEFT: 7px; FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-LEFT: 0px; COLOR: #FFFFFF; PADDING-TOP: 3px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 22px
}
.hiddenFlyout .flyoutLinkRoot {
	PADDING-LEFT: 7px; FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-LEFT: 0px; COLOR: #FFFFFF; PADDING-TOP: 3px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 22px
}
.hiddenFlyoutt .flyoutLinkRoot {
	PADDING-LEFT: 7px; FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-LEFT: 0px; COLOR: #FFFFFF; PADDING-TOP: 3px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 22px
}
.flyoutLink {
	PADDING-LEFT: 7px; FONT-SIZE: 10px
}
.flyoutLinkBold {
	PADDING-LEFT: 7px; FONT-SIZE: 10px
}
.flyoutLink {
	PADDING-TOP: 1px; HEIGHT: 15px
}
.flyoutLinkBold {
	FONT-WEIGHT: bold; PADDING-TOP: 3px; HEIGHT: 19px
}
.hiddenFlyout .flyoutLink:hover {
	COLOR: #ffffff; BACKGROUND-COLOR: #666666
}
.hiddenFlyout .flyoutLinkBold:hover {
	COLOR: #ffffff; BACKGROUND-COLOR: #666666
}
.hiddenFlyout .flyoutLinkRoot:hover {
	COLOR: #ffffff; BACKGROUND-COLOR: #666666
}
.visibleFlyout .flyoutLink {
	COLOR: #ffffff; BACKGROUND-COLOR: #A2A2A2
}
.visibleFlyout .flyoutLinkBold {
	coLOR: #ffffff; BACKGROUND-COLOR: #A2A2A2
}
.visibleFlyout .flyoutLinkRoot {
	COLOR: #ffffff; BACKGROUND-COLOR: #A2A2A2
}
.hiddenFlyout .flyoutLink {
	COLOR: #000000; BACKGROUND-COLOR: #cccccc
}
.hiddenFlyout .flyoutLinkBold {
	COLOR: #000000; BACKGROUND-COLOR: #cccccc
}
.flyoutLinkBold {
	FONT-WEIGHT: bold; COLOR: #000000; BACKGROUND-COLOR: #cccccc
}
.hiddenFlyout .flyoutLinkBold {
	FONT-WEIGHT: bold; COLOR: #000000; BACKGROUND-COLOR: #cccccc
}
.moreLink {
	DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #000000; PADDING-TOP: 3px; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; HEIGHT: 20px; TEXT-DECORATION: none
}
.moreLink:hover {
	COLOR: #ffffff; BACKGROUND-COLOR: #666666
}
.linkInFlyout {
	DISPLAY: block; PADDING-LEFT: 6px; FONT-SIZE: 10px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 3px; COLOR: #000000; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; POSITION: relative; TEXT-DECORATION: none
}
.linkInFlyoutBold {
	DISPLAY: block; PADDING-LEFT: 6px; FONT-SIZE: 10px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 3px; COLOR: #000000; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; POSITION: relative; TEXT-DECORATION: none
}
.linkInFlyout {
	MARGIN-TOP: 2px; MARGIN-BOTTOM: 2px; LINE-HEIGHT: 80%
}
.one .linkInFlyout:hover {
	COLOR: #ffffff; BACKGROUND-COLOR: #A2A2A2
}
.one2 .linkInFlyout:hover {
	COLOR: #ffffff; BACKGROUND-COLOR: #A2A2A2
}
.two .linkInFlyout:hover {
	COLOR: #ffffff; BACKGROUND-COLOR: #666666
}


.two2 .linkInFlyout:hover {
	COLOR: #ffffff; BACKGROUND-COLOR: #666666
}
.linkInFlyoutBold {
	FONT-WEIGHT: bold
}
.linkInFlyoutBold:hover {
	COLOR: #ffffff; BACKGROUND-COLOR: #A2A2A2
}
.bar {
	BORDER-TOP: #666666 1px solid; WIDTH: 100%
}
.bar2 {
	BORDER-TOP: #666666 1px solid; WIDTH: 100%
}
.halfBar {
	MARGIN: 0px 10%; HEIGHT: 7px
}
.halfBar2 {
	MARGIN: 0px 10%; HEIGHT: 7px
}


.linkRoot {
	MARGIN-TOP: 0px; DISPLAY: block; PADDING-LEFT: 7px; FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-BOTTOM: 0px; COLOR: #333333; PADDING-TOP: 5px; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; POSITION: relative; HEIGHT: 18px; TEXT-DECORATION: none
}
.noFlyout {
}
.non-flyoutLinkRoot {
	MARGIN-TOP: 0px; DISPLAY: block; PADDING-LEFT: 7px; FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-BOTTOM: 0px; MARGIN-LEFT: 0px; COLOR: #990000; PADDING-TOP: 3px; BORDER-BOTTOM: #cccccc 1px solid; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; POSITION: relative; HEIGHT: 22px; TEXT-DECORATION: none
}
.non-flyoutLinkRoot:hover {
	COLOR: #ffffff; BORDER-BOTTOM: #ffcccc 1px solid; BACKGROUND-COLOR: #666666
}
.flyoutDiv .flyoutDiv {
	BACKGROUND: url(/swa/i/spacer_grey.gif)
}
.flyoutest .flyoutest {
	BACKGROUND: url(/swa/i/spacer_grey.gif)
}
.flyoutBackground {
	PADDING-TOP: 1px; BACKGROUND-COLOR: #cccccc
}

Alles anzeigen

supersonnig

ist zwar keine lösung deines problemes, weil du mit frames arbeitest ... trotzdem insteressant (und mir lieber als diese javascript menüs)

http://www.alistapart.com/articles/horizdropdowns/

Jetzt mitmachen!