Can't Line Up Image Used As Header

[Zad]

Hi,

 

I am very new to CSS and am finding it an uphill battle....

 

I'm trying to modify a template. How do I get the image (marked "Test Header", 806 pixels wide) that I am using as a header, to line up with the rest of this page? I don't understand why it is displaying narrower than the other sections.

 

-Thanks

 

Here's the URL: http://xrl.us/behk3k

===========

 

Here's the CSS:

===========

 

* { padding: 0; margin: 0; }

 

body {

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

}

#wrapper {

margin: 0 auto;

width: 822px;

}

#header {

width: 806px;

height: 158px;

margin: 0 auto;

background-image : url(images/header_test.jpg);

background-repeat : no-repeat;

}

#navigation {

width: 800px;

color: #FFFFFF;

padding: 10px;

border: 1px solid #ccc;

margin: 0px 0px 5px 0px;

background: #000000;

}

#content {

width: 800px;

color: #000000;

border: 1px solid #4e7fb6;

background: #FFFFFF;

margin: 0px 0px 5px 0px;

padding: 10px;

height: 350px;

}

#footer {

width: 800px;

color: #000000;

border: 1px solid #4e7fb6;

background: #FFFFFF;

margin: 0px 0px 10px 0px;

padding: 10px;

}

[Susie]

If you set the width of the header to 822 px like your wrapper it will work. But first, you'll need to remake your header image to be the same width.

[Susie]

On second thought, that's a lot of work that's easily fixed in the CSS.

 

I would recommend removing all the padding on your containers and instead apply the padding to the actual elements that will go inside (paragraphs, lists, etc). Then use margin:0 auto; to position everything in the center.

 

#wrapper {

margin: 0 auto;

width: 822px;

}

#header {

width: 806px;

height: 158px;

margin: 0 auto;

background-image : url(images/header_test.jpg);

background-repeat : no-repeat;

}

#navigation {

width: 800px;

color: #FFFFFF;

padding: 0px;

border: 1px solid #ccc;

margin: 0px auto;

background: #000000;

}

#content {

width: 800px;

color: #000000;

border: 1px solid #4e7fb6;

background: #FFFFFF;

margin: 0px auto;

padding: 0;

height: 350px;

}

#footer {

width: 800px;

color: #000000;

border: 1px solid #4e7fb6;

background: #FFFFFF;

margin: 0 auto;

padding: 0;

}

[Zad]

Thanks for your help. I used your code, then added "height: 30px;" to the Navigation Bar to increase vertical size, and also added "margin: 5px auto;" to both the Navigation & Footer to space them apart vertically. I hope this is correct.

 

URL: http://xrl.us/behk3k

 

New CSS:

=======

 

#wrapper {

margin: 0 auto;

width: 822px;

}

 

#header {

width: 806px;

height: 154px;

margin: 0 auto;

background-image : url(images/header_test.jpg);

background-repeat : no-repeat;

}

 

#navigation {

width: 800px;

height: 30px;

color: #FFFFFF;

padding: 0px;

border: 1px solid #ccc;

margin: 5px auto;

background: #000000;

}

 

#content {

width: 800px;

color: #000000;

border: 1px solid #4e7fb6;

background: #FFFFFF;

margin: 0px auto;

padding: 0;

height: 350px;

}

 

#footer {

width: 800px;

color: #000000;

border: 1px solid #4e7fb6;

background: #FFFFFF;

margin: 5px auto;

padding: 0;

}

[Susie]

It looks good to me so far. Your link is still taking me to the old one, though.

 

You will want to reconsider putting a height on the content div because you'll want that to be expandable as your content grows.

[Zad]

Sorry, I have updated the CSS on the old link. Thanks for the the content div height tip .

[Susie]

Looks good!