By cmcguinness on

Hi,

It feels like I'm banging my head against a brick wall.... I've been trying to get my footer to stick to the bottom of the damn page at www.brainplay.ie for over a week. I've tried numerous hacks, of which I've found the easiest two are 1. http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ & 2. http://www.cssstickyfooter.com/using-sticky-footer-code.html

The help I need - I currently have the second of these solutions in action (link to example above) but I can't get it to work. As a fix I know it does work as I've thrown together the example in notepad and it works fine, but when I throw it into Drupal.... nothing?

Could somebody please give me some direction, possible solutions and or advice..... THANKS!

⋅ Categories: Drupal 6.x

Comments

Jeff Burnz’s picture

Jeff Burnz commented

Duplicate of:

http://drupal.org/node/446114
http://drupal.org/node/447160

Also commented for help here - http://drupal.org/node/425644#comment-1532542

You've been a member for over a year, you should know by now that this is frowned upon :/

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
cmcguinness’s picture

cmcguinness commented

First of, I completely apologies for doing so. I really appreciate the ability of the hive mind and under no circumstance was I trying to abuse it. It's not my point to break the rules and or think I should be treated differently from other members rather that I am frustrated by my problem.

P.S. I wont post again, sorry!

mm167’s picture

mm167 commented

problem solved?

what do u want to show in your sticky footer?
if u can tell me the details, i may make a demo for u.

good day.

---------------------------------------------------------
toll free is good, but pay toll may go faster ...
we go the drupalway. how about u?
www.drupalway.com - pay toll to go faster

cmcguinness’s picture

cmcguinness commented

Hi,

I want a footer picture to stick to the bottom of the page, you can see what I'm working on at www.brainplay.ie and the sticky footer method I'm is found at http://www.cssstickyfooter.com/

I know the fix works as I've knocked up a basic demo using a plain HTML and CSS file on my local.

You'll see I have the 'footer' div outside the 'wrapper' div (the tutorial uses 'wrap' but I have 'wrapper') as it's meant to be and all the relevant CSS is at the bottom of http://brainplay.ie/themes/lightfantastic/style.css

Any advice on what is going wrong would be greatly appreciated,
Ciaran

mm167’s picture

mm167 commented

I have made a demo here

http://drupalway.com/node/16

if you like the demo, but me a beer.
(You may BUY me a beer in http://www.drupalway.com/node/3)

Good day.
---------------------------------------------------------
toll free is good, but pay toll may go faster ...
we go the drupalway. how about u?
www.drupalway.com - pay toll to go faster

cmcguinness’s picture

cmcguinness commented

Thanks for taking the time here... I'd be very happy to buy you two beers if you can help me fix this.

Thanks for the demo but this is not what I'm looking for, rather I need a fix to http://www.cssstickyfooter.com/ on my page www.brainplay.ie.

I would really appreciate your help. If I use the padding and margin used in this example I can't see the content at the end of my screen.

Basically I want the footer image to be touching the bottom of the screen even when I click www.brainplay.ie/h

Thanks

mndonx’s picture

mndonx commented

Ah. Perhaps what you are looking for is just a min-height on your main content area?

#main {
height: 400px; //or whatever your preferred minimum height is
min-height: 400px; // same as above
}

That will keep your footer from being so high up on pages without a lot of content.

cmcguinness’s picture

cmcguinness commented

Thanks for this. I does create a different effect however I really want the footer image to be stuck to the bottom of the screen as apposed to 400px (or any other real value) thus I think I need a 100% min height, but this doesn't work?

Any other advice?

mm167’s picture

mm167 commented

forget those 2 links in your 1st post....they dont work for IE case.

My solution is a sticky footer at the bottom. Not a div after the main content. So, your footer will overlay with the last part of your main content.

in order to see the last part of the content, set your footer image transparent (opacity: .8). And dont use a very hight footer image. It looks odd as in my demo.

...

any way. it is up to u if u want to go your way ...enjoy.

mndonx’s picture

mndonx commented

I think the issue you are running into trying to implement the stickyfooter is in mimicking the HTML -- if it isn't precise you might run into conflicting CSS.

There's is:

<div id="wrap">
    <div id="main" class="clearfix">
    </div>
</div>
<div id="footer">
</div>

Yours is:

<div id="container">
    <div id="wrapper">
        <div id="header">
        </div>
        <div id="ie7contenthack">
        </div>
    </div>
    <div id="footer"> 
    </div>
</div>

Is it possible to put your footer outside of your #container div? And then treat #container like #wrap (or your #wrapper)? Then treat #wrapper as #main? That would be closer to their structure.

Hope that helps.

cmcguinness’s picture

cmcguinness commented

MNDONX.... you are a legend!

Thank you for giving me your time, I tried something like this but I wasn't able to pull it off. With you help I have been able to get it.... thank you so much!

All the best,
Ciaran

mndonx’s picture

mndonx commented

Yay! Glad I could help!