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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    216
    Thanks
    116
    Thanked 1 Time in 1 Post

    Transparent Footer Overlay at bottom of viewport (not page)

    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;
    }

  • #2
    New Coder
    Join Date
    Aug 2002
    Posts
    86
    Thanks
    2
    Thanked 1 Time in 1 Post
    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);
    }

  • Users who have thanked waps2 for this post:

    BlackReef (05-26-2012)

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    216
    Thanks
    116
    Thanked 1 Time in 1 Post
    Quote Originally Posted by waps2 View Post
    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


  •  

    Posting Permissions

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