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 8 of 8
  1. #1
    gfX
    gfX is offline
    New Coder
    Join Date
    Feb 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with CSS problems

    Hello there,
    I have a website: http://hickslandscape.com/

    If you notice, The left side stops - And the background image is displayed. This does not look right. I would like this side to be like the right side, where it expands down as the green. I'm not sure what is causing this, but I just wanted to see what's up and see if you guys see anything wrong in the coding or ways I can solve this.

    Thanks!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    hello gfx,
    You need to clear your float to get #wrapper to enclose the entire page. Change your CSS like this:
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	background-color:#2D302C;
    	background-image:url(images/bg.gif);
    	color:#222222;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 8pt;
    	margin: 0 auto;
    	text-align: center;
    	behavior: url(csshover.htc);
    }
    a {
    	color:#222222;
    	text-decoration:none;
    	}
    a:hover {
    	color:#CCDE8D;
    	}
    img {
    	border:0;
    	}
    p {
    	margin-bottom:20px;
    	line-height:20px;
    	}
    
    #wrapper {
    	margin:0 auto;
    	width:900px;
    overflow: hidden;
    	text-align: left;
    	background-color:#e8f6bf;
    	border-top: 1px solid #000000;
    	border-left: 1px solid #000000;
    	border-right: 1px solid #000000;
    	}
    * html #wrapper {
    	width: 902px;
    }
    #header {
    	background: url('images/newheader.gif');
    	height: 167px;
    }
    #footer {
    	height:35px;
    	text-align: center;
    	color: #ffffff;
    	font-size: 11px;
    	clear: both;
    	line-height:35px;
    	background: url('images/navbar.gif');
    	background-repeat:repeat-x;
    	padding:0 10px;
    	}
    #content {
    	width: 210px;
    	background-color: #e8f6bf;
    	text-align: center;
    }
    #content p {
    	margin: 0;
    	padding: 0;
    	font-family:Verdana, Arial, Trebuchet MS, Helvetica, sans-serif;
    	font-size: 8pt;
    	font-weight: normal;
    }
    #stuff {
    	width: 660px;
    }
    #mission {
    	width: 689px;
    	height: 85px;
    	font-weight: bold;
    	text-align: center;
    	font-size: 14px;
    	background: #e8f6bf;
    }
    #missionbox {
    	font-weight: normal;
    	font-size: 13px;
    	text-align: left;
    	width: 570px;
    }
    #mission p {
    	font-weight: normal;
    }
    #stuff p {
    	margin: 0;
    	padding: 0;
    	font-family:Verdana, Arial, Trebuchet MS, Helvetica, sans-serif;
    	font-size: 8pt;
    }
    #left {
    	width: 210px;
    	border-right: 1px solid #e8f6bf;
    	float: left;
    	background: #e8f6bf;
    }
    #right {
    	width: 689px;
    	float: right;
    	background: url('images/logoimprint.gif') #fff;
    	background-repeat: no-repeat;
    	background-position: center;
    
    }
    .greenhead {
    	color: #324e1e;
    	font-size: 13px;
    	font-weight: bold;
    }
    .text {
    	font-family:Verdana, Arial, Trebuchet MS, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #000000;
    }
    .heading {
    	font-family:Verdana, Arial, Trebuchet MS, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #000000;
    	font-weight: bold;
    	text-align: center;
    }
    * html h1 {
    	font-size: 18px;
    	font-weight: bold;
    }
    Now move the HTML for your footer out of the right column, like this:
    Code:
    from this:
    
    <div id="footer">Copyright &copy; 2006 - All Rights Reserved</div>
    </div>
    </div>
    
    </body>
    </html>
    
    to this:
    
    </div>
    <div id="footer">Copyright &copy; 2006 - All Rights Reserved</div>
    </div>
    
    </body>
    </html>
    You need to add a doctype too. Check the links in my sig below.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    gfX
    gfX is offline
    New Coder
    Join Date
    Feb 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you SOO much.
    You've made things so much easier for me - I appreciate it.

    Wonderful.

  • #4
    gfX
    gfX is offline
    New Coder
    Join Date
    Feb 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excavator,
    Do you think we can make the right side expand all the way down too? See on the Service Request and About page, it stops.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    It looks like you'll need to put a 1px high by xxpx (the width of your marquee) green image repeat y on the right side of #right. That will make it look like it extends to the bottom.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    gfX
    gfX is offline
    New Coder
    Join Date
    Feb 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm, I don't exactly know what you mean. I've tried it but it didn't seem to extend down, it just stayed there.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    http://alistapart.com/articles/fauxcolumns/ shows how to fake a column like that.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    gfX
    gfX is offline
    New Coder
    Join Date
    Feb 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Man it really doesn't seem to be working for me!!


  •  

    Posting Permissions

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