Help - Search - Members - Calendar
Full Version: Background Color
Movable Type Community Forum > Additional Resources > Tips and Tricks
Claudius
I'm new at all this coding, so forgive me.

I have my body at a fixed width, two columns. The body is centered. I want the background color inside the body to be different from whats outside (in the right and left margins). But when I change the background color in my stylesheet, of course all the blank space under my right column (calendar, links, etc.) turns that color too. How do I keep this from happening, so that my body can remain one long rectangle?
maddy
Can you post a link to your site, so we can see what exactly is happening? smile.gif
Claudius
Yeah, Its www.digcicero.com/rinehartblog

I would like the section directly under the right column to be white instead of grey.

Once again Maddy, thanks for helping out: You're fabulous.
Claudius
*bump*

Sorry if this question is ridiculous.
Claudius
I know this is a simple problem. Here is my stylesheet code for the body:
CODE
body {
                               width:700px;
 margin-left: auto;
                               margin-right: auto;
                               border-left:1px solid #333;
                               border-right:1px solid #333;
                               border-top:1px solid #333;
                               border-bottom:1px solid #333;
 background:#CCCCCC;  
 }

I did this because I wanted everything outside of my body to be grey (#ccc), but I want everything inside my body to be white. However, I can't figure out how to get that leftover section under my right column to be white. Right now it is of course grey also.

Here is the link again: I, Claudius Flauberius...
medic119
The right side has that empty space because the sidebar hasn't been filled yet. As you fill it it will grown longer, but you can try a couple of things.

1) In the sidebar class add height:100%; That should stretch the sidebar to the height of the page

2) Create a table with two columns. Put the sidebar in one and the Content in the other. Then assign the Table levels the classes. ie
CODE
<table>
<tr><td class="Content">Main Content</td>
<td class="sidebar">Sidebar content</td>
</tr></table>


Then you can just play with the table properties for height, etc

The downside is that you are using a hybrid design and skinning the site won't really work as you won't be able to change the structure on the fly. The upside is that using tables also solve some of the quirkier cross-browser compatibility issues easier than CSS workarounds.
Claudius
Okay, I tried out your suggestions haphazardly, and I didn't really get them to work. Keep in mind I'm a newbie with code, so.

HOWEVER: While fiddling around I thought I'd try something different. So what I did was I put a white padding of 100% in the stylesheet, on the bottom of the links div (which I believe is the default id of the sidebar you were speaking of).
CODE
#links {
                               background:#fff;
 padding-right:15px;
                               padding-bottom:100%;        }


Now it seems I might be on to something, something a bit simpler even. But the white color still doesn't reach the bottom of the page, although it does reach significantly further down than the end of the content in my sidebar. So now check it out: Here

And if anyone can suggest anything I'd love it.

Once again, thanks for all the help.
Claudius
Hey....Its been over a week since I last posted, so I figured I'd give it one more 'bump'. Since then I've dallied around with the design a little, but I'm still at the same crossroads. How can I get one big white block as my blog, like this person's site:Language Maven?

instead of what I have now: Claudius Flauberius

If you scroll down on my site, you'll notice that I've used a filler with a 100% height below my sidebar. Actually three of them, because they still don't stretch all the way to the bottom.

I'm not sure I understood the last person who responded.
gbs3769
There is a real simple way of fixing this. You will need to create a Div that surrounds both your content and links divs. If you set the background of it to be white then you will be all set.

I do something similar on my blog http://thegbs.com/dailyblurb/

Although my content doesn't go as far down the page as yours...

- Matt
Claudius
That didn't seem to work...now my content stretches all the way across and my links are at the bottom.
Claudius
Hey, actually it did work. I just forgot to put the closing "}" for the div in my stylesheet. Thanks!!!!! Seriously, its been driving me absolutely bonkers for over a week. There's still a tiny margin at the very very bottom that I can't figure out, but I suppose I can live with that (unless anyone has suggestions.)

But the one last final touch I need is how to set my comments pop up, since my blog is a fixed width. I think people will have to scroll horizontally in the popup window to read the comments.
SimpleMan46
Sorry, I'm not going to be a whole lot of help, I just have an observation:

It seems like you are misusing the body. The body of a web page is the container for the ENTIRE web page. Therefore, you should not set things like width, height and margin for the body.

Just a tip. smile.gif
Claudius
Hi. I'm not sure what you mean exactly, I'm not that adept at coding. But I wanted to set my width because I had the .gif as a banner, and it was a particular width. Even if I centered the .gif in the banner, I wouldn't be able to keep the color flow of my .gif so that it fit seemlessly onto the color of the banner, because its two different colors on each side. I'm not sure if that says I'm doing anything right, though. So maybe if you elaborated?
Claudius
HELLO AGAIN!!!

Thank you to everyone who has thrown in their two-cents on this thread. But, now that it seems I've gotten it covered, there is one (maybe two) last glitches.

1. I put a div tag around the content and sidebar, with a 100% height so that the sidebar would stretch as far as the content section, and remain the same color (white).

While this works, sometimes when you go to my page it cuts off the entire page at the bottom of my sidebar. If you refresh it, it generally works itself out, and shows the whole page. Other times it shows the entire page right the first time. I can't figure it out.

2. I'm a newbie, and all this coding has probably ruined my page for browsers other than IE. Can anyone give me some feedback?

Here is my page: Claudius Flauberius
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.