Division background colour not showing behind text element

**tony webb** · 10-06-2012 03:59 AM

I am trying to program a website and am now unable to get the division background to display behind a text element. You can see what I mean by clicking here.

[CSS CODE]
body{ max-width: 62.50em;
margin: 0 auto;
padding-bottom: 90px;
background-color: #c0c0c0;
}
#main-back {background-color: #fffff0;} /// Not showing
#main-box {float: left;
padding-bottom: 20px;
background-color:#FFFFFF;
Margin-left: 15%;
margin-right: 15%;
padding: 10px;
border-color: #D5D6FF;
border-style: outset;
border-width: 4px;
text-align: left;
font-family: arial,san-serif;
font-size: 1.25em;
color: black;
}

#main-box img.align-left {float:left;}

#texted-1 {background-color:#FFFFFF;
padding-left: 10px;
padding-right: 10px;
font-family: arial;
font-size: 1.00em;
color: black;
}
[/CODE]

The html code is;

HTML Code:

<div id="main-back"> 
               <div id="main-box">
	          <h3>About the author - Tony Webb, About the author - Tony Webb, About the author - Tony Webb</h3>
		   <div id="texted-1">
		    <p><img src="http://www.what-do-christians-believe.co.uk/wpimages/a-webb-photo.jpeg" alt="Photo of Tony Webb" />
                   </div>
                 </div>
              </div>

  <div id="foot-menu">

Can you tell me what code I need to use to include the background behind the text box (#fffff0)?

**coothead** · 10-06-2012 06:10 AM

Hi there tony webb,

just remove the "float:left" from your "#main-box" rules.

coothead

**tony webb** · 10-06-2012 08:30 AM

Thanks for your reply. I have removed the float: left comment. It hasn't quiet worked.

I get the text box immediately under the nav bar with no spacing.

I've tried adding margin-top: 20px; at the top of div. a bit lower and even lower at the bottom of the div.
It hasn't worked.

You can see the result [URL="http://www.what-do-christians-believe.co.uk/test/test-3009.html"]here [/U
RL]

I've also tried putting the margin in the html code. That hasn't worked either. Here is the css code;

Code:

#main-back {background-color: #fffff0;
            margin-top: 20px; // doesn't do anything
            }
#main-box {padding-bottom: 20px;    // tried putting margin here
           background-color:#FFFFFF;
           Margin-left: 15%;
           margin-right: 15%;
           padding: 10px;
           border-color: #D5D6FF;
           border-style: outset;
           border-width: 4px;   // tried putting margin below here
           text-align: left;
           font-family: arial,san-serif;
	   font-size: 1.25em;
           color: black;
           margin-top: 20px;
  }

All the url's css code is here

HTML Code:

<div id="main-back" style="margin-top: 1.25em"> // style not working either
               <div id="main-box">
	          <h3>About the author - Tony Webb, About the author - Tony Webb, About the author - Tony Webb</h3>
		   <div id="texted-1">
		    <p><img src="http://www.what-do-christians-believe.co.uk/wpimages/a-webb-photo.jpeg" alt="Photo of Tony Webb" />
                      
   </div>
   </div>
</div>

You can see all the html code by clicking source from here

Both sets of code pass w3c validation.

I do have a problem with an image not displaying. I've posted another thread on this but not got an asnwer that works. It seems that the division isn't being read.

**coothead** · 10-06-2012 10:04 AM

Hi there tony webb,

I have made a few amendments to both your css and html files.

You will find both of these file in the attachment.

coothead

**tony webb** · 10-06-2012 10:47 AM

Hi Coothead,

Thanks for that and for centralising the footer menu. That was my next task to attempt!

**coothead** · 10-06-2012 10:56 AM

No problem, you're very welcome.

coothead

**auntnini** · 10-06-2012 04:03 PM

I was driving myself CRAZZZZzzzzzzyyyyyyyYYYY until realizing had copied WRONG <style> comment. Slashes work in JavaScript to end of line, but only /*comment*/ within CSS is slash-asterisk-asterislk-slash.

Anyway, here's some code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
#main-back { width: 80%; overflow: auto; background-color: #fffff0; margin: 10px auto; padding: 40px;} /* Not showing */
#main-box {float: left; background-color:red;
padding: 40px; margin: 10px;
border: #D5D6FF 4px outset;
text-align: left;
font-family: arial,san-serif;
font-size: 1.25em;
color: black;
}
#main-box h3 {padding: 10px; }
#main-box img {float:left; padding: 0 5px; margin; 5px; }
#texted-1 img { float:left; padding: 0 5px;}
#texted-1 p {padding: 0 5px; }
#texted-1 {background-color:#FFFFFF;
overflow: auto; 
padding: 10px; margin: 10px; 
font-family: Arial, Helvetica, sans-serif;
font-size: 1.00em;
color: black;
}
</style>

</head>

<body>
<div id="main-back"> 
<div id="main-box">
<h3>About the author - Tony Webb, About the author - Tony Weoverflow: auto:bb, About the author - Tony Webb</h3>
<div id="texted-1">
<img src="http://www.what-do-christians-believe.co.uk/wpimages/a-webb-photo.jpeg" alt="Photo of Tony Webb" /><p>About the author - Tony Webb</p>
</div>
</div>
</div><!--closeMAIN-BACK-->
</body>
</html>

Thread: Division background colour not showing behind text element

Thread Tools

Display

Division background colour not showing behind text element

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions