How to get a header that spans the entire page

HTML & CSS
1

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)?

Many thanks

Jonno

2

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. :slight_smile:

3

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!

4

How do you style the height for that?

Thanks

5

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

Then:

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

#header {
  width:100%;
  overflow:hidden; /* contain floats */
  height:200px;
}

.inner, #wrap {
  width:80%;
  margin:auto;
}
6

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

7

Definitely. :slight_smile:

8

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

9

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:

<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.

10

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/homepageBuildFeb/css/uniHomepage.html
In IE7 and Compat mode it gives the following header:

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

11

Perhaps modify your styles a bit, like so:


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

See if that works better. :slight_smile:

12

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

Thanks again!

13

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.