...

View Full Version : 3 column layout - whitespace and repeat problem



nicky77
08-04-2007, 12:56 PM
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;
}

Jutlander
08-04-2007, 02:08 PM
To solve your first problem I think this is what you're after:


* {
margin: 0;
padding: 0;
}

croatiankid
08-04-2007, 02:16 PM
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
body{padding:0;margin:0} in your CSS.

However, instead of this, I suggest putting
* {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
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
* 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.

nicky77
08-04-2007, 04:53 PM
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

koyama
08-05-2007, 02:25 AM
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
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:


body,html{height:100%}
#mainwrap{min-height:100%}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum