...

View Full Version : Help with CSS problems



gfX
01-24-2007, 08:31 PM
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!

Excavator
01-24-2007, 09:31 PM
hello gfx,
You need to clear your float to get #wrapper to enclose the entire page. Change your CSS like this:

* {
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:


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.

gfX
01-24-2007, 10:13 PM
Thank you SOO much.
You've made things so much easier for me - I appreciate it.

Wonderful.

gfX
01-25-2007, 12:37 AM
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.

Excavator
01-25-2007, 03:59 AM
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.

gfX
01-26-2007, 11:04 AM
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.

Excavator
01-26-2007, 06:33 PM
http://alistapart.com/articles/fauxcolumns/ shows how to fake a column like that.

gfX
01-26-2007, 10:51 PM
Man it really doesn't seem to be working for me!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum