Jump to content

Archived

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

andylemay

How to fix the footer to the bottom of the page

Recommended Posts

andylemay    0
andylemay

Hi DMS team,

 

A couple of tweaks I'm trying to do!

 

- I'm trying to fix the footer to the bottom of the page.

- remove white space line at the bottom of the page.

 

I've tried using the position: tag but this breaks the full width style

 

Any ideas on the CSS to do this?

 

Many thanks

 

Andy

Share this post


Link to post
Share on other sites
James B    436
James B
Hi there, for the footer try
 
#footer {
    bottom: 0;
    position: fixed;
    width: 100%;
}

 

Can we have a link to the site to see where the white line is coming from.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
andylemay    0
andylemay

Hi James,

 

Thank you for that.  That fixes it but allows you to overwrite page contents with the the footer.

 

Site link is www.eshot.co.za/ewizz

 

I'm trying to create a similar effect to that used here http://www.teslamotors.com/

 

Thank you

 

Andy

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

If you're referring to the white space below your footer, this is actually caused by the smiley face Wordpress stats icon. Add the following and this will remove the gap.

 

#wpstats {
display: none;
}
 

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
andylemay    0
andylemay

Hi Danny,

 

Thank you for that.

 

Did you see what happens when you shrink the window from the bottom with your code.  The footer overwrites lays the page info.  check the tesla site and you'll see the footer stops at the bottom of the page info.

 

Any idea how to do that?

 

thank you

 

Andy

 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

As far as I can tell this is related to your custom CSS, we do not provide support for user created CSS. We do not provide extensive CSS support, I would recommend you sign up to a CSS specific forum for assistance.

 

What appears to be happening is that your background footer image has a height 222px and when you go responsive, the footers height expands beyond 222px so the image is repeated, you will probably want to either:

 

1. Increase your footer images height

2. Just use CSS to create a gradient background some like this: (remove your image first ofc)

 

#footer {
#gradient .vertical(#333, #555);
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
andylemay    0
andylemay

Hi Danny,

 

Thank you for the advice.  I'll do some more investigation. :-)

 

Andy

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem, let us know how you get on.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Cei    0
Cei

Hi Danny!

I've been trying to fix my footer all day but there's no way I can fix it the way I want it. I've tried several code but none is working. I would like something like what andylemay wants. I let you see my footer here: www.ahotelroomstory.com . You'll see it's stuck to the bottom but overrides content when pages are long. I want it stuck to the bottom but after the content.

I've tried this code too but it won't work neither:

    html, body {height: 100%;}
    
    #site {min-height: 100%;}
    
    #page {overflow:auto;
        padding-bottom: 275px;} /* must be same height as the footer */
    
    #footer {position: relative;
        margin-top: -275px; /* negative value of footer height */
        height: 275px;
        clear:both;}
    
    /*Opera Fix*/
    body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
    }

 
 
Many thanks

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

If you want a sticky footer, in my opinion the best way to achieve this is to use a hook and add your sticky footer code there. You will likely want to use a hook location that is outside of the #site div.

 

You can find more information on hooks here - http://docs.pagelines.com/advanced/hooks


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Houston Haynes
      By Houston Haynes+
      OK - folks - back with another nit... The "back to top" link works - BUT - it's only active (i.e. clickable with the associated action following) when the mouse-over hovers over the footer area of the page. I did a quick change of the z-depth (to -1) and nothing made a difference. Any thoughts on how to make the *entire* back-to-top icon hover-able/actionable? Thanks!
       

    • romanondrasek
      By romanondrasek
      hi all, I have some trouble using PL5 on my site. 
      I used plugins for event calendar (event on) and plugin (timetable responsive scheduler for WP) for schedule (classes) in the gym.
      The problem is, that post from this 2 plugins are shown without menu in header and footer. (I setup header and footer) in the page editor for all type of page. 
      When I create a lesson, it creates posts with slug (I have a slug "lekce" & event for events).
      I try to edit the post with PL editor, but editor is not opening on the post.

      Do you have some idea where should be some problem? Thanx so much.
      here are links for the sites :
      site with schedule :
      http://www.myfit.cz/rozvrh/
      site of one of the class (pilates)
      http://www.myfit.cz/lekce/pilates/
      site with calendar :
      http://www.myfit.cz/kalendar/
      7 side with one event from the calendar :
      http://www.myfit.cz/event/pilates-instruktor-akreditovana-licence/?ri=1
      when I have my site on DMS2 it was working :-(
       
       
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I have been unsuccessfully trying to get my 3-column widgetized footer aligned centered. The widget section itself is aligned left because the alignment appears to be controller the widget's content only. The container that contains the widget section is aligned centered. I have chosen a 3 column layout and I added 3 widgets, assuming they would be aligned centered.
      Any idea of what I may be doing wrong?
      The page is question is: http://www.michaelkummer.com
      Thanks
      Michael
    • carl
      By carl+
      How do I remove the leaf html5, css3 logos from the footer? Sorry if this have been covered a thousand times, but no clear cut solution available for my version of DMS2. Do I need to go pro to remove? Cheers!
    • lbhansen
      By lbhansen+
      Is there a front-end location where I can replace the PageLines logo with one of my choosing in the footer?
×