Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    93
    Thanks
    9
    Thanked 0 Times in 0 Posts

    3 column layout - whitespace and repeat problem

    hi there, i'm pretty inexperienced with CSS, so apologies for the shoddy coding. i'm trying to set a 3 column layout using different background images for each column. however, i have whitespace at the top and sides of the page, which i really want to get rid of. i've used nested divs to create the layout so hopefully i've set these up properly.

    the other problem i am having is that i want the images to repeat vertically to 100% of the page size, but this wouldn't happen when i specified either height:100%; or background-repeat:repeat y (which did nothing, even though repeat x will tile if change the code). as a very temporary fix i've specified height:800px; which allows the images to tile vertically as i wanted. Any help would be greatly appreciated.

    the html....

    <body>
    <div id="mainwrap">
    <div id="contentarea">
    <div id="contentarea2">
    <div id="column1">
    </div>
    <div id="column2">
    <div id="header">
    <h1>ANTONINE SPORTS CENTRE</h1>
    </div>
    </div>
    <div id="column3">
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    the css....

    #mainwrap{
    margin:1px;
    background: url(new_background/background_middle.jpg) repeat-x;
    }


    #contentarea{
    margin:1px;
    background: url(new_background/border_left.jpg) repeat-y top left;
    position:relative;
    }

    #contentarea2{
    margin:1px;
    background: url(new_background/border_right.jpg) repeat-y top right;
    height:800px;
    position:relative;
    }

    #column1{
    position:absolute;
    top:0px;
    left:0px;
    width:150px;
    }

    #column2{
    position:absolute;
    top:0px;
    margin-left:250px;
    margin-right:250px;

    }

    #column3{
    position:absolute;
    top:0px;
    right:0px;
    width:150px;
    }

    #header {
    height:90px;
    background: url(antonine_logo_rev3.png) ;
    background-repeat:no-repeat;
    margin-top: 60px;
    }

    #header h1{
    font-size:1.6em;
    margin-left:150px;
    }

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    To solve your first problem I think this is what you're after:

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

  • #3
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Please wrap your code in CODE BB tags.

    The whitespace is caused because of default browser settings (which vary between each browser for different elements) for the BODY element. You can get rid of it by putting
    Code:
    body{padding:0;margin:0}
    in your CSS.

    However, instead of this, I suggest putting
    Code:
    * {padding:0;margin:0}
    at the top of your CSS (and every CSS you make in the future). The asterisk (*) is a CSS selector that means "all elements", so, this line puts all elements' paddings and margins to 0. Then, you can add padding and margin as you need to for specific elements (and IDs and classes), so that they will be the same on each browser.

    About your height problem: if you want a direct child (mainwrap) of BODY to be 100% the height of the viewport, you must tell BODY and HTML to be (at least) 100% the height of the viewport, using
    Code:
    body,html{min-height:100%}
    #mainwrap{height:100%}
    There's one more thing though: IE 6 doesn't support min-height. Luckily (in this case), it treats height as min-height, so your most simple way of targetting only IE6 is using
    Code:
    * html, * html body {height:100%}
    * html is valid CSS, however, only IE6 follows the rule that follows it.

    Your other choice for targetting only IE6 is using so-called "conditional comments". Conditional comments are HTML comments that contain rules for IE. This allows your CSS to stay clean of useless (for non-IE browsers) code, and in some cases valid. You can also use them to prevent normal browsers from downloading data that is meant only for IE, for example, after your LINK to your CSS, you can put a conditional comment to target IE6, and put another LINK to a different CSS that only IE6 will download (in addition to the first CSS). You can do an internet search for more information.
    Last edited by croatiankid; 08-04-2007 at 02:19 PM.

  • #4
    New Coder
    Join Date
    Aug 2007
    Posts
    93
    Thanks
    9
    Thanked 0 Times in 0 Posts
    thanks to you both for your replies, that's helped a great deal! apologies for ommitting the code tags. unfortunately i now have another problem which im going to have to post in another thread. cheers

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by croatiankid View Post
    About your height problem: if you want a direct child (mainwrap) of BODY to be 100% the height of the viewport, you must tell BODY and HTML to be (at least) 100% the height of the viewport, using
    Code:
    body,html{min-height:100%}
    #mainwrap{height:100%}
    Just to make sure that no one picks up the wrong CSS

    What you meant was this:
    Code:
    body,html{height:100%}
    #mainwrap{min-height:100%}


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •