Grow your CSS skills. Land your dream job.

Divs – making them 100% of the page?

  • # March 24, 2009 at 4:11 am

    Hi, I would like to know how to make a div, with a background image repeat for 100% of the page. I have tried for a while to fix it, but I am still left with a small white border round the edge.

    Here is my CSS

    Code:
    body {
    background-color:#fff;
    }

    #repeat {
    background-image:url(‘../images/box.png’);
    background-repeat:repeat-x;
    width:100%;
    margin:0 auto;
    padding:0;
    margin:0;
    }

    a {
    font-family:Calibri, “Arial Narrow”, Helvetica, Sans-serif;
    color:#fff;
    font-size:16px;
    }

    and here is my markup

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Here is a link to a live example – http://tomsbigbox.com/coffeebeans, by the way on the page is another images, just for reference.

    Any help would be very much appreciated, as it is driving me insane!

    Rob
    # March 24, 2009 at 5:18 am

    firstly the border round the edge of the page is because you need a browser CSS reset…

    if you add:

    Code:
    * { margin: 0; padding:0 }

    to the top of your CSS – that will get rid of the "border" which is actually just the default browser CSS. I would look into CSS resets more, there are some great ones out there, personally I prefer Yahoo’s option, you can find that here:

    http://developer.yahoo.com/yui/reset/

    Now onto the repeat… what do you want it to do – repeat vertically or horizontally? – Normally what you would do is set the background of your HTML…

    So for your example I would do this:

    Remove the background colour from your body tag, then:

    Code:
    html {
    background:url(../images/box.png) repeat-x 0px 60px;
    height:100%;
    }

    If thats what you mean let me know and I will show you how to do it better… if not let me know what you mean :)

    # March 24, 2009 at 9:16 am

    For IE, I don’t know if or where it is, but for FF, there is an html css module called "html.css"
    which outlines the default values for some of the CSS tags. For example, for body, the default margin
    is set to 8px on all sides, that is why you get the border around all of your screens unless you tell the
    browser to eliminate it by using the CSS reset. ‘* {margin: 0; padding: 0;]" resets the margin and padding
    on all tags to 0 on all sides of the box.

    interesting on what the defualt settings are for all browsers and that is part of the problem writing web
    sites.

    al

    # March 24, 2009 at 3:17 pm

    Hi, thanks Robskiwarrior for the reply – it has worked! Like I say thanks a lot for this, I have looked everywhere! Is this because of default properties set by the browser?

    Thanks again

    Rob
    # March 24, 2009 at 3:58 pm
    "tomwalters5678" wrote:
    Hi, thanks Robskiwarrior for the reply – it has worked! Like I say thanks a lot for this, I have looked everywhere! Is this because of default properties set by the browser?

    Thanks again

    yea like al_m473 its the default way a browser applys a CSS Style from its own CSS file, until you tell it otherwise, it will follow those rules. :)

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".