...

View Full Version : Div overlay headache! Trying to overlay image with html



fidgen
05-08-2009, 04:04 PM
I think this is a Friday afternoon one - my brain seems to be cheese!

I'm trying to overlay part of my header with 50px of the content div. The content div has a background image and the overall effect should be that the bgimage pokes into the header.

And I can't do it ^^

Here's the relevant bits of the code -

Note that each section of the page has it's own wrapper so that it can have a repeat-x background.

If you put this into a test page, the banner overlays the content bgimage, not the other way round.

Thanks for any suggestions!



<div id="header">
<div id="menu"><img src="images/menu.jpg" width="980" height="97"/></div>
<div id="banner"><img src="images/banner.jpg" width="980" height="400"/></div>
</div>

<div id="bgimage">
<div id="content">
<div class="block_left">
<h1>Lorem ipsum dolor sit amet</h1>
</div>
<div class="block_middle">
<p style="text-align:justify; margin-bottom:20px;">Lorem ipsum dolor sit amet</p>
<p style="text-align:justify">Lorem ipsum dolor sit amet</p>
</div>
<div class="block_right">
<p style="text-align:justify">Lorem ipsum dolor sit amet</p>
</div>
<div style="clear:left"></div>
</div>
</div>

<div id="footer1">
<div id="footer_pink">
<br /><br /><br />
</div>
</div>
<div id="footer2">
<div id="footer_purple">
<br /><br /><br />
</div>
</div>
<div id="legalstuff">Privacy Policy | Terms of Use | Accessibility Policy</div>






#header {
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
width:980px;
height:500px;
}
#menu {
width:980px;
height:97px;
background-color:green;
}
#banner {
width:980px;
height:400px;
background-image:url(images/bg_banner.jpg);
background-repeat:repeat-x;
z-index:2;
}
#bgimage {
margin-top:-50px;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
width:1094px;
height: 100%;
background-image:url(images/bg_content.png);
z-index:3;
}
#content {
width:980px;
margin-left:64px;
height: 538px;
background: transparent;
z-index:4;
}
.block_left {
float:left;
width:280px;
margin-left:50px;
margin-top:150px;
z-index:5;
}
.block_middle {
float:left;
width:390px;
margin-top:50px;
margin-right:10px;
z-index:5;
}
.block_right {
float:left;
width:180px;
margin-top:50px;
z-index:5;
}
#footer1 {
clear:both;
width:100%;
background-color:#ffdce8;
}
#footer_pink {
width:980px;
margin:0 auto;
background-color:#ffdce8;
}
#footer2 {
clear:both;
width:100%;
background-color:#702a68;
}
#footer_purple {
width:980px;
margin:0 auto;
background-color:#702a68;
}
#legalstuff {
width:980px;
margin:0 auto;
background-color:#ffffff;
}

SB65
05-10-2009, 08:37 AM
Looks like nobody else wants a stab at this one so I'll have a go.

Try adding:


position:relative;

to your css for #bgimage. Z-index won't work without it.

fidgen
05-11-2009, 11:31 AM
Hmm that didn't work i'm afraid.

I've gone back to complete basics to try and understand the problem - I've literally just got 2 divs, one with a flash file and one with a bgimage.

I'm trying all sorts of combinations but i'm damned if I can get the bgimage of the overlay div to display on top of the flash!

Is it even possible? I guess flash is rendered seperate to html in the DOM?

abduraooft
05-11-2009, 11:50 AM
Your intention is not clear from the above posted code. Could you post a link to your page and reexplain on the basis of that.

fidgen
05-11-2009, 11:54 AM
Wait...

Wait...

Colleague has just pointed out that flash needs the wmode parameter! Guess what... everything works :)

Turns out my markup was spot on, just the flash needs the transparancy property.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum