Zad Posted February 26, 2009 Report Share Posted February 26, 2009 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; } Quote Link to comment Share on other sites More sharing options...
Susie Posted February 26, 2009 Report Share Posted February 26, 2009 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. Quote Link to comment Share on other sites More sharing options...
Susie Posted February 26, 2009 Report Share Posted February 26, 2009 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; } Quote Link to comment Share on other sites More sharing options...
Zad Posted February 26, 2009 Author Report Share Posted February 26, 2009 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; } Quote Link to comment Share on other sites More sharing options...
Susie Posted February 26, 2009 Report Share Posted February 26, 2009 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. Quote Link to comment Share on other sites More sharing options...
Zad Posted February 26, 2009 Author Report Share Posted February 26, 2009 Sorry, I have updated the CSS on the old link. Thanks for the the content div height tip . Quote Link to comment Share on other sites More sharing options...
Susie Posted February 26, 2009 Report Share Posted February 26, 2009 Looks good! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.