...

View Full Version : Transparent Footer Overlay at bottom of viewport (not page)



BlackReef
05-25-2012, 08:56 PM
I am trying to achieve this:

http://bkbdesigngroup.com/istock_footer.htm

Notice how the footer stays at the bottom of the browser window, and not at the bottom of the content?

I've attempted looking at the CSS (view source) but it seems overly dense with code, maybe Im mistaken - it shouldn't require much to make this work.

Notice I would like to keep the transparency as well.

Here is my site and current footer code:

http://dev.electrabike.com/electra/


#main #footer {
z-index:1000;
font-size:11px;
position:absolute;
width:100%;
left:0px;
bottom:0px;
padding:6px 0px;
background:url(../images/bg-black.png);
}
#main #footer span {
float:left;
margin-left:10px;
}
#main #footer label {
float:right;
margin-right:10px;
}
#main #footer label img {
float:right;
position:relative;
margin-left:5px;
margin-top:-1px;
}

waps2
05-25-2012, 11:45 PM
Try this

#main #footer {
z-index:1000;
font-size:11px;
position: fixed;
width:100%;
left:0px;
bottom:0px;
padding:6px 0px;
background:url(../images/bg-black.png);
}

BlackReef
05-29-2012, 04:45 PM
Try this

#main #footer {
z-index:1000;
font-size:11px;
position: fixed;
width:100%;
left:0px;
bottom:0px;
padding:6px 0px;
background:url(../images/bg-black.png);
}

That did the trick! Thanks alot waps2



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum