PDA

View Full Version : iframes with layers ontop

kwhubby
03-28-2003, 11:55 PM
hi Im tring to make a page that has an iframe with a layer on top, I want to do this for a menue system for navigation, but when I put both the iframe and layer in seperate div tags and make the menue layer on top, the menue layer is behind the iframe. Does any body have an idea on how to make the layer ontop the iframe. I was able to do this somehow on a computer with windows xp and ie 6.0
but not 5.0 windows 98

is this attempt stupid, and should i just have the menue layer appear in the iframe and stay in place with javascript??. I wanted to avoid that since when you scroll in the iframe the menue would jiggle up and down, and it would be lot simpler just to have layers ontop the iframe.
Antoniohawk
03-29-2003, 12:06 AM
To make a layer on top of something, you have to change the z-index. If your iframe has a z-index of 1 and your layer has one of 2 then the layer will be on top. Since you want the layer inside the iframe, you need to have the source of it in an html page and wont need the z-index part.

Your i-frame:
<iframe src="mypage.html"></iframe>

The html page:
<html>
<body>
<div>Blah</div>
</body>
</html>

To get the layer to move when you scroll, though you will need a javascript. I hope that works, ill check and see if it works and post back here.
kwhubby
03-29-2003, 12:14 AM
yeah i know about z-index but it does not seem to effect the iframe, it appears that the iframe is always on top no matter what.

p.s I want the layer on the page with the <iframe> not in the iframes src page
Animan
03-29-2003, 12:30 AM
did u put z-index in style or just in the tag???
kwhubby
03-29-2003, 12:33 AM
the style tag so like this
<div style="z-index:2">.......</div>
<div style="z-index:1"><iframe src="google.com"></div>
liorean
03-29-2003, 12:37 AM
Because of the implementation of iframes in most of the browsers, they are like the plugins and dropdown lists - they aren't rendered by the same instance of the html/xml/css renderer and thus aren't affected by css. I don't know about mozilla, but if any browser handles everything by itself that is mozilla - so it might be possible mozilla allows z-indicing iframes.
kwhubby
03-29-2003, 12:40 AM
it worked with ie 6 ! on windows xp!
liorean
03-29-2003, 12:51 AM
Yeah, ie6 took some effort in making z-indices work. Works for some plugins, like flash, as well. Not all, though.
kwhubby
03-29-2003, 06:48 AM
ok thanks i guess Ill go with the more complicated methode with creating a menue that stays-still-when-you-scroll (with javascript of course) in the iframe, and have the navigation thats outside of the iframe just tell the iframe to do a function triggered by onmouseover / onmouseout
Quiet Storm
03-29-2003, 05:33 PM
Why not just lower the iFrame and have the menu sitting above it on the original page? Why does it have to be 'on top' of the iFrame?

Also, you can only z-index something higher than an iFrame in IE5.5+ (not IE5.0). Not sure about other browsers, though.
kwhubby
03-29-2003, 11:09 PM
oh i was using ie 5.0 when i found that error... as i said ill just do it the more complex way, although im probly gonna post a thread in the javascript forum if i cant find the formula to keep a layer in a static position of the screen while the page scrolls. But i think i know how, just gotta go through my files to see.
Quiet Storm
03-29-2003, 11:30 PM
Again, why not have the 'menu' on the original page, not inside the iFrame? It won't go anywhere, I promise. :)


<div style="position:absolute; top:50px; left:50px;">
your menu here...</div>

<iframe style="position:absolute; top:75px; left:50px;"></iframe>
kwhubby
03-30-2003, 02:10 AM
your being confused of what i want... ill clearafy

on the main page ill have a bunch of buttons that on mouseover will make a "menu" expand over the iframe page.
the buttons will be as you say, but the onmousover expand "menue"" will need to be ontop, or in the iframe