Trouble with css stylesheet vs. frames

[forevers_night]

Hi Lissa and crew,

I'm currently working on a new homepage for my friend, it has been a while since I last did any code-stuff so I would like some help with how to do the design-part.

I have made an site, which is controlled by frames, a left(menu) right(content) where I've also made an inline-frame to controll long text content, and a top(banner) frame, I have posted the code at my index.html page. I control the design through an external stylesheet.

Now, the thing I want to do, is to change the background colours so that there are three different colors. One for the menu, one for the content and one for the Iframe, but how/where do I do that?

As I see it, you can only have one background color in a stylesheet, but then I came across your css layout suggestion in another topic, and it seems I can have different background colours with that method, but then I'll have to loose the frames, don't I?

Last I'll post a copy of my stylesheet so far, I hope you can help me out, and thank you in advance.

- forevers_night

<style type="text/css">
/** to control my links **/
a:link {
text-decoration: none;
color: blue;
}
a:visited {
text-decoration: none;
color: black;
font-style: italic;
}
a:active {
text-decoration: none;
background-color: #CCCCCC;
}
a:hover {
font-style: bold;
}
/** The body section , and my scrollbar **/
body {
background-color: #CCCCCC;
font-family: Times New Roman, arial, verdana, serif;
color: #000000 ;
font-size: 10 pt;

scrollbar-face-color : #CCCCCC;
scrollbar-highlight-color : #CCCCCC;
scrollbar-3dlight-color : #CCCCCC;
scrollbar-shadow-color : #CCCCCC;
scrollbar-darkshadow-color : #CCCCCC;
scrollbar-track-color : #CCCCCC;
scrollbar-arrow-color : #000000;

margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;


}
/** different headers**/
h1 {
font-family: arial, verdana, sans-serif;
font-size: 12 pt;
color: #000000;
font-weight: bold;
padding: 10px 10px 10px 20px;
}
h2 {
font-family: Times New Roman, serif;
font-size: 11 pt;
color: #000000;
font-style: italic;
font-weight: bold;


}
h3 {
font-family: Times New Roman, serif;
font-size: 10 pt;
color: #000000;
font-style: italic;
font-weight: bold;
}

p {
font-style: normal;
font-weight: normal;
font-size: 10 pt;
color: #000000;
font-family: arial, sans-serif;

text-indent: 30px;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
}
td {
font-family: Times New Roman, arial, verdana, serif;
color: #000000;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;

}
/** textarea **/
input, textarea {
font-family: Times New Roman, arial, verdana, serif;
color: #000000;
border-style: none; [dotted, dashed, solid, double, groove, ridge, inset, outset]
border-color: #CCCCCC;

}
</style>

[iGeek]

You'll need to define a stylesheet for each page, each with it's own background color.

Also, you need to lose the frames. There is no reason to use invalid, outdated, and frankly disgusting frames. You can get much, much, much better results with a CSS layout that uses divisions and such.

Next time, put your code in [code] or [html] BBCode tags. It puts your code in a scrolling box so your post doesn't end up four pages long.