Both of these websites have a background header stretched across the page while the content is centered and is covering like say 80% of the width, and that also perfectly aligns with the rest of the layout.
I am particularly interested in these two sites, because the header has two background colors, not just one.
I am sure there are tons of tutorials on the web, but I do not the keywords to search for.
it is background-image set to body with property background-repeat:
background-repeat: repeat-x;
more: http://www.w3schools.com/css/pr_background-repeat.asp
Edit: As for centering your content—I do it this way:
<body>
<div id="wrapper">
<!-- here is wrapper *everything* else -->
</div>
</body>
then set width of wrapper to value (mostly 960px). Then, when you set it's margin to 0 auto, it centers itself.
#wrapper{
margin: 0 auto;
}
You can use a background image 1px width with set background repetition in horizontal.
background-image:url('paper.gif');
background-repeat:repeat-x;
And then align your content, which way you like.
This is just a fixed-width layout, but with automatic left and right margins. The effect of this is to centre the whole of the content block if the page size is wider than the content width.
the background is just set as a repeating image (repeat-x) to make it look like the menu element actually extends the full width of the page.
I think you're talking about the 100%/80% width differential ....
This should help you get started:
<div id="header" style="width:100%; margin: 0px;">
<!-- header content -->
</div>
<div id="content" style="display: block; width: 80%; margin: 0px auto">
<!-- content -->
</div>
The margin: auto on the content makes the block centred.
Liike Adam says, add the background-repeat to give it the graphically pleasing element.
Analyzing stumbleupon.com:
The "header" consists actually of two divs: wrapperHeader and wrapperNav. Those two have different background colors.
These divs have only one child each that has the CSS property
margin: 0 auto
This results in a horizontal centering.
This property is assigned to the content div too, so the header, navigation and content are always centered. Of course this requires to set some width for this elements.
The structure looks like this:
<div id="wrapperHeader">
<div class="" id="header">
<!-- mnore stuff here, like logo -->
</div> <!-- end header -->
</div>
<div id="wrapperNav">
<ul id="navMain">
<li class="discover first"><a href="/discover/toprated/">Discover</a></li>
<li class="favorites"><a href="/favorites/">Favorites</a></li>
<li class="stumblers"><a href="/stumblers/onlinenow/">Stumblers</a></li>
</ul> <!-- end navMain -->
</div>
<div id="wrapperContent">
<div class="clearfix" id="content">
</div> <!-- end content -->
</div>
If you get Firebug for Firefox, you can easily analyze the elements yourself.
Adding background images has 2 drawbacks:
Every time you want to change the color of your header you have to open your Photoshop and change the color there and then change it again in your CSS.
Now you want the background color of the header to stretch across the page but what if you want to do that with the footer too?
The easiest solution is this one:
(you not only create a an easy way to stretch the color across the page, being able to use different color in all header content and footer, but also it saves yourself from the double margin problem of IE (when you use width and margin in the same elements).
index.html:
<html>
<body id="body">
<div id="header">
<div class="container">
<!-- header's content here -->
</div><!-- .container -->
</div><!-- #header -->
<div id="content">
<div class="container">
<!-- main content here -->
<div id="footer">
<div class="container">
<!-- footer's content here -->
</div><!-- .container -->
</div><!-- #footer -->
</body>
</html>
style.css:
.container {
margin: 0 auto;
overflow: hidden;
padding: 0 15px;
width: 960px;
}
#header {
background: #EEE;
}
#content {
background-color: #F9F9F9;
}
#footer {
background-color: #333;
color: #BBB;
clear: both;
}
In this example, the div.container centers the elements and also gives them a width, and the background color can stretch across the page because #header, #content and #footer don't have width. And in the future just apply margin and padding to divs inside .container, and you'll save lots of problems with IE in the future.
With CSS 2, you can't stretch a background image. There is no property for setting background image dimensions. You can just repeat it on X, Y or both axis.
CSS 3 will allow that stretching.