Adding backgrounds to 3 eq col w head and foot

[artslayer]

I have a design that is starting with the 3 column fluid layout and adding nested divs with background images to make an onion skinned type background that expands with the 4 corners of the browser window edges. If the divs are simply nested on the outside of the 3 col markup, the design changes and voids the nice behaviors.
How does one make the outside nested image divs act just like with the 3 column outer div? Is there a better way to get this effect? Please help.

[Paul O'B]

Hi,

I'm not quite sure what you are asking exactly but I assume that you have a fluid layout and you are trying to place images in relation to the layout (like rounded corners etc).

You can place elements in relation to another element by using a stacking context by giving the parent a position:relative. You could then position them in relatioon to the parents corners but you can then place them absolutely outside the parent into the desired position. That way their position will be dependent on the parents.

However in a fluid layout Ie does have a rounding bug and will quite often be a 1 pixel out on every odd pixel when the screen is resized. This can make it difficult to place things perfectly (like rounded corners on a div). This does vary with the type of layout and with the dimensions also so you need to play around a bit.

If you had a link or some code of what you were doing then you might get more pertinent suggestions to your layout.

Paul

[artslayer]

I set a link to view
http://pinched.com/bsp/

Ultimately all images will go to the edge of the browser with minimum height and width (800x600) contraints so the images do not collapse on themselves. I hope this explains better.

[artslayer]

A deadline is passing so I will have to change my question to: Is this design possible and if it is, how much would I expect to pay for this layout to be done outsourced? I have an idea where but not the value. Maybe a design comprise in the end. Any ideas?

I have spent many long hours researching CSS Layout and have not found a way to adapt the best examples the web has to offer. Help?

[Paul O'B]

HI,

Your page is ok but the design will ulimately fail becuase IE has no min-width. You can set a min-width for mozilla which will stop the page from getting smaller but you would need to use some js for ie to do that or use ie only expressions.

Something like this

<!--[if gte IE 5]>
<style type="text/css">
#outer {width:expression( documentElement.clientWidth < 760 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 760 ? "760" : "auto") : "760px") : "auto" );}
</style>
<![endif]-->

Assuming your main page wrapper is called outer and holds everything.

Then you could just set a min-width in the body for moziila .

body {min-width:760px}

I think thats the only solution or using a table to hold everything.

Paul

[artslayer]

Thanks for all your help, really...
I did manage to get something to work but I dropped the footer because it goes beyond bottom margins and breaks the design in Netscape
http://www.pinched.com/bsp/home.html
I am dropping the footer for now... oh well.

[Paul O'B]

It looks pretty good to me

I did play with it and get a version that workes perfectly in ie but moz won't inherit the 100% height for the footer. The problem is that moz will only inhereit 100% from the body and onto the first wrapper and no further. All further nestings collapse to zero even if 100% is specified.

paul

[artslayer]

Found out the same here, perfect in IE but lacking elsewhere. The divs create all this extra space at the bottom for Netscape. Perplexing.

I am probably going to work on it to see if it possible (later). If in the meantime there are any suggestions I would appreciate it.

http://www.bluesonicpro.com/home.html will get you to a better version. Feel free to pick it apart and suggest if need be. Thanks for your time.