homepage Welcome to WebmasterWorld Guest from 54.237.134.62
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
z-index backgrounds with floats and semi-elastic layout
waterox




msg:3820165
 12:55 pm on Jan 6, 2009 (gmt 0)

Hi,

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]

 

4css




msg:3820239
 2:38 pm on Jan 6, 2009 (gmt 0)

Hi waterox,

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.

waterox




msg:3820328
 4:47 pm on Jan 6, 2009 (gmt 0)

Sorry about the posting of url's.
This is as simple as the code can get to render the layout I need.
Firstly, my main page layout:

<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?

4css




msg:3821024
 2:03 pm on Jan 7, 2009 (gmt 0)

With z-index, what you are actually doing is creating layers with your images.

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! :)

waterox




msg:3821050
 2:31 pm on Jan 7, 2009 (gmt 0)

What I wanted to do was to place left and rightChunk divs independently and on top of the bg divs, which were to be floated and on a lower z-index than the content.

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

4css




msg:3821276
 6:49 pm on Jan 7, 2009 (gmt 0)

Great to see that you got this working!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved