How to get a header that spans the entire page

**JonnoW** · Jan 23, 2012 05:54

Hi guys,

I am working on a site that has a header that spans the entire page width (see below). I've run into a bit of an issue. I'm unsure how I should be styling the background. Is it acceptable to have the black bar and background gradient in one image that is say 20x700px repeating-x as my body background (the bit in the red boundary) then just put my content in a container (the blue boundary)?

homepageexample.jpg

Many thanks

Jonno

**ralph.m** · Jan 23, 2012 06:20

Originally Posted by JonnoW

Is it acceptable to have the black bar and background gradient in one image that is say 20x700px repeating-x as my body background (the bit in the red boundary) then just put my content in a container

That's certainly an option, but my preference is to have a div that's 100% wide at the top for the background, and have a centered div inside that for the header content. then have the rest of the site content in a separate, centered wrapper below that.

One advantage of this is that, if text is enlarged, the header content won't spill down beyond the black band across the top. Instead, it can just expand with the content.

**JonnoW** · Jan 23, 2012 06:26

I think I did that orginally, I got stuck when it came to inserting the content though. I couldn't work out how to centre my content that is in the header if you see what I mean. But would you have something like so:

<body>
<div id="background">
</div>
<div id="container">
<div id="header">
</div>

<div id="main">
</div>

</div>

?

Thanks as ever Ralph!

**JonnoW** · Jan 23, 2012 08:35

Originally Posted by ralph.m

That's certainly an option, but my preference is to have a div that's 100% wide at the top for the background, and have a centered div inside that for the header content. then have the rest of the site content in a separate, centered wrapper below that.

One advantage of this is that, if text is enlarged, the header content won't spill down beyond the black band across the top. Instead, it can just expand with the content.

How do you style the height for that?

Thanks

**kohoutek** · Jan 23, 2012 09:03

I'd not use a background div and instead move the background to your body.

Then:

Code HTML4Strict:

<div id="header">
  <div class="inner">content</div>
</div>
<div id="wrap">
  main content goes here
</div>

Code CSS:

#header {
  width:100%;
  overflow:hidden; /* contain floats */
  height:200px;
}
 
.inner, #wrap {
  width:80%;
  margin:auto;
}

**JonnoW** · Jan 23, 2012 09:06

Thanks, just thought of another question then: Does using percentages over fixed pixel width make it more responsive i.e. more versatile.

**kohoutek** · Jan 23, 2012 09:26

Definitely.

**ralph.m** · Jan 23, 2012 18:26

Originally Posted by kohoutek

I'd not use a background div and instead move the background to your body.

Then:

Code HTML4Strict:

<div id="header">
  <div class="inner">content</div>
</div>
<div id="wrap">
  main content goes here
</div>

Code CSS:

#header {
  width:100%;
  overflow:hidden; /* contain floats */
  height:200px;
}
 
.inner, #wrap {
  width:80%;
  margin:auto;
}

I would move the bg image to the #header div, as then it can expand/contract with the content in the .inner div.

**dresden_phoenix** · Jan 24, 2012 01:57

Maybe this has been said already, or maybe I am misunderstanding the challenge here...
It seems to me that you need 3 bg tiles and the following structure:

Code:

<body>
<div id="hed"><div class="center">...</div></div>
<div class="center">
    <div id="content">..</div>
    <div id="foot">..</div>
</div>
</body>

Make a tile of that chipped gray pattern assign it as the REPEATING bg of the body tag
Make a tile of the black top INCLUDING THE DROP SHADDOW ON THE GRAY of the body, let's call it hedTyle1.jpg assign #hed {bakground:url(hedTyle1.jpg ) repeat-x left bottom #000;}
Make a tile of the black top INCLUDING THE DROP SHADDOW ON THE WHITE of the content , let's call it hedTyle2.jpg assign #hed .center {bakground:url(hedTyle2.jpg ) repeat-x left bottom #000;}

.center is a generic center class {margin: 0 auto; width: (the width or your page in EMs, %s or PXs as needed)}

DO NOT assign HEIGHT!!! but you may want to add a few PXs padding-bottom to #hed .center so that the content doesnt o on the drop shadow part.

After that all you have to do is #content{background:#fff;} and #foot{background:maroon;}

Style the rest of your layout as needed.

Hope that simplifies things for you.

**JonnoW** · Feb 1, 2012 11:29

Thanks for the advice guys, I've just about finished with the page however I'm getting issues when viewing in IE7 and IE Compatibility mode.
The page can be seen here:
http://www2.hull.ac.uk/files/homepag...iHomepage.html
In IE7 and Compat mode it gives the following header:

ie7header.png

If I remove the padding as suggested by Dresden then I get no banner in Chrome Firefox etc.

Does anyone have any ideas why this is and how I can fix it?

Thanks again

**ralph.m** · Feb 1, 2012 18:42

Perhaps modify your styles a bit, like so:

Code:

div#centre {
  background: url("../images/headTyl2.png") repeat-x scroll left bottom #000000;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 40px;
  padding-top: 10px;
  width: 960px;
}

See if that works better.

**JonnoW** · Feb 2, 2012 11:34

That did it, could you explain what this has done please?

Thanks again!

**RyanReese** · Feb 2, 2012 14:00

The overflow:hidden was needed because you have children who float, and as a result the parent doesn't recognize they are even there. Children being floated, to the parent, is like them not even being there. The overflow:hidden makes the parent recognize the floated children and thus will contain them. Most likely your parent collapsed in height (due to it not even recognizing it had children).

Hopefully that was enough of an explanation.

User Tag List

Thread: How to get a header that spans the entire page

Thread Tools

Display

How to get a header that spans the entire page

Bookmarks

Bookmarks

Posting Permissions