Forums

Give help. Get help.

  • # February 9, 2009 at 10:27 pm

    Hey guys,

    Struggling with this all night and I can’t figure out what is going on. For some reason the image I’d like to use as my header will not a.) center, or b.) align with the top of the page.

    Link: http://www.kluesenerwedding.com/stonescapes/index.html

    CSS

    Code:
    /* CSS Document */

    body {
    background: url(top_head_bg.jpg) repeat-x left top;
    background-color: #E8E4D6;
    }

    div#page-wrap {
    width: 800px;
    margin: 0 auto;
    }

    div#header {
    background: url(top_head.jpg);
    background-repeat: no-repeat;
    background-position: absolute;
    top: center;
    left: center;
    height:150px;
    width:768px;
    }

    # February 10, 2009 at 2:13 am

    try this

    div#header {
    background: url(top_head.jpg) no-repeat left top;
    height:150px;
    width:768px;
    margin:0 auto;
    }

    # February 10, 2009 at 4:21 am

    i think u need to check your code onec again

    /* CSS Document */

    body {
    background: url(top_head_bg.jpg) repeat-x left top;
    background-color: #E8E4D6;
    }

    div#page-wrap {
    width: 800px;
    margin: 0 auto;
    }

    div#header {
    background: url(top_head.jpg) no-repeat left top;
    height:150px;
    width:768px;
    margin:0 auto;
    }

    /* this is your css code

    div#header {
    background: url(top_head.jpg);
    background-repeat: no-repeat;
    margin-top: 0px;
    left: center;
    height:150px;
    width:768px;
    }
    */

    /*ul#nav {
    background-image: url(nav_bg.jpg);
    background-repeat: no-repeat;
    position: absolute;
    height: 38px;
    width: 773px;
    }

    div#container {
    background-image: url(sides.jpg);
    background-repeat: repeat-y;
    */

    # February 10, 2009 at 4:51 am
    "Ramesh" wrote:
    try this

    div#header {
    background: url(top_head.jpg) no-repeat left top;
    height:150px;
    width:768px;
    margin:0 auto;
    }

    I love how this is exactly the same as theDoc’s post, but 2 hours later :lol:

    # February 10, 2009 at 5:12 am

    u need to notice that 0 is missing

    # February 10, 2009 at 11:34 am

    Thanks for the responses guys. I’ll give this a try at lunch.

    # February 10, 2009 at 12:24 pm

    Thanks guys, that worked.

    So I don’t make that same mistake again, can one of you explain why I needed to set the margin: auto, and padding: 0 in my body tag? What does "auto" do in CSS?

    # February 10, 2009 at 12:29 pm
    "H2oskier" wrote:
    Thanks guys, that worked.

    So I don’t make that same mistake again, can one of you explain why I needed to set the margin: auto, and padding: 0 in my body tag? What does "auto" do in CSS?

    you need to understand the box modal really.

    (this is how I look at it)
    think of a product like a TV
    TV is the content
    padding is the stuff between the TV and the box
    Border is the box it comes in
    and margin is the space that box sites from the edge of the room (if that makes sense)

    so you set your margin to have a set size, if you want it to be a certain size e.g. in the centre you use auto, (no matter what size).

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag