www.webdeveloper.com
Results 1 to 7 of 7

Thread: Division background colour not showing behind text element

  1. #1
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    Division background colour not showing behind text element

    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)?

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    Hi there tony webb,

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

    coothead

  3. #3
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    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.
    Last edited by tony webb; 10-06-2012 at 08:34 AM.

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    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
    Attached Files Attached Files

  5. #5
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    Hi Coothead,

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

  6. #6
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    No problem, you're very welcome.


    coothead

  7. #7
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles