Results 1 to 1 of 1

Thread: Container Background Color not showing up

  1. #1
    Join Date
    Oct 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Container Background Color not showing up

    Heya, I'm a bit new to CSS, kind of learning it as I go for a web page I've been building for my cousins company. I've redesigned this page several times while I learn CSS and in my current design I had all my pages set to fixed heights for visual reasons. Now I understand that that can be bad if people use larger fonts, higher font resolution, etc. Plus, I HATE all the dead space.

    So I've been slowly changing it so page heights are based on content. The problem I've been having is this Back bar on the left side of my page. I want it to end at the top of my footer graphic (blue bar at the bottom of the page) but not go passed it. Well my first attempt to "get by" was a fixed 2000px high layer. I could fake it that way, until I viewed it on one of my smaller pages that is not as tall as my browser window and saw the Black bar shooting passed my Footer layer. I also tried using a Background image and deleting the Black side Pane layer. The image worked better because it was infinite, but I end up with the same problem. So now I'm trying to wrap the whole page in a Container with a Black Background so that, (in my mind) the Side Pane will be as long as my content and will never over lap my Footer.

    Only problem is, I can't get the Background of my Container to show up. I'm not sure what I'm doing wrong...

    Here is the page as it is currently with the Fixed height and black left pane:
    http://www.agwaterchemical.com/about.html

    And this is my Containered version where the Black side isn't show up:
    http://www.agwaterchemical.com/test/about.html

    Here is (what I think is) relevant code from my Stylesheet:

    Code:
    /*Layers*/ 
    #Container{
    	position:absolute;
    	z-index:10;
    	background-color:#000000;
    	margin: 0 auto;}
    
    #TextBody{
    	position:absolute;
    	width:856px;
    	z-index:2;
    	left: 120px;
    	top: 210px;
    	background-color: #f5f0eb;
    	padding-top: 5px;
    	padding-right: 15px;
    	padding-left: 15px;
    	border-right: 1px solid #000000;}
    	
    #Menu_BG{
    	position:absolute;
    	width:116px;
    	z-index:1;
    	left: -1px;
    	top: 88px;
    	border: 1px solid #000000;
    	background-color: #000000;
    	height: 548px;
    	background-image: url(images/menu2.png);}
    	
    #Menu_Home{
    	position:absolute;
    	width:116px;
    	z-index:6;
    	left: 0px;
    	top: 89px;}
    	
    #Menu_Products{
    	position:absolute;
    	width:116px;
    	z-index:5;
    	left: 0px;
    	top: 201px;}
    	
    #Menu_Information{
    	position:absolute;
    	width:116px;
    	z-index:4;
    	left: 0px;
    	top: 296px;}
    
    #Header{
    	position:absolute;
    	width:1005px;
    	height:68px;
    	z-index:7;
    	left: 0px;
    	top: 20px;
    	background-color: #F7F7F7;
    	border-left: 1px solid #000000;
    	border-right: 1px solid #000000;}
    	
    #TextBodyHeader{
    	position:absolute;
    	width:886px;
    	z-index:8;
    	left: 119px;
    	top: 88px;
    	border: 1px solid #000000;
    	height: 119px;
    	border-top: 4px solid #000000;}
    		
    #TopBorder{
    	position:absolute;
    	width:1005px;
    	height:16px;
    	z-index:9;
    	left: 0px;
    	top: 0px;
    	background-color: #2A8AC6;
    	border: 1px solid #000000;
    	border-top: 3px solid #000000;}
    	
    #Footer{
    	position:absolute;
    	width:1005px;
    	height:16px;
    	color: #FFFFFF;
        font-size:11px;
    	text-align:right;
    	z-index:3;
    	background-color: #2A8AC6;
    	border: 1px solid #000000;
    	border-bottom: 3px solid #000000;
    	left: -120px;}

    And here's my HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    
    <link rel="stylesheet" type="text/css" href="index.css">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>CALIFORNIA WATER TREATMENT - AG Water Chemical, Fresno</title>
    <style type="text/css">
    <!--
    a.navbar3:link {
    	position:absolute;
    	width:110px;
    	height:16px;
    	left: 2px;
    	top: 32px;
    	color:#000000;
    	background-color: #FFFFFF;
    	text-decoration: none;
    	border: 1px solid #000000; }
    a.navbar3:visited {
    	position:absolute;
    	width:110px;
    	height:16px;
    	left: 2px;
    	top: 32px;
    	color:#000000;
    	background-color: #FFFFFF;
    	text-decoration: none;
    	border: 1px solid #000000; }		
    -->
    </style>
    </head>
    
    
    <body>
    <div id="Container">
    <div id="TopBorder" align="center" class="w11">Original Chemistry for Original Solutions</div>
    <div id="Header" align="center"><img src="images/AGWATERCHEMICAL.png" width="1005" height="68" /></div>
    <div id="TextBodyHeader"><img src="images/h-aboutus.jpg" alt="Ag Water Chemical" width="886" height="119" /></div>
    
    <div id="TextBody">
      <p>Ag Water Chemical&rsquo;s President and CFO collectively have 70 years of experience in the agricultural industry, business, water treatment and alternative energy.  Richard Clevenger, President and James Legari, CFO are committed to bringing farmers throughout California products that control common irrigation and water problems as well as offering products that are safe for the environment. </p>
    <p class="marginblack">*Ag Water Chemical, its Representatives, Dealers, Suppliers and other associates are not in any way affiliated with or to be confused with Ag Water Solutions, Inc.  Ag Water Chemical is the EXCLUSIVE distributor of Agri Tec and Kleen Flo, only provides EPA registered products and is committed to offering our customers the best and most effective water treatment products.  </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <hr />
    <p align="center" class="b11">Quick Navigation:<br />
      <a href="index.html">Home</a> / <a href="about.html">About Us</a> / <a href="testimonials.html">Testimonials</a> / <a href="contact.html">Contact</a> / <a href="links.html">Links</a>, &nbsp;&nbsp;Agri Tec / <a href="kleenflo.html">Kleen Flo</a> / <a href="farewell.html">FAREWELL</a> / <a href="pristineblue.html">PristineBlue</a>,&nbsp;&nbsp;  <a href="msdssheets.html">Lables &amp; MSDS</a> / <a href="ecoli.html">Agri Tec &amp; E.coli</a> / <a href="chlorine.html">Negative Effects of Chlorine</a><br />
      <br />
    <div id="Footer">Problems? Contact the <a href="mailto:sithhar@gmail.com">Webmaster</a></div>
    </div>
    
    <div id="Menu_BG">&nbsp;</div>
    <h2>
    <div id="Menu_Home">
    <a class="navbar1" id="Main Menu">&nbsp;Main Menu</a>
    <a class="navbar2" a href="index.html" id="Home">&nbsp;&nbsp;&nbsp;Home</a>
    <a class="navbar3" a href="about.html" id="About Us">&nbsp;&nbsp;&nbsp;About Us</a>
    <a class="navbar4" a href="testimonials.html" id="Testimonials">&nbsp;&nbsp;&nbsp;Testimonials</a>
    <a class="navbar5" a href="contact.html" id="Contact">&nbsp;&nbsp;&nbsp;Contact</a>
    <a class="navbar6" a href="links.html" id="Links">&nbsp;&nbsp;&nbsp;Links</a></div>
    <div id="Menu_Products">
    <a class="navbar7" id="Our Products">&nbsp;Our Products</a>
    <a class="navbar8" a href="agritec.html" id="Agri Tec">&nbsp;&nbsp;&nbsp;Agri Tec™</a>
    <a class="navbar9" a href="kleenflo.html" id="Kleen Flo">&nbsp;&nbsp;&nbsp;Kleen Flo™</a>
    <a class="navbar10" a href="farewell.html" id="FAREWELL">&nbsp;&nbsp;&nbsp;FAREWELL</a>
    <a class="navbar11" a href="pristineblue.html" id="PristineBlue">&nbsp;&nbsp;&nbsp;PristineBlue&#174;</a></div>
    <div id="Menu_Information">
    <a class="navbar12" id="Information">&nbsp;Information</a>
    <a class="navbar13" a href="msdssheets.html" id="Lables & MSDS Sheets">&nbsp;&nbsp;&nbsp;Labels & MSDS</a>
    <a class="navbar14" a href="ecoli.html" id="E. coli">&nbsp;&nbsp;&nbsp;Agri Tec & E. coli</a>
    <a class="navbar15" a href="chlorine.html" id="Negative Effects of Chlorine">&nbsp;&nbsp;&nbsp;Effects of Chlorine</a></div>
    </h2>
    </div>


    Any ideas/suggestions? And yes... I'm using Dreamweaver, but I try to manually edit it as much as possible. Most of my CSS is not Dreamweaver generated.

    Jess
    Last edited by Sithhar; 01-29-2007 at 10:07 PM. Reason: Re-wording/spelling

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
  •