1

Ok, I give up - I can't work it out; the wrapper seems to go from the top to the bottom while I want it to leave a gap at the top and bottom so the background appears through. I can't seem to work it out. I am very novice to this. Any help & ideas very welcome.

Code

 body { background: #ffffff url(bgfin.jpg) repeat; font-family: Tahoma,arial, sans-serif; font-size:12px; color:#666666; height: 100%; margin:0; padding:0; } #wrapper { background: url(body-line.png) center repeat-y; padding-top: 65px; padding-bottom: 65px; } #wrappertop{ background: url(header.png) top center no-repeat; } #wrappertbtm{ background: url(footer-new.png) bottom center no-repeat; padding-bottom: 65px; } #container{ width: 959px; margin: 0 auto; } .title{ width: 959px; height: 56px; padding: 15px 0px 10px 0px; font-size: 30px; color: #bd7821; } #navigation{ position: relative; width: 959px; height: 40px; z-index: 2; } #navigation li{ float: left; z-index: 2; padding: 0px 34px 0px 0px; } #navigation li a{ display: inline-block; position: relative; outline: none; height: 28px; color: #e3e3e3; z-index: 2; font-size: 12px; padding: 15px 0px 0px 0px; text-decoration: none; } #navigation li a:hover, #navigation li#active a{ color: #bd7821; text-decoration: none; } #header{ position: relative; width: 959px; height: 196px; z-index: 1; margin: 20px 0px 0px 0px; }
Improve this question
0

1 Answer 1

Reset to default
0

Try:

body { padding:20px 0; }

Or:

#wrapper { margin:20px 0; }

That is shorthand for:

#wrapper { margin-top:20px; margin-right:0; margin-bottom:20px; margin-left:0; }

Remember:

  • Padding is rendered inside of the element
  • Margin is on the outside

This might help as a reminder:
How to remember in CSS that margin is outside the border, and padding inside

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks for the fast reply Madmartigan, the wrapper does move down so I can see the background, great - only the #wrappertop seems to move down as well... I would like that one to stay where it is, just need the wrapper for the body to cover the body area only and not the whole page... Grrr, it is doing my heard in... any ideas?
You would really need to post your HTML to get a concrete answer. Try posting a demo on jsfiddle.net
Hi Madmartigan, thanks for that - not sure if this makes sense like this jsfiddle.net/orangestorm/Qhh3P
Try to remove the same amount of padding-top:65px from #wrapper as the padding/margin you added to the body/#wrapper with the above method - that should keep #wrappertop in the same place it was before. Sorry, I have no idea what's what from your demo, even after I added background colors.
Hi Madmartigan, I appreciate your help but I find it difficult to explain what is wrong.... The image for the #wrapper with the body txt on it goes all the way from the top of the #wrappertop to the bottom of the #wrappertbtm, therefore it overlaps the end of the images for the #wrappertop and the #wrappertbtm - perhaps you could have a look at the draft duijfken.weebly.com

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.