gertle: iframe überdeckt Unternavigation

Beitrag lesen

SELF-Forum

iframe überdeckt Unternavigation

gertle
– Informationen zu den Bewertungsregeln

Sorry... ich bin absoluter neuling in dem bereich...

Im Menupunkt "Schmuck" sollten bei berührung mit dem Mauszeiger 5 Untermenüs nach unten hin angezeigt werden - was auf der ganzen Seite gut funktioniert. Als ich aber auf einer Seite ein iframe eingefügt habe (mit einer Bildergalerie-Verlinkung) wird von dem Untermenü nur noch ein Teil angezeigt weil der Rest vom iframe verdeckt wird.

Also hier ist mal der Quelltext der ganzen Seite:

<html>

<head>  
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">  

	<style type="text/css" media="screen">

body {
  color: #336699;
  background-color: #336699;
  font-size: 100.01%;
  font-family: Helvetica,Arial,sans-serif;
  text-align: center;
  margin: 5em auto;

}

div#container {
    text-align: center;
    margin: center;
    width: 850px;
    height: 360px;
    border: 0px  #000000;
    background: #ffffff;

}

#logo
{
border-right-width:10px;
border-right-style:solid;
border-right-color:#336699;
margin:0;
float: left;
width: 300px;
height: 600px;
text-align: center;
background-color: #ffffff;
background-repeat: no-repeat;
background-position: center 50px

}

#mainnav
{
margin: 0;
float: right;
width: 540px;
height: 40px;
background-color: #224568;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:#336699;
text-align: center;
}

#content
{
margin: 0;
float: right;
width: 540px;
height: 560px;
background-color: #ffffff;
text-align: center;
color: #000000;
}

ul#Navigation {
     margin: 0.35em; padding: 0.1em;
     text-align: center;
     font: 14px Tahoma;
   }
   ul#Navigation li {
     list-style: none;
     position: relative;
  display:   inline;
     padding: 5px 0px;
   }
  
   * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.8em;
   }
   *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
   }
  
   ul#Navigation li ul {
    margin: 0;
    padding: 0;
    position:      absolute;
    top: 2.1em; left: -0.9em;
    display:  none;  /* Unternavigation ausblenden */
    background: #ffffff;
   }
   * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -0.5em;
    lef\t: -0.4em;
   }
   *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    background-color: #224568;
    padding-bottom:0.0em;
   }
   ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
   }
   ul#Navigation li ul li {
    float:    none;
    display:   list-item;
    margin-bottom: 0.5em;
    background-color:  transparent;
  }

ul#Navigation a, ul#Navigation span {
     padding: 0px 0px;
     text-decoration:   none; font-weight:   none;
     color: #ffffff; background-color: #224568;
   }
   * html ul#Navigation a, * html ul#Navigation span {
    width: 0em;    /* nur fuer IE 5.0x erforderlich */
     w/idth: none;  /* sicherheitshalber fuer IE 6 zurueckgesetzt */
   }
   ul#Navigation a:hover, ul#Navigation span {
     color: #b7cbde; background-color: #224568;
   }
  
   li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color:  #ffffff; background-color:  #224568;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: #ffffff;
  }

</style>

<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE() {
    var LI = document.getElementById("Navigation").firstChild;
    do {
      if (sucheUL(LI.firstChild)) {
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

function sucheUL(UL) {
    do {
      if(UL) UL = UL.nextSibling;
      if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
  }

function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "#224568";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

window.onload=hoverIE;
}
</script>

</head>

<body>

<div id="container">  
	<div id="logo">  
		<p style="text-align:center; margin-top:0px">  
		<a href="home.html"><img src="images/logo\_beadbluelogo.jpg" border="0" align="top">  
		</p>  
	</div>  
	<div id="mainnav">  
			<ul id="navigation">  
				<li id="active"><a id="current" href="home.html">Home</a>&nbsp;|  
				<li><a href="ueberuns.html">Über&nbsp;uns</a>&nbsp;|  
				<li><a href="schmuck.html">Schmuck</a>  
				<ul>

<li><a href="halsschmuck.html">&nbsp;Halsschmuck&nbsp;</a></li>
         <li><a href="armschmuck.html">&nbsp;Armschmuck&nbsp;</a></li>
         <li><a href="ohrschmuck.html">&nbsp;Ohrschmuck&nbsp;</a></li>
         <li><a href="ringe.html">&nbsp;Ringe&nbsp;</a></li>
         <li><a href="diverses.html">&nbsp;Diverses&nbsp;</a></li>
         </ul>&nbsp;|
<li><a href="glasperlen.html">Glasperlen</a>
<ul>
         <li><a href="glasperlen_bilder.html">&nbsp;Bilder&nbsp;</a></li>
         </ul>&nbsp;|
<li><a href="fusing.html">Fusing</a>&nbsp;|
<li><a href="events.html">Events</a><ul>
         <li><a href="events_bilder.html">&nbsp;Bilder&nbsp;</a></li>
         </ul>&nbsp;|
<li><a href="kontakt.html">Kontakt</a>&nbsp;|
<li><a href="impressum.html">Impressum</a>
</ul>
</div>
<div id="content">
<p style="text-align:center; text-align:center; margin-top:40px";>
<iframe src="galerien/Halsschmuck/index.html" frameborder="0" scrolling="no" align="bottom" height="93%" width="100%"></iframe>
</p>
</div>
</div>

</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln