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;
    }
Beau Grantham
  • 3,435
  • 5
  • 33
  • 43
Orange Storm
  • 11
  • 1

1 Answers1

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

Community
  • 1
  • 1
Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
  • 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? – Orange Storm Dec 17 '11 at 03:35
  • You would really need to post your HTML to get a concrete answer. Try posting a demo on http://jsfiddle.net – Wesley Murch Dec 17 '11 at 05:51
  • Hi Madmartigan, thanks for that - not sure if this makes sense like this http://jsfiddle.net/orangestorm/Qhh3P/ – Orange Storm Dec 17 '11 at 10:34
  • 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. – Wesley Murch Dec 17 '11 at 10:57
  • 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 http://duijfken.weebly.com/ – Orange Storm Dec 17 '11 at 11:46