CODEWITHSUNDEEP
background-color960.gs
Gabriel Meono
Gabriel Meono

Reputation: 1010

CSS: issue with background color

I want to make the header and footer backgrounds to be repeated on x. So it takes all the width size of any page resolution.

This is how I want it to look like: Concept

An this how is being displayed: Template

I'm using the 960 gs, every div is limited to 960px. Is there a way to expand the color of the div through x?

See the project here: http://gabrielmeono.com/yonature/

Upvotes: 0

Views: 285

Answers (1)

galchen
galchen

Reputation: 5290

yes there is

you have to split the page into 3 parts: header, body, footer what we're gonna do is create divs with a little bit of CSS. we will have a div that goes all the way to the sides of the website, and a div which is centered. i'll show you how to do it for the header, and you make the same thing for body/footer:

<html>
<head>
<style type="text/css">
html{}
body { margin: 0px; width: 100%; }
#headerCenter { float: left; width: 100%; text-align: center; color: #00AA00; height: 120px; }
#headerContainer { margin: 0 auto; width: 960px; }
#header { width: 100%; float: left; height: 120px; }
</style>
</head>
<body>
<div id="headerCenter">
    <div id="headerContainer">
        <div id="header">HEADER</div>
    </div>
</div>

.. same for body/footer....
</body>
</html>

so the trick is:

  • a div (#headerCenter) which goes all the way across the page. we will define height for it, paint it's background, and set 'text-align: center;'

  • inside we put a div with 'margin: 0 auto;' and the desired width. NO FLOAT on this div! this will create a div with height 0, placed in the center of the parent div.

  • inside we put the header. we can set float left etc... width can be 100% (or 960px)

repeat this for body and for footer

another method btw is using HTML tables, which i don't like to use for layouts. if you have any trouble setting this up, let me know and i'll do the layout for you

Upvotes: 1

Related Questions