Member Avatar for Jev181

I am new to web design and development so please bear with me. I built a site and the background of the whole site is black. I have a table set up with 100% height and width. My objective is to have a background (the solid black color) that re sizes appropriately when the browser window re sizes. Currently the horizontal re sizes with the window, but the vertical is where my problem lies. Here is my code

CSS

body {
	margin-left: 0px;
	margin-top: 0px;
}
a: hover {
	color: #66339c;
	text-decoration: none;
}
#container {
	background-color: #000000;
	background-position: center center;
	background-repeat: repeat;
	height: 100%;
	vertical-align: 100%;
}
#container #body {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	margin-top: auto;
	margin-bottom: auto;
}
#container #body #header h1 {
	text-indent: -5000px;
}
#container #body #nav_bar {
	width: 640px;
	clear: none;
	float: left;
	margin-top: -10px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
}
#container #body #nav_rule {
	float: left;
}
#container #body #nav_bar ul {
	text-decoration: none;
	list-style-image: none;

}
#container #body #nav_bar li {
	width: auto;
	float: left;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 20px;
	list-style: none;
}
#container #body #nav_bar a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #999999;
	text-decoration: none;
	list-style-image: none;
}
#container #body #bottom_logo {
	float: right;
	width: 76px;
	margin-top: 0px;
	margin-right: 50px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#container #body #content {
	width: 585px;
	padding-left: 52px;
	float: left;
	padding-top: 10px;
}
#container #body #content_info_background {
	background-image: url(images/content_background.jpg);
	background-repeat: repeat;
	float: left;
	width: 950px;
}
#container #body #info_board #mid_info {
	background-color: #66339c;
	width: 205px;
	margin-right: 3px;
}
#container #body #info_board {
	float: right;
	width: 208px;
	margin-right: 47px;
	margin-top: 15px;
}
#container #body #footer {
	clear: both;
	width: 950px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 25px;
	margin-left: 0px;
}
#container #body #content_info_background #info_board #mid_info #mid_content {
	width: 180px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

.headings {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #999999;
}
.standard_type {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #999999;
	font-weight: bold;
}
.info_option {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #999999;
}
.footer_links {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #999999;
}
.copyright_link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #66339c;
}

HTML

<!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>Forbidden Culture</title>
<link href="forbidden.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {font-size: 12px; color: #999999; font-family: Verdana, Arial, Helvetica, sans-serif;}
body {
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style>
</head>




<table width="100%" height="100%" border="0" align="center" bgcolor="#000000">
  <tr>
    <td>
    <body>
    
    <div class="standardtype" id="container">
  <div id="body">
    <div id="header">
    
    <h1>Forbidden Culture LLC</h1>
    
    <img src="images/header copy.jpg" alt="header" width="950" height="139" /></div>
    
    <div id="nav_bar">
         <ul>
			
              <li> <a href="#.html">Home</a></li>
            
            
              <li><a href="#.html">Upcoming Events</a></li>
                    
              <li><a href="#.html">Artists</a></li>
          
            
              <li><a href="#.html">Gallery</a></li>
            
            
              <li><a href="#.html">About</a></li>
           
            
              <li><a href="#.html">Products</a></li>
           
              
              <li><a href="#.html">Services</a></li>
         </ul>
    </div>
    
    <div id="bottom_logo"><img src="images/logo_btm.jpg" alt="img_bottom" /></div>
    
    <div id="nav_rule"><img src="images/nav_bar_bottom_rule.jpg" alt="bottom_nav_rule" /></div>
 
    
 
 
    <div id="content_info_background">
      <div id="content">
        <p class="headings">Our Mission</p>
        <p class="style1">Driven by the desire to bridge diverse artistic and cultural communities, Forbidden Culture utilizes progressive guerilla marketing and distribution techniques as a vehicle to unify overlooked markets and unexposed artists.</p>
      </div>
      <div id="info_board">
        <div id="top_img"><img src="images/info_top.jpg" alt="info_top" /></div>
        
     
        
      <div id="mid_info">
        <div class="info_option" id="mid_content">Forbidden Culture's Website is Coming Soon. </div>
      </div>
        <div id="bottom_img"><img src="images/bottom_info.jpg" alt="bottom_info" /></div>
        <p>.</p>
      </div>
    </div>
    <div id="footer">
    
    <img src="images/footer_rule1.jpg" alt="footer_rule1" />
      <div align="center">
        <p class="footer_links"><span class="copyright_link">Home</span> • <span class="copyright_link">Upcoming Events</span> • <span class="copyright_link">Artists</span> • <span class="copyright_link">Gallery</span> • <span class="copyright_link">About</span> • <span class="copyright_link">Products</span> • <span class="copyright_link">Services</span> • <span class="copyright_link">Contact Us</span></p>
        <p>&nbsp;</p>
        <p class="footer_links">Sitemap ©2009, Forbidden Culture LLC. All rights reserved. Website By <a href="#" class="copyright_link">VanEverett Designs</a>.</p>
        
        <img src="images/footer_rule2.jpg" alt="foot_rule2" />      </div>
    </div>
  </div>
</div>
</body>
</td>
  </tr>
</table>

</html>

p.s.
I don't know if I used the bCode properly. Told you I'm noob.

  • 2 Contributors
  • 2 Replies
  • 111 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Jev181
Member Avatar for osiris003

If you want to make your entire background black, that will always just be totally black whenever you resize, you simply have to assign the background-color to black under your body tag in the CSS file like this:

body {
	margin-left: 0px;
	margin-top: 0px;
	background-color: #000000;
}

I think that is what your looking for anyway. If you're looking for any more comments, I'm no expert, but here are a couple things I've noticed:

First of all, if you're working with a solid color as a background, I don't think you need to worry about "background-position" or "background-repeat" as you did here:

#container {
	background-color: #000000;
	background-position: center center;
	background-repeat: repeat;
	height: 100%;
	vertical-align: 100%;
}

The background color will cover the entire area anyway. You can also remove the "background-color" since that is now in the body section (unless you want the background of the container to be different than the body).

Also, in your table, you shouldn't use attributes such as bgcolor or anything that relates to the style like this:

<table width="100%" height="100%" border="0" align="center" bgcolor="#000000">

That should all be done with CSS. Again, the bgcolor doesn't really matter anyway since you've now changed the entire background to black. Hope it helps.

Member Avatar for Jev181

Thank you for that simple solution

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.