...

View Full Version : Iframe Div Overlapping issue



dk4210
11-01-2011, 10:12 PM
Hello Can some one help me with a problem Problem with my iframe div overlapping another div.
http://screencast.com/t/uFdidurNxC




<div class="iframe1">
<iframe src="image_upload/main/index.php?test=21" id="MyFrame"
frameborder="0" marginheight="0" marginwidth="0"
width="900px" height="900px" scrolling="auto"></iframe>
<div>
<div class="clear">&nbsp;</div>
<div id="adcanvas" class="bldtxt">Place Ad</div>


css for both




#adcanvas {
background-color:#c6c7c9;
width:900px;
margin:20px;
}

.iframe1 {
height:100px;
margin-bottom:5px;
}




How can I get the other div to just move down instead of it over lapping



Please advise..

Thanks, Dan

Sammy12
11-02-2011, 12:41 AM
try setting a z-index: 1; to the element you want behind and a z-index: 2; to the element you want in front.

if that doesn't work, add position: relative; to the element you want in front



/* front */
z-index: 2;
position: relative;

/* behind */
z-index: 1;

dk4210
11-02-2011, 12:45 AM
Thanks Sammy for the reply but what if you want them both even, meaning no overlapping under or over?

When I do it the way you suggested I get this as a result

http://screencast.com/t/djNLbrgFPZ

Sammy12
11-02-2011, 01:13 AM
you mean you want the "place ad" in front of the other, but you want it transparent?

or do you want place ad below the bordered element?

tracknut
11-02-2011, 01:21 AM
Hello Can some one help me with a problem Problem with my iframe div overlapping another div.
http://screencast.com/t/uFdidurNxC




<div class="iframe1">
<iframe src="image_upload/main/index.php?test=21" id="MyFrame"
frameborder="0" marginheight="0" marginwidth="0"
width="900px" height="900px" scrolling="auto"></iframe>
<div>
<div class="clear">&nbsp;</div>
<div id="adcanvas" class="bldtxt">Place Ad</div>


css for both




#adcanvas {
background-color:#c6c7c9;
width:900px;
margin:20px;
}

.iframe1 {
height:100px;
margin-bottom:5px;
}



How can I get the other div to just move down instead of it over lapping


I haven't tested, but in your iframe you're declaring the height to be "900px" (by the way, remove the "px" from that and the width of the iframe), and in your class .iframe1 you declare the height to be 100px. My guess is the second div is sitting right below the 100px height. So change the class to be 900px like your iframe and see if that works.

Dave

dk4210
11-02-2011, 11:57 AM
Hi Track nut!

I tried that and it still did not work for me.. I don't want to change the .iframe1 to 900px because it would make the height too much(tested it). I want the height of the div to be 100px. I just want the bottom div to move when the iframe1 div expands and not overlap.

dk4210
11-02-2011, 12:03 PM
Sammy,

No I want this



------------------------------------------------------
. .
. .iframe1(div) .
------------------------------------------------------

As .iframe1 div expands it pushes the .adcanvas div downward

|
|
\/

------------------------------------------------------
- -
- .adcanvas(div) -
------------------------------------------------------

tracknut
11-02-2011, 04:11 PM
width="900px" height="900px" scrolling="auto"></iframe>




I don't want to change the .iframe1 to 900px because it would make the height too much(tested it). I want the height of the div to be 100px.

So I must be confused then. If you want it 100px, what is the purpose of the frame size height setting to "900px"?

Do you have this code online somewhere that we can see the actual page?

Dave



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum