Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Container Background Color not showing up, help!

    Hey there! 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®</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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Check out this example. Basically your black part will be an image as wide as your left column that is about 1px high. Then you will repeat it as the background for your #container.

    http://bonrouge.com/2c-hf-fluid.php
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey, thanks for the reply, I appreciate it. The page you linked helped, I was able to make some of the changes and I decided to change the whole look of my page to a relative design so it fits browser windows horizontally.

    However, I can't make my text layer work right. I worked on it for hours yesterday hoping I could figure it out on my own, but I failed... It looks pretty butchered right now.

    I tried to Mimic how that page was designed.

    Container (he used #wrap)
    --Header
    --Footer
    -SidePane (he used #inner-wrap)
    ---TextBody (his was #main)
    ---Menu_Container (his was #left)
    -----All my sub menu's

    At least, thats how I think I did it. Here's the link again, http://www.agwaterchemical.com/test/about.html
    As you can see the Main/TextBody is not streching to fit the page, also it does not match up with the right side Header/Footer.

    I colored the SidePane red to see what it was doing and where its going. And I have no idea what its doing.

    Also, I have only been previewing this in Firefox2 right now, no IE stuff done yet. As

    Updated CSS:

    Code:
    /* CSS Document */
    
    html {height:100%;}
    body {
    	height:100%;
    	font-family:Arial, Helvetica, sans-serif; 
    	font-size:14px;}
    
    h1 {font-family: Arial, Helvetica, sans-serif; font-size:30px; font-weight:400;}
    h2 {font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:400;}
    h3 {font-family: "Times New Roman", Times, serif; font-size:24px; font-weight:400;}
    
    /*Styles*/
     .floatright{
    	float: right;
    	border: 1px solid #666;
    	margin-left: 10px;
    	margin-top: 5px;
    	margin-bottom: 5px;}
    
     .floatleft{
    	float: left;
    	border: 1px solid #666;
    	margin-top: 5px;
    	margin-right: 10px;
    	margin-bottom: 5px;}
    
     .imageborder{
    	border: 1px solid #000000;}
    	
     .topborderleft{
    	float:left;
        border-top: 1px solid #000000;}
    	
     .topborderright{
    	float:right;
        border-top: 1px solid #000000;}
    
     .w11{
        color: #FFFFFF;
        font-size:11px;
    	background-color: #2A8AC6;}
    
     .b11{
        color: #000000;
        font-size:11px;}
    	
     .underlined{
        text-decoration:underline}
    	
     .marginblack{ 
        margin-left: 30px; 
    	margin-right: 30px; 
    	font-size:12px}
     
     
    /*Layers*/ 
    #Container{
    	position:relative;
    	background:url(images/background.gif) top left repeat-y;
    	min-height:100%;
    	margin:auto;}
    	
    #Header{
    	position:absolute;
    	width:100%;
    	z-index:6;
    	background-color: #000000;
    	background:url(images/agwaterchemical.jpg) bottom left no-repeat #000000;
    	border: 1px solid #000000;
    	border-top: 3px solid #000000;}
    	
    #SidePane{
    	float:left;
    	padding-bottom:16px;
    	height:100%;
    	width: 100%;
    	background-color: #FF0000;}
    	
    #SidePane:after{
    	content:" ";
    	display:block;
    	clear:both;}
    
    #TextBody{
    	position:relative;
    	background-color: #f5f0eb;
    	border-right: 1px solid #000000;
    	margin-left: 119px;
    	margin-top: 86px;
    	padding-left: 10px;
    	padding-right: 10px;}
    	
    #Footer{
    	position:absolute;
    	width:100%;
    	color: #FFFFFF;
    	font-size:11px;
    	text-align:right;
    	z-index:5;
    	background-color: #2A8AC6;
    	border: 1px solid #000000;
    	border-bottom: 3px solid #000000;
    	bottom:0;}
    	
    
    #Menu_Container{
    	position:absolute;
    	z-index:1;
    	top: 87px;
    	border-left:1px solid #000000;
    	left: 0px;}
    	
    #Menu_Home{
    	position:absolute;
    	width:116px;
    	z-index:3;
    	left: 0px;
    	top: -1px;}
    	
    #Menu_Products{
    	position:absolute;
    	width:116px;
    	z-index:4;
    	left: 0px;
    	top: 108px;}
    	
    #Menu_Information{
    	position:absolute;
    	width:116px;
    	z-index:2;
    	left: 0px;
    	top: 200px;}

    Updated 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="Header" align="center" class="w11">Original Chemistry for Original Solutions<br />
        <img src="images/leaf.png" width="257" height="68" class="topborderright" /></div>
    
    <div id="SidePane">
      <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>
    	<hr />
    	<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 class="marginblack">&nbsp;</p>
    	<p class="marginblack">&nbsp;</p>
      </div></div>
    
    <div id="Menu_Container" >
    <img src="images/menu2.png" width="116" height="548" />
    	<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®</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>
    
    
    <div id="Footer">
    	<div align="center" class="b11">Quick Navigation:<br />
    		<a href="index.html">Home</a> / 
    		About Us / 
    		<a href="testimonials.html">Testimonials</a> / 
    		<a href="contact.html">Contact</a> / 
    		<a href ="links.html">Links</a> -
    		<a href ="links.html">Agri Tec</a> / 
    		<a href="kleenflo.html">Kleen Flo</a> / 
    		<a href="farewell.html">FAREWELL</a> / 
    		<a href="pristineblue.html">PristineBlue</a> - 
    		<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></div>
    </div>
    
    </div>
    Last edited by sithhar; 01-31-2007 at 10:51 PM. Reason: forgot link

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Your content should come AFTER the left side. What are you doing with the #Side_Pane div? It seems to serve no purpose. REREAD his example CAREFULLY and SLOWLY so you can understand it better.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alright, I re-read it... a lot. Either I'm totally blindly missing something obvious (which Is highly possible) or something else is wrong.

    I put the SidePane in as a last ditch effort before to represent the #inner-wrap. Obviously it didn't work! So I deleted it and restructured my Div's like so:

    Code:
    <div id="Container">
    	<div id="Header" align="center" class="w11">Original Chemistry for Original Solutions<br /> 
    	<img class="topborderright" src="images/leaf.png" width="257" height="68"></div>
    
    		<div id="Menu_Container" >
    		  <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®</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 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>
    		  	<hr />
    			<p class="marginblack">*Ag Water Chemical, its Representatives, Dealers, Suppliers and other associates are not in any way affiliated with           or to beconfused 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>
    		  </div>
    		</div>
    
    	<div id="Footer" class="b11">Quick Navigation:<br />
    		<a href="index.html">Home</a> / 
    		About Us / 
    		<a href="testimonials.html">Testimonials</a> / 
    		<a href="contact.html">Contact</a> / 
    		<a href ="links.html">Links</a> -
    		<a href ="links.html">Agri Tec</a> / 
    		<a href="kleenflo.html">Kleen Flo</a> / 
    		<a href="farewell.html">FAREWELL</a> / 
    		<a href="pristineblue.html">PristineBlue</a> - 
    		<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>
    	</div>
    </div>

    And my CSS:
    Code:
    #Container{
    	background:url(images/background.gif) top left repeat-y;
    	min-height:100%;
    	margin:auto;
    	position:relative;}
    	
    #Header{
    	position:absolute;
    	width:100%;
    	z-index:6;
    	background-color: #000000;
    	background:url(images/agwaterchemical.jpg) bottom left no-repeat #000000;
    	border: 1px solid #000000;
    	border-top: 3px solid #000000;}
    	
    
    #Menu_Container{
    	padding-bottom:80px;}
    
    #Menu_Container:after {
    	content:" ";
    	display:block;
    	clear:both;}
    	
    #Menu_Home{
    	position:absolute;
    	width:116px;
    	z-index:3;
    	left: 0px;
    	top: -1px;}
    	
    #Menu_Products{
    	position:absolute;
    	width:116px;
    	z-index:4;
    	left: 0px;
    	top: 108px;}
    	
    #Menu_Information{
    	position:absolute;
    	width:116px;
    	z-index:2;
    	left: 0px;
    	top: 200px;}
    
    
    #TextBody{
    	position:relative;
    	background-color: #f5f0eb;
    	border-right: 1px solid #000000;
    	margin-left: 119px;
    	padding-left: 10px;
    	padding-right: 10px;}
    	
    #Footer{
    	position:absolute;
    	width:100%;
    	height:80px;
    	color: #FFFFFF;
    	font-size:11px;
    	text-align:right;
    	z-index:5;
    	background-color: #2A8AC6;
    	border: 1px solid #000000;
    	border-bottom: 3px solid #000000;
    	bottom:0;}
    And I'm seeing just as many errors as before, http://www.agwaterchemical.com/test/about.html

    Some things aren't explained in that example, like this:

    #inner-wrap:after {
    content:" ";
    display:block;
    clear:both;}

    I have no clue what most of that does (I'm new to CSS remember..) Placing it in my CSS and changing #inner-wrap to my #Menu_Container appears to do nothing.

    I have also tried changing my 3 Menu sections (which Im assuming represent his #left) to float:left and they all just disappear or break apart. I've tried cutting them out thinking they were messing it up and no change to the overall structure of the page.

    So, I don't know whats going on, my heads starting to hurt lol

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You need to close your menu_container before you textbody and remove that h2 around your navigation. Now your main problem is you are abusing position:absolute. Remove that and let things flow naturally. Divs will stack on to of each other by default.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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