Forum Moderators: not2easy
I am trying to find out out if it is possible to combine the effects of these two pages.
<snip>
index is the page layout as I would like it, but combined with the background of index-test.
CSS3 multiple backgrounds are out due to limited compatibility.
I have tried using a z-index, but as far as I can make out from the w3 site, z-index only works on 'positioned' (not floated) elements. Is this the case?
Due to the elasticity of #leftChunk's content, my cloud background also has to have an elastic 'middle section and left and right parts floated left and right.
There does need to be some overlap of the content and left & right backgrounds.
CSS is here:
<snip>
Can anyone think of a better solution to this problem?
[edited by: swa66 at 2:44 pm (utc) on Jan. 6, 2009]
[edit reason] No personal URL, please see ToS [/edit]
Please read the Forum Charter [webmasterworld.com] In regards to the posting of url's.
If you can still edit your post, please remove them. If not a mod will be along to remove them.
In the forum Charter you will read about how to post your code so that we can view your code and help you out with your problems.
You can post your css and your (x)html for us to go through.
Also, please make sure you have the correct DTD as well as making sure that your page validates before you post your code.
<html>
<head>
<style>
*
{margin: 0;}
html, body
{height: 100%; margin: 0 auto; padding: 0; background: #fff;}
/* hack for ie6 770px fixed if no js, or will stretch if js enabled */
* html #bandMain {
width: 780px;
width: expression((document.body.clientWidth>1250) ? "970px" : ((document.body.clientWidth>800) ? "auto" : "780px"));
}
/* hack also needed for sticky footer */
* html #footer {
width: 770px;
width: expression((document.body.clientWidth>1250) ? "970px" : ((document.body.clientWidth>800) ? "auto" : "770px"));
}
#bandMain { margin: 0 auto; padding: 0; min-width: 780px; max-width: 970px; min-height: 100%; height: auto !important; height: 100%; background: #f6f3e1; }
#leftChunk { padding: 0 400px 30px 40px; margin: 0 0 80px; 0; background: #f6f3e1; border: 1px solid red; height: 300px;}
#rightChunk { background: #fff; float: right; padding: 15px 10px 15px 10px; width: 310px; border: 1px solid #ccc; margin: 50px 10px 80px 10px; }
.footer, .push { height: 250px; clear: both; /* .push must be the same height as .footer */ }
.footer { min-width: 770px; max-width: 970px; }
</style>
</head>
<body>
<div id="bandMain">wrapper
<div id="rightChunk">rightChunk</div>
<div id="leftChunk">leftChunk</div>
</div>
<div class="footer">footer</div>
</body></html>
I then need to display under this layout (adding a higher z-index to bandMain obviously), the following:
<div id="bandMain">
<div id="bgContainer">
<div id="bgRight"></div>
<div id="bgLeft"></div>
</div>
</div>
like this:
#bgContainer { z-index: 10; background: url(../images/LTT-middle.gif) repeat-x; height: 18px;}
#bgLeft { z-index: 10; float: left; background: url(../images/LTT-left.gif) no-repeat top left; height: 505px; width: 280px;}
#bgRight { z-index: 10; float: right; background: url(../images/LTT-right.gif) no-repeat top left; height: 505px; width: 280px;}
Individually they work. Together they do not. Is this possible with z-index or is there another way?
Right now, all of your images are on the same layer, they are all 10's which put them at the same spot.
What you need to do is change your layer numbers. The lower the number the lower to the bottom the image is. So if you want to put them over each other in a certain manner you would assign them different numbers.
Say, like 1, 2, 3. One being the bottom, 3 being the top and 2 being the middle.
I'm not sure if this will help you or not. You could also look up z-index tutorials on google.
Here is a start for you [google.com]
I hope that this helps you out a bit! :)
I found a solution using an extra 3 full-width wrappers for the bg:
#bgMiddle { background: url(../images/LTT-middle.gif) repeat-x top; height: 18px; }
#bgLeft { background: url(../images/LTT-left.gif) no-repeat top left; height: 505px; }
#bgRight { background: url(../images/LTT-right.gif) no-repeat top right; height: 505px; }
The content is then placed inside and can be positioned as normal.
Thanks
