Archived

This topic is now archived and is closed to further replies.

  • 0

Sticky Footer

Question

Posted · Report post

Hi,

 

Ive seen a couple of threads about a sticky footer. Tried the solutions and so far non of theme have worked... I need to generate a full width fluid layout with a sticky footer. I'm currently using framework 2.4.

 

currently, Ive tried

 

/*Declare zero margin and padding on everything*/
* {margin:0;padding:0;}

html, body { height: 100%; }

#site .fullwidth {
    min-height: 100%;
    position:relative;
}    

#page{
    min-height: 100%;
    margin-bottom: -50px;
    position: relative;
}

#footer {
    height: 50px;
    position: relative;
    background-color:#FFFFFF;
}

 

Whats interesting though is if I make the footer height large enough, say 100px it will stick to the bottom, but If I reduce the height to what i want, around 25px it will move up, Any ideas? I need to get this done ASAP.

 

Cheers

 

 

 

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

Hi there,

 

I'd suggest trying

 

 

position:absolute; 
bottom:0; 
 

Share this post


Link to post
Share on other sites

Posted · Report post

No, that doesnt work i tried that also earlier...

 

I found this link http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

 

notice the empty div "push" inside the wrapper. Not sure if this would work but to do this I need a hook to place an empty div below the morefoot area. Pagelines standard hooks dont allow this. Is there an easy way to generate your own hook?

Share this post


Link to post
Share on other sites

Posted · Report post

Ah, there's a hook at the before the footer starts you could try and add the div to, pagelines_before_footer. I've not seen that process done before though so I couldn't say if that would work.

 

If the footer sticks using your previous css until you edit the height is there something inside the footer which is preventing it from resizing, anything in the code you need to take out for it to snap back?

Share this post


Link to post
Share on other sites

Posted · Report post

Well this is quite odd,  i can get the footer to stick to the bottom with the following without editing the core pagelines code:

 

/*Declare zero margin and padding on everything*/
* {margin:0;padding:0;}

html, body { height: 100%; }

#site .fullwidth {
       width: 100%;
       min-height: 100%;
       position:relative;
}    

#footer {
    Position: absolute;
    Width: 100%;
    Bottom: 0;
    Height: 60px;
    background-color:#FFFFFF;
}

#page-main {
      padding-bottom:60px;
}
 

 

But if I change the height and padding attributes to less then 60px the footer moves up? Odd.

 

Below is an excerpt of the generated source:         </div>
        </div>
    </div>

    <footer id="footer" class="container-group">
        <div class="outline fix">
                </div>
    </footer>
</div>

 

Note this "outline fix". This may be stuffing things up. Ive tried attempting to clear the padding etc.. on this but is there any way to clean the code up and remove it? I have a feeling this may be causing the issue.
 

Share this post


Link to post
Share on other sites

Posted · Report post

If somethings overriding the padding try adding !important to overrule it. Can you see in firebug where this padding is applying? Is the site live or on a local host?

 

Unfortunately as the footer isn't a section, its a core area of the template, I can't think of a way you could edit that and remove that content.

Share this post


Link to post
Share on other sites

Posted · Report post

Nah in firebug theres no padding applied so its definitely odd whats going on. I just started putting the site together thismorning so its running locally. 

 

Do you have an example of a site using pagelines framework 2.4 featuring a sticky footer? Perhaps I can look at its code if you could post the link...

 

The other alternative is to force it with jquery but thats more of a patch and probably not a good way of doing things.

Share this post


Link to post
Share on other sites

Posted · Report post

No we don't keep a log of the sites clients have worked on unfortunately, but I've managed to find some posts below in which clients have provided urls.

 

Most clients will create this affect by setting a static height to the page like in the post below.

 

http://www.pagelines.com/forum/topic/24173-sticky-footer/?hl=sticky+footer#entry141236

 

Another client who states they've done this using bottom:0 - http://www.pagelines.com/forum/topic/20139-anchor-fixed-width-footer-to-bottom/?hl=footer+bottom+page#entry124015

 

Check out RJmedia's response in this one, looks like he's got this to work using a neg margin on the bottom - http://www.pagelines.com/forum/topic/14636-css-sticky-footer/?hl=footer+bottom+page

Share this post


Link to post
Share on other sites

Posted · Report post

Hi, He has the same issue as me, where it only works if it has a substantial height, so doesnt really work fully.

 

I found this online: http://www.techibuzz.com/add-sticky-footer-widget-thesis-wordpress/ notice the hooks. Unfortunately though I need to place the hook after the footer closing tag. The pagelines_after_footer hook places your content before it. If it is possible to encompass both the morefoot area and the footer area with a wrapper container this method should work. But how can I hook into an area below the footer? Is there a way to write your own hooks for a pagelines child theme?

Share this post


Link to post
Share on other sites

Posted · Report post

According to actionmap wp footer ends after the pagelines after footer hook. http://screencast.com/t/T8rWvtxa9a

 

Php isn't my strong point there so I wouldn't be able to advise if you'd be able to create and register your own hookable areas inside the child theme, that type of customization is outside of our support spectrum unfortunately. I also don't think it will be possible for you to add a div containing both the morefooter and footer without making some larger edits to the core files.

 

If you're looking to do that you're probably best looking into hiring one of the Pagelines Pros (www.pagelines.com/pros/) to achieve that level of customization.

Share this post


Link to post
Share on other sites