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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Trying to keep a cool footer down.

    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

    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]

  • #2
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    Hi Sclark and Welcome to the coding forums

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

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

  • #3
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Jer
    Jer is offline
    New Coder
    Join Date
    Aug 2010
    Location
    South Bend, Indiana
    Posts
    41
    Thanks
    2
    Thanked 1 Time in 1 Post
    You can prob also use clear:both in your css. I use that for my footers on a 3 column site.

  • #5
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    where would I put the clear? in the footer_wapper tag?

  • #6
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah the clear didn't do anything about that space at the bottom.

  • #7
    Jer
    Jer is offline
    New Coder
    Join Date
    Aug 2010
    Location
    South Bend, Indiana
    Posts
    41
    Thanks
    2
    Thanked 1 Time in 1 Post
    I add a new div before I close out the middle section and open another div...
    PHP Code:
            <div id="main">
    <
    div class="clearthis" />
            </
    div>
            
            <
    div id="footer">
            </
    div>
    </
    body>
    </
    html
    and my clear this class is,

    PHP Code:
    #main {
        
    width900px;
        
    height600px;
        
    padding2px;
    }
    .
    clearthis {
        
    margin 0px;
        
    height 1px;
        
    clear both;
        
    float none;
        
    font-size 1px;
        
    line-height 0px;
        
    overflow hidden;
    }
    #footer {
        
    width900px;
        
    height145px;
        
    background-colorblack;
        
    padding2px;



  •  

    Posting Permissions

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