PDA

View Full Version : CSS Layout help

General MJ
08-12-2006, 09:53 PM
I used the basic three column layout with a few tweaks, and i want the left and right columns to be a different color than the center column, but when i make the backround-color a different color, it only makes it the color behind text, not the whole column...my website is www.customcopperandslate.com by the way. Any and all help needed.

EDIT: I posted an example of the color behind text problem in the upper left and right corner of the website...ignore the Go Daddy ad, its temporary.

Thank you,

General MJ
WebBaka
08-12-2006, 11:17 PM
I believe the problem lies in the fact that the div is not the full height of the page... I'm not sure exactly about this, but I might try adding height: 100% to the CSS.

I also use a div/CSS layout (two column) but I use the same background color, so I never ran into this problem. Hope I could help anyway though.:)

~WebBaka
General MJ
08-12-2006, 11:26 PM
Thanks! I didn't even think of doing that! One more question though, should i have the lighter color on the left and right part, or in the center with the darker color on left and right?
General MJ
08-12-2006, 11:44 PM
Hmm, here is my CSS code for the layout:


body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#left {
background-color: #CC9966;
position: absolute;
left: 0px;
padding: 0px;
top: 100px;
width: 135px;
height: 100%;
}

#center {
background-color: #996600;
margin-left: 25px;
padding: 0px;
margin-right: 25px;
top: 0px;
}

#right {
background-color: #CC9966;
position: absolute;
right: 0px;
padding: 0px;
top: 100px;
width: 140px;
height: 100%;
}


and the code for the header (php documents) is


<body>

<div id="left">
</div>

<div id="right">
</div>

<div id="center">


The </div> and </body> are in my footer.php


</div>
</body>


^Between the div and body are all the ads, and the back button, with some line breaks and horizonal rules..

Note that I excluded all the other code for the actual content, that is just what i put in for the layout.

Now that that is said, what am i doing wrong? Becuase atm, the left and right colors does not go down all the way, it only goes down a certain amount (differnet for each page), but as you can see i have the height as 100%..
WebBaka
08-13-2006, 12:14 AM
Okay... I think I made a mistake there.
100% must be window height/width instead of page height/width. I'm not sure there's a way to fix that, besides using tables for the whole thing, which I don't suggest doing. You could also input a px height, but again it would be troublesome and not as stream-lined. Another option would be using a background image for the entire page consisting of the dark brown with light brown columns... but of course, once again there could be problems.
I would continue seeking help if you want a really well laid-out page, but the solutions I've suggested (despite their flaws) would probably work with most people's browsers.
I'm fairly new to div layouts, so all I can say is good luck and I hope you find your answer. :)
General MJ
08-13-2006, 12:23 AM
Aww really?? Can anyone else help me?
General MJ
08-13-2006, 08:24 PM
OK, I have done some reserach, and i think this is the correct code, but i am not sure..
background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

I would like to point out that i just took that from another website, and do not know what it means..can anyone explain?