nicht angemeldet
iframe überdeckt Unternavigation
Gunnar Bittersmann
Gernot BackHallo zusammen
Auf meiner website (mit CCS) habe ich eine horizontale Navigationsleiste und darunter einen container indem ich ein iframe eingefügt habe. Die Navigationsleiste hat noch Unternavigationen welche nun vom iframe überdeckt werden. Wie kann ich das ändern?
Grüsse
gertle
-
@@gertle:
nuqneH
Wie kann ich das ändern?
Eine Problembeschreibung wäre ein Anfang.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
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> | <li><a href="ueberuns.html">Über uns</a> | <li><a href="schmuck.html">Schmuck</a> <ul><li><a href="halsschmuck.html"> Halsschmuck </a></li>
<li><a href="armschmuck.html"> Armschmuck </a></li>
<li><a href="ohrschmuck.html"> Ohrschmuck </a></li>
<li><a href="ringe.html"> Ringe </a></li>
<li><a href="diverses.html"> Diverses </a></li>
</ul> |
<li><a href="glasperlen.html">Glasperlen</a>
<ul>
<li><a href="glasperlen_bilder.html"> Bilder </a></li>
</ul> |
<li><a href="fusing.html">Fusing</a> |
<li><a href="events.html">Events</a><ul>
<li><a href="events_bilder.html"> Bilder </a></li>
</ul> |
<li><a href="kontakt.html">Kontakt</a> |
<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>-
@@gertle:
nuqneH
wird von dem Untermenü nur noch ein Teil angezeigt weil der Rest vom iframe verdeckt wird.
Kann ich nicht nachvollziehen. In welchem Browser soll das der Fall sein?
Und „Online-Beispiele haben den Vorteil, dass ich keine Copy&Paste-Orgie starten muss, um dein Problem nachzuvollziehen.“ [ChrisB]
Also hier ist mal der Quelltext der ganzen Seite:
<html>http://de.selfhtml.org/css/formate/box_modell.htm#doctype_switch@title=Quirksmodus sollte man tunlichst vermeiden.
<style type="text/css" media="screen">Bist du sicher, dass bei der Druckausgabe keine Stilangaben von dir gelten sollen?
Und die Angabe von Medientypen sollte besser im Stylesheet, nicht im Markup geschehen.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
-
-
-
Hallo gertle,
Auf meiner website (mit CCS) habe ich eine horizontale Navigationsleiste und darunter einen container indem ich ein iframe eingefügt habe. Die Navigationsleiste hat noch Unternavigationen welche nun vom iframe überdeckt werden. Wie kann ich das ändern?
... indem du deine horizontal angeordneten Navigationspunkte (LI-Elemente erster Ordnung) relativ positionierst (was du ja aufgrund der herausklappenden und deshalb sicherlich absolut positionierten Unternavigationen (UL-Elemente zweiter Ordnung) sicherlich ohnehin gemacht hast, damit sie ich an ersteren ausrichten) und ihnen entweder einzeln oder ihrem positionierten Mutter-UL-Element einen höheren http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@title=Z-Index verpasst als dem im Quellcode vermutliche folgenden Container mit dem IFRAME-Element. Wenn du keinen Z-Index vergibst, dann hat automatisch alles, was im Quellcode später kommt, einen höheren Schicht-Index. Wahrscheinlich reicht es bereits, deiner Navigation insgesamt einen Z-Index von "1" zu geben.
Gruß Gernot
--
super me-
Hallo Gernot
Ich habe das mit dem z-index probiert aber es funktioniert trotzdem nicht.
Könnte es evtl. an dem sich im iframe befindenden java liegen?Das Problem taucht auf sobald man beim Menü 'Schmuck' auf eine der Untermenüs clickt und die simple-viewer Galerie auftaucht...
Grüsse
gertle-
Hallo gertle,
Das Problem taucht auf sobald man beim Menü 'Schmuck' auf eine der Untermenüs clickt und die simple-viewer Galerie auftaucht...
Es ist ziemlich klar, woran es liegt: Du bindest in der im Irame befindlichen Datei einen Flaschfilm über Javascript ein, hast aber die Zeile auskommentiert, die verhindert, dass der Flashfilm in Default-WMODE "window" geladen wird. (WMODE soll hier wohl im Flash-Sprech für "Fenstermodus" stehen). Mit WMODE "window" stanzt sich der Flashfilm durch alle darüberliegnden Layer wie ein Fenster durch und auch Z-Indizes werden wirkungslos:
//fo.addParam("wmode", "transparent");
Da dein Flashfilm aber gar keinen transparenten Hintergrund hat, binde ihn besser mit dem WMODE "opaque" ein, denn ansonsten werden die Animationen unnötig verlangsamt.
fo.addParam("wmode", "opaque");
Dann wirkt der vergebene Z-Index deiner Layer bestimmt auch wieder.Gruß Gernot
--
super me-
Hi Gernot
Da dein Flashfilm aber gar keinen transparenten Hintergrund hat, binde ihn besser mit dem WMODE "opaque" ein, denn ansonsten werden die Animationen unnötig verlangsamt.
fo.addParam("wmode", "opaque");Hab da jetzt mal rumprobiert aber irgendwie krieg ich das nicht hin.
Wo genau muss ich den code einfügen? :-/Gruss
gertle-
Hallo gertle,
fo.addParam("wmode", "opaque");Hab da jetzt mal rumprobiert aber irgendwie krieg ich das nicht hin.
Wo genau muss ich den code einfügen? :-/So wie du es gemacht hast, geht es auch bestimmt nichtnicht:
#flashcontent { wmode: transparent; /* das ist keine CSS-Angabe*/ }Da du dein Flash über JavaScript einbindest musst du wahrscheiinlich nur die letzte auskommentierte Zeile deines Scripts wieder einkommentieren. "transparent" ersetzt du dabei aber wie gesagt besser durch "opaque".
So sieht es da im Moment aus.
<script type="text/javascript">[code lang=javascript] var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#ffffff"); // SIMPLEVIEWER CONFIGURATION OPTIONS // To use an option, uncomment it by removing the "//" at the start of the line // For a description of config options, go to: // http://www.airtightinteractive.com/simpleviewer/options.html //fo.addVariable("xmlDataPath", "gallery.xml"); //fo.addVariable("firstImageIndex", "5"); //fo.addVariable("langOpenImage", "Open Image in New Window"); //fo.addVariable("langAbout", "About"); //fo.addVariable("preloaderColor", "#ffffff"); //fo.addParam("wmode", "transparent"); fo.write("flashcontent");</script>[/code]
Und so willst du es wahrscheinlich haben:
<script type="text/javascript">[code lang=javascript] var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#ffffff"); fo.addParam("wmode", "opaque"); fo.write("flashcontent");</script>[/code]
Generiert wird dann je nach Browser passender Code, wobei die WMODE-Eigenschaft entweder in einem PARAM-Kindelement des OBJECT-Elements oder als Attribut im EMBED-Element landet.
Vergleiche:
http://de.selfhtml.org/html/multimedia/objekte.htm#flash
http://www.adobe.com/de/support/flash/ts/documents/wmode.htm
Es geht nämlich auch ohne JavaScript oder wie der Kölner sagt:
"Mer kann och us Druve Wing maache. - Man kann auch aus Trauben Wein machen."Darüber hinaus kann man Flashfilme auch gleichzeitig ohne Javascript _und_ ohne das invalide EMBED-Element mit der Flash-Satay-Methode einbinden:
http://www.alistapart.com/articles/flashsatayGruß Gernot
--
super me
-
-
-
-