SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Non-Member
    Join Date
    Apr 2007
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I add a background color?

    How do I add a backdround color to the are outside of the container area?
    Thanks.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test 3</title>
    <style type="text/css">
    #container {
    	width: 800px;
    	margin-left: auto;
    	margin-right: auto;
    }
    #left_column {
    	border: 1px solid #999999;
    	float: left;
    	width: 230px;
    	margin-top: 5px;
    	margin-right: 10px;
    	margin-left: 20px;
    	margin-bottom: 40px;
    	padding-left: 10px;
    	padding-right: 10px;
    	padding-top: 5px;
    }
    #header_table {
    	width: 100%;
    	border-collapse: collapse;
    }
    .header_top_tdl {
    	padding: 0px;
    	margin: 0px;
    	border-bottom-style: solid;
    	border-bottom-width: 10px;
    	border-bottom-color: #b7b7b7;
    	background-color: #800000;
    	width: 150px;
    	border-collapse: collapse;
    	border-right-width: 0px;
    	border-left-width: 0px;
    }
    .header_top_tdr {
    	border-bottom-style: solid;
    	border-bottom-width: 10px;
    	border-bottom-color: #b7b7b7;
    	background-color: #800000;
    	border-right-width: 0px;
    	border-left-width: 0px;
    }
    
    #right_column {
    	float: right;
    	width: 500px;
    }
    #footer {
    	margin: 20px;
    	padding: 3px;
    	clear: both;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	background-color: #800000;
    	font-size: 14px;
    }
    
    .white_text {
    	background-color: #800000;
    	color: #FFFFFF;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	font-weight: bold;
    }
    
    .form_row {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    }
    
    .link_p {
    	margin-left: 20px;
    	vertical-align: middle;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 16px;
    }
    
    .link_p img {
    	vertical-align: middle;
    	margin-right: 20px;
    }
    .link_p a {
    	text-decoration: none;
    	color: #000000;
    }
    .link_p a:hover {
    	color: #009933;
    }
    
    </style>
    </head>
    
    <body>
    <div id="container">
    
    <div id="header">
    
    <table id="header_table">
    	<tr>
    		<td class="header_top_tdl">&nbsp;</td>
    		<td class="header_top_tdr">&nbsp;</td>
    	</tr>
    	<tr>
    		<td>&nbsp;</td>
    		<td>&nbsp;</td>
    	</tr>
    	<tr>
    		<td>&nbsp;</td>
    		<td>&nbsp;</td>
    	</tr>
    </table>
    
    </div>
    
    <div id="content">
    <div id="left_column">
    	<table >
    		<tr>
    			<td colspan="2">&nbsp;
    			</td>
    		</tr>
    
    		<tr>
    			<td class="white_text"colspan="2">&nbsp;
    			Login Here</td>
    		</tr>
    		<tr>
    			<td colspan="2">&nbsp;
    			</td>
    		</tr>
    		<form action="/smusermanager/members/default.asp?action=login" method="post"
    		name="login" language="JAVASCRIPT" onsubmit="return Validate();">
    		<input name="todo" value="login" type="hidden"/><input name="url"
    		value="/smusermanager/members/default.asp" type="hidden"/>
    
    		<tr class="form_row">
    			<td>Email Address</td>
    			<td>&nbsp;<input class="fieldbox" size="20" maxlength="50" name="members_username" type="text"/></td>
    		</tr>
    		<tr class="form_row">
    			<td>Password</td>
    			<td>&nbsp;<input class="fieldbox" size="20" maxlength="50" name="members_password" type="password"/></td>
    		</tr>
    		<tr class="form_row">
    			<td>&nbsp;</td>
    			<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
    			<input class="fieldbox" value="Login" id="submit2" name="submit2" type="submit"/></td>
    		</tr>
    
    		</form>
    		<tr>
    			<td colspan="2" >
    			<p class="link_p">&nbsp;</p>
    			<p class="link_p">
    			<img alt="Image" src="images/Hphone.gif" width="51" height="44"/>
    			<a href="http://www.s/test1.html?action=login">Home</a></p>
    			<p class="link_p">
    			<img alt="Image" src="images/hphone1.gif" width="51" height="39" />
    			<a href="http://www.s/test1.html?action=register">Register</a></p>
    			<p class="link_p">
    			<img alt="Image" src="images/hphone2.gif" width="44" height="42" />
    			<a href="http://www.s/test1.html?action=forgotusername">FAQ</a></p>
    			<p class="link_p">
    			<img alt="" src="test1_files/hphone3.gif" width="49" height="38" />
    			<a href="http://www.s/test1.html?action=forgotusername">Terms Of Use</a></p>
    			<p class="link_p">
    			<img alt="" src="test1_files/hphone4.gif" width="42" height="38" />
    			<a href="http://www.s/test1.html?action=forgotusername">Contact Us</a></p>
    			<p class="link_p">
    			<img alt="" src="test1_files/hphone5.gif" width="33" height="41" />
    			<a href="http://www.s/test1.html?action=forgotpass">Forgot Password</a></p>
    			<p>&nbsp;</p>
    			</td>
    		</tr>
    		<tr>
    			<td colspan="2">&nbsp;
    			</td>
    		</tr>
    	</table>
    </div><!-- end of left column -->
    
    <div id="right_column">text blah blah blah text text text</font><br><font face="Arial" color="#800000" size="3">
    Ctext blah blah blah text text text</font>
    <font color="#FF9900">_____________________________________________________________</font><br><br>
    <font face="Arial" color="#282828" size="2"> text blah blah blah text text text</font><br>
    <font face="Arial" color="#800000" size="2">
    text blah blah blah text text text</font><br>
    <font face="Arial" color="#6b6b6b"size="2">text blah blah blah text text texttext blah blah blah text text text
    ,text blah blah blah text text texttext blah blah blah text text texttext blah blah blah text text text
    while text blah blah blah text text text.
    Ltext blah blah blah text text text.</font>
    
    
    <table style="width: 100%">
    	<tr>
    		<td><img alt="" src="images/sight1.gif" width="33" height="41" style="vertical-align:middle"/>&nbsp;
    		And some text here</td>
    		<td><img alt="" src="images/sound1.gif" width="32" height="38" style="vertical-align:middle" />&nbsp;&nbsp;
    		And some text here</td>
    	</tr>
    </table>
    
    
    <table style="width: 100%">
    	<tr><font color="#FF9900">________________________________________________________________</font><br>
    		<td valign="top"><br><img alt="" src="images/sight1.gif" width="33" height="41" style="vertical-align:middle"/>
    		<font face="Arial" color="#A30100" size="4">&nbsp;Example1</font><font face="Arial" color="#6b6b6b" size="2"><br>bc7c eid fo ryrjtkdnf gktreisvi cfen jsf fwr<br>ww bc7c eid fo ryrjtkdnf gktreisvi cfen jsf fwrww
    		bc7c eid fo ryrjtkdnf gktreisvi cfen jsf fwrwwh cbc7c eid fo ryrjtkdnf gktreisvi cfen.</td>
    
    		<td valign="top"><br><img alt="" src="images/sound1.gif" width="32" height="38" style="vertical-align:middle" />&nbsp;
    		<font face="Arial" color="#A30100" size="4">&nbsp;Example2</font><font face="Arial" color="#6b6b6b" size="2" align="left"><br>
    		bc7c eid fo ryrjtkdnf gktreisvi cfen jsf fwrww bc7c eid fo ryrjtkdnf gktreisvi cfen jsf fwrww bc7c eid fo ryrjtkdnf gktreisvi.
    		hfgjhsg hshdfhs more acd.</font></td></tr>
    </table><font color="#FF9900">________________________________________________________________</font><br>
    
    
    <font face="Arial" color="#282828" size="2">text blah blah blah text text text</font><br>
    <font face="Arial" color="#800000" size="2"> text blah blah blah text text text</font><br>
    
    <font face="Arial" color="#6b6b6b"size="2">text blah blah blah text text text,
    s,text blah blah blah text text texttext blah blah blah text text texttext blah blah blah text text texttext blah blah blah text text text
    text blah blah blah text text texttext blah blah blah text text text</font><br><br><font face="Arial" color="#282828" size="2">
    Ftext blah blah blah text text texttext blah blah blah text text text.<font face="Arial" color="#800000" size="2"> text blah blah blah text text text</font><br>
    
    <font color="#939393" size="5"><b>_______________________________________________</b></font><br>
    </p>
    <hr />
    <p><br><font face="Arial" color="#282828" size="3">Itext blah blah blah text text text</font><br></font>
    
    <font face="Arial" color="#A30100" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;one</font><font face="Arial" color="#800000" size="4">:</font>
    <font face="Arial" font color="#939393" size="2">&nbsp;&nbsp;&nbsp;text blah blah blah text text text</font><br>
    
    <font face="Arial" color="#DB8936" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;two</font><font face="Arial" color="#800000" size="3">:
    </font><font face="Arial" font color="#4c4c4c" size="2">&nbsp;&nbsp;&nbsp;Rtext blah blah blah text text textt</font><br>
    
    <font face="Arial" color="#B75b00" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;three</font>
    <font face="New Times Roman" color="#800000" size="2">:</font><font face="Arial" font color="#000000" size="2">&nbsp;&nbsp;
    text blah blah blah text text text)</font><br>
    
    <font color="#939393" size="5"><b>_______________________________________________</b></font><br><br>
    
    <font face="Arial" color="#A30100" size="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ftext blah blah blah text text text.</font>
    <font face="Arial" color="#EE8833" size="2">.</font><font face="Arial" color="#000000" size="2"> </font>
    <br><br><font face="Arial" color="#949494" size="1">text blah blah blah text text text</font></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div><!-- end of right column -->
    
    </div><!-- end of content -->
    
    <div id="footer">
    
    <table style="width: 100%">
    	<tr>
    		<td>*Copyright 2007 . All Rights Reserved.</td>
    		<td style="text-align:right">Email :&nbsp;&nbsp;&nbsp; <a href="mailto:"></a></td>
    	</tr>
    </table>
    
    </div>
    
    </div><!-- end of container -->
    
    </body>
    </html>

  2. #2
    SitePoint Member JustRyan's Avatar
    Join Date
    Oct 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can style the body element.
    body {background-color:color here;}

  3. #3
    Non-Member
    Join Date
    Apr 2007
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks,,,but...

    Thanks, but where in the code would I put your body {background-color:color here;}?

    I tried a few places and it filled in the background color everywhere.
    I wanted just outside of the container area.

    Additional help would be appreciated.

    Thanks.

  4. #4
    SitePoint Member JustRyan's Avatar
    Join Date
    Oct 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no problem. In the css add this
    Code:
    body {background-color:color here;}
    Also your coding could be tidyed up a real lot.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,815
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    As you don't have a colour specified for inside the container it just inherits the same colour as outside the container. To give them different colours you need to specify both.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    Non-Member
    Join Date
    Apr 2007
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks

    Thanks for your reply.
    What code would I use to specify a container color?

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As this part sets your #container styling
    Code:
    #container {
    	width: 800px;
    	margin-left: auto;
    	margin-right: auto;
    }
    you add the background colour to it :
    Code:
    #container {
    	width: 800px;
    	margin-left: auto;
    	margin-right: auto;
    	background-color: #FFFFFF;
    }
    - this gives a white background to the container.


Bookmarks

Posting Permissions

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