How do I do the CSS for this?

Question

Here is the wireframe: http://img46.imageshack.us/img46/9323/85329195.gif

#header needs a background image of /header.png

which is 750px wide.

I'm just not sure how to do the CSS for this design.

#footer is 100% at the bottom, (not absolute)

Answer 1

Looks like just a div with a width: 750px; height: 200px; margin: 0 auto; background:url('/header.png') (note: I guessed on height, you didn't say)...

If that's not what you're having trouble with what part of the design specifically is the problem?

Answer 2

#header { margin: 0 auto; width: 750px; height: auto; background: url('/header.png'); }
#footer { width: 100%; height: auto; }

Answer 3

You need to put the whole thing in a wrapper div and set it's width to 750px, margin: 20px auto; to center the whole thing horizontally. There's a decent writeup on this type of layout at http://articles.techrepublic.com.com/5100-10878_11-5314471.html?tag=rbxccnbtr1

Answer 4

You can, and in most cases probably should, avoid using a DIV for this. You can specify that the background for the H1 element itself is that image.

h1 { 
background: transparent url('/header.png') no-repeat scroll;
width:750px;
margin 0 auto;
}

I noted something in your mockup indicating that you might want the header text not to display. If your image "is" the text, you can replace the above code with this:

h1 img {width:750px; margin 0 auto;}

and then simply place the image in your source like so:

<H1><IMG SRC="/header.png" ALT="The header text"></H1>

where ALT tag would contain some indication that the image was a header graphic, as well as the textual content of the image. This is valid, semantically correct, accessible HTML.

It's not terribly important that this particular element not use a wrapper DIV, but that you get into the practice of using as few of those as possible, while maintaining semantic integrity and providing complete and accurate information to alternate browsing agents.