Hi people,
I’ll try to explain this as best i can…
Basically what i want to do is have my content and main div’s of my layout center aligned with different background colors behind the main layout wrapper.
Normally this is no problem:
#main_wrap {margin: 0 auto;} and then set a background color or image for the body etc.
The thing is I want to have different background colors for certain parts of the page that fill the complete browser window.
So for example if it was just one color it would not be a problem as i would assign the color to the body tag in css. However Because i want to use different background colors further down the page this complicates things.
Now I also know I can create like a 1px width image in photoshop with the different colors and then assign that to the body as a background image and repeat X, however that would mean that i would have to set specific heights for each of the main div’s (which i dont really wanna do because the image slider that i’m using is responsive and i think it wont shrink hand in hand with the rest of the layout when adjusting the size of the window).
Im sure what I have done so far is not the correct way of going about this and I’m almost certain it will cause problems later on in the design process.
This is the code for my own work-around to this design issue:
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#banner_bg{
background-color:#FFF;
}
#banner_wrap{
height:127px;
margin: 0 auto;
width: 1187px;
}
#slider_wrap{
margin:0 auto;
background-color: #FFF;
width: 1187px;
}
#info_area_bg{
background-color:#f8f8f8;
}
#info_area_wrap{
height:185px;
width:1187px;
margin: 0 auto;
padding-top: 20px;
}
#main_area_bg{
background-color:#f8f8f8;
}
#main_area_wrap{
height:400px;
width:1187px;
margin: 0 auto;
}
#footer_top_area_wrap{
height:330px;
width: 1187px;
margin: 0 auto;
}
#footer_bottom_bg{
background-color:#666666;
width: 100%;
}
#footer_bottom_area_wrap{
height:45px;
margin: 0 auto;
width: 1187px;
}
#footer_bg{
background-color:#333;
}
</style>
</head>
<body>
<div id="banner_bg">
<div id="banner_wrap">BANNER</div><!--end of banner wrap-->
</div><!--end of banner bg -->
<div id="slider_wrap">SLIDER AREA</div><!--end of slider wrap-->
<div id="info_area_bg">
<div id="info_area_wrap">INFO AREA</div><!--end of info area wrap-->
</div><!--end of info area bg-->
<div id="main_area_bg">
<div id="main_area_wrap">MAIN AREA</div><!--end of main area wrap-->
</div><!--end of main area bg -->
<div id="footer_bg">
<div id="footer_top_area_wrap">FOOTER TOP</div><!--end of footer top area wrap-->
</div><!-- end of footer bg-->
<div id="footer_bottom_bg">
<div id="footer_bottom_area_wrap">FOOTER BOTTOM</div><!--end of footer bottom area wrap-->
</div><!--end of footer bottom bg-->
</body>
*Notice how many times I had to use the margin: 0 auto line!
Also I know this will cause issues and is not correct because when i re-size the browser the background colors dont fit the width of the browser window.
I have attached an image to this post of how i want the actual layout to look like and also help you guys understand what it is that i’m trying to do.
I know this is really basic stuff… and to be honest I’m a little apprehensive about posting this thread… I just seem to be banging my head against the wall with real simple stuff lately - Ive lost my mojo!
Please go easy on me guy’s n girls and many many thanks to anyone who can help me out of this spot!
All the best, thanks.
