CODEWITHSUNDEEP
csslayoutliquid-layout
hanazair
hanazair

Reputation: 859

Liquid - Fixed - Liquid Layout

I'm working on this web-site: http://www.justaddsolutions.com/SampleSite/

The main area is meant to be 1024px wide and always centered, which is achieved. However my client would like the yellow and red strips to extend to the respected edges (yellow to the left and red to the right) of the browser window when browser window is wider than 1024px.

I thought to solve it with CSS-based Liquid - Fixed - Liquid Layout, where center part is centered and side parts have equal liquid widths. But I can't figure it out on my own and haven't been able to find anywhere how to do it either.

I did find Liquid-Fixed-Liquid Layout at mathewjamestaylor liquid layouts website, but it breaks in IE8 when the browser's window resized down to small size.

I then thought to achieve this with using a 3 column table in my header and style my td elements using background-image and repeat-x, but that seems not work well in Chrome and Safari.

Any help with this issue would be highly appreciated.

Upvotes: 2

Views: 1288

Answers (3)

John Boker
John Boker

Reputation: 83729

just tested this out,

http://www.antiyes.com/test/4753259/

look at the html, it looks kinda crappy right now because of the color profiles and stuff with the images, they would have to be cut better but this shows the basics of what to do.

<html>
<head>
<style type="text/css">
body
{
margin:0;
padding:0;
}
#header
{ 
 width:100%;
 height: 145px;
 position:relative;
 overflow:hidden;
 text-align:center;
}

#logo
{
 margin:auto;
 position:relative;
 z-index:5;
 width:1024px;
 height:99px;
 background:transparent url(iea_logo_13Jan2011.png) no-repeat top center;
}

#red_stripe,#yellow_stripe
{ 
 position:absolute;
    left:0px;
 right:0px;
 z-index:4;
}

#red_stripe
{
 left:50%;
 height:31px;
 top:6px;
 background:transparent url(red_strip.png) repeat-x top left;
 width:50%;
}

#yellow_stripe
{
 height:32px;
 top:60px;
 width:50%;
 background:transparent url(yellow_strip.png) repeat-x top left;
}

</style>
</head>
<body>
 <div id="header">
 <div id="red_stripe"></div>
 <div id="yellow_stripe"></div>
 <div id="logo"></div>
 </div>
</body>
</html>

Upvotes: 1

mVChr
mVChr

Reputation: 50205

The solution I propose will work for resolutions up to 3072px wide, which should be plenty.

You'll need to make a background image for #body_background that's 3072px wide by about 140px tall. The main background color for this will be white obviously. You'll then make a yellow strip in the left section that's 1024px wide that starts 86px down from the top to align with the yellow strip in the main section. Then, at the horizontal point where the yellow strip ends at 1024px, you'll make a 2048px red strip that goes to the right edge at 32px down to align with the red strip in the main section... so basically you'll have an image that looks like this:

[ - - - - -1024px- - - - - - ]___________________________________________________
______________________________[- - - - - - - - - - -2048px- - - - - - - - - - - ]

Then add it as the background image to #body_background with the following CSS:

#body_background { 
    background:url('../path/to/image/bg_strips.gif') left top no-repeat #fff; 
}

And that should do it! Let me know if it works!

Upvotes: 0

ghoppe
ghoppe

Reputation: 21804

I believe you are over-thinking this. Since you are using absolute positioning for the header elements, I would simply use a background image for the body element (non repeating). Basically it would be an image like your current logo but with the colour extending off each side.

Since it's just solid colours, you would make it an arbitrarily large width (say 9000 pixels) to fit nearly any browser size and the image would still be relatively small.

Upvotes: 1

Related Questions