background color of a div within a div?

Forum Moderators: not2easy

Message Too Old, No Replies

background color of a div within a div?

kslnor

7:19 pm on Apr 16, 2006 (gmt 0)

This may be a bit hard for me to explain, so please stay with me...

I have a page with a background color of blue. The content of the page is centered, via CSS. I would like the container that holds the centered content to be white. I can't seem to figure out how to get it to work. I tried inserting background:white into my style sheet for the appropriate container, to no avail. I'm obviously doing something wrong... Any help available?

Thank you

4hero

7:27 pm on Apr 16, 2006 (gmt 0)

Hello,

Css can be tricky to pick up.

To have a centered div with a background colour try:

the css:

body
{
text-align:center;
background:#14008F
}

#content
{
background:#fff;
width:750px;
margin:0 auto;
text-align:left
}

the html:

<body>
<div id="content">
<p>Some content goes here.</p>
</div>
</body>

Whats happening here is, everything in the body is centered (to center your content div) and applying a margin of 0 auto to the content div ensures it is slap bang in the middle. Applying a text-align:left to the content div ensures all your content is left aligned.

Hope this helps :)

kslnor

5:46 pm on Apr 17, 2006 (gmt 0)

Thanks,4Hero. Makes sense. However, I still cannot get the content div to be white while having the body background blue. I think something may be interfering. I "inherited" the job of managing this particular site and I am making some minor changes. Guess I need to really scour the existing html and style sheets.

kslnor

7:22 pm on Apr 17, 2006 (gmt 0)

I spent over an hour (just today) trying to figure out why the content div will not change to white. It remains the blue color selected for the body. Here is my code(edited version), perhaps someone can see something I overlooked?:

body
{
text-align: center;
background-color: #001f3e;
}
#content
{
background-color: #fff;
margin: 0 auto;
width: 779px;
text-align: left;
position: relative;
}
#leftbar
{
display: block;
background-color: #fff;
position: absolute;
top:25px;
width: 122px;
height: 397px;
padding: .2em .2em;
text-decoration: none;
left: 2px;
}

#scenetofolder
{
background-color: #fff;
text-decoration: none;
position: absolute;
top:25px;
left: 180px;
width:593px;
}

<div id="leftbar" style="background-image: url('tabtools.jpg');">
<center><BR><BR><A Href="/availablehomes.shtml"><center>Find a Norfolk Home</A>
<BR><img src="smallmichigan5.jpg" width="100" height="126">
<BR><br><img src="divider.jpg" width="104" height="18">
<br><br><A Href="/mortgagecalculator.shtml"><center>Mortgage Calculator</A>
<BR><br><img src="divider.jpg" width="104" height="18">
<br><A Href="/mortgagecalculator.shtml">Warranty Service</A></center>
</div>

<div id="bottomright" style="background-image: url('tabrigh.jpg'); no-repeat" align="left">
<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<img src="arrow.gif">Custom and Semi-Custom Homes: Build your dream <br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsphome on <I>your</I> homesite. View our collection of homes.
<br><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<img src="arrow.gif">View photographs of homes during the build <br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspprocess: <a href="http://www.mynorfolkhome.com">www.mynorfolkhome.com </A>
</div>
</div>
</body>

4hero

8:15 pm on Apr 17, 2006 (gmt 0)

hmm, your code can do with some tender loving care, but for starters try this:

#scenetofolder
{
background-color: #fff;
text-decoration: none;
position: relative;
top:25px;
left: 180px;
width:593px;
}