...

View Full Version : Trying to keep a cool footer down.



Sclark
09-03-2010, 04:34 PM
I'm trying to get a footer that has several elements to stick to the bottom. It's not a straight box footer. You can see it here at this link http://www.sclarkstudio.com/testing/site3 (http://www.sclarkstudio.com/testing/site3)

I'm developing this layout with just DIVs and using layers that overlap. And have added some transparencies so you can see whats going on. This is going to be a template page and depending on the page height which would be dynamic I don't know what the pages will be. And I don't want to have to adjust every page manually. I'm trying to control it with CSS, here is that code. And if you visit the page link above you can view the source code for the page. I've added some notes on the page linked above.

Any help would be appreciated. Who knew I could learn actionscript faster but CSS is driving me a bit loopy.

[CODE]

html, body {
height: auto;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

.push {
height: 80px;
background-color: #FF0;
bottom: 0px;
}

#content {
height: auto;
width: 800px;
background-color: #000;
z-index: 50;
position: relative;
color: #FFF;
top: 100px;
margin: auto;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

}
#footer_wrapper {
width: 100%;
position: relative;
height: 50px;
min-width: 900px;
bottom: 0px;
background: url(../images/ground.png) repeat-x bottom;
}
#footer_bike {
height: 102px;
width: 173px;
right: 0px;
position: absolute;
bottom: 10px;
z-index: 3;
}
#footer_palmtree {
height: 590px;
width: 300px;
bottom: 0px;
position: absolute;
left: 0px;
z-index: 2;
}
#wrapper {
width: 100%;
height: auto;
min-height: 100%;
height: 100% !important;
height: 100%;
background-color: #0FF;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

}
[CODE]

ahayzen
09-03-2010, 04:58 PM
Hi Sclark and Welcome to the coding forums

You could add in the position and width tags to your css so it would become:



html, body {
height: auto;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

.push {
height: 80px;
background-color: #FF0;
bottom: 0px;
position: absolute;
width: 100%;
}

#content {
height: auto;
width: 800px;
background-color: #000;
z-index: 50;
position: relative;
color: #FFF;
top: 100px;
margin: auto;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

}
#footer_wrapper {
width: 100%;
position: relative;
height: 50px;
min-width: 900px;
bottom: 0px;
background: url(../images/ground.png) repeat-x bottom;
}
#footer_bike {
height: 102px;
width: 173px;
right: 0px;
position: absolute;
bottom: 10px;
z-index: 3;
}
#footer_palmtree {
height: 590px;
width: 300px;
bottom: 0px;
position: absolute;
left: 0px;
z-index: 2;
}
#wrapper {
width: 100%;
height: auto;
min-height: 100%;
height: 100% !important;
height: 100%;
background-color: #0FF;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}


Hope that helps

Andy

Sclark
09-03-2010, 05:09 PM
That helped. I also changed the HTML CSS. Instead of setting the html, body to height: auto; I changed it to 101% and that pushed it down. But it's still about 5 pixels off the bottom. I have no idea how to correct that. If I set the footer_wapper to bottom: -5px; then it just pushes the page height and I have the same issue.

I just updated the CSS so now it's showing that problem.

Jer
09-03-2010, 05:36 PM
You can prob also use clear:both in your css. I use that for my footers on a 3 column site.

Sclark
09-03-2010, 08:26 PM
where would I put the clear? in the footer_wapper tag?

Sclark
09-03-2010, 08:29 PM
yeah the clear didn't do anything about that space at the bottom.

Jer
09-04-2010, 05:50 AM
I add a new div before I close out the middle section and open another div...


<div id="main">
<div class="clearthis" />
</div>

<div id="footer">
</div>
</body>
</html>


and my clear this class is,



#main {
width: 900px;
height: 600px;
padding: 2px;
}
.clearthis {
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
}
#footer {
width: 900px;
height: 145px;
background-color: black;
padding: 2px;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum