0

I am trying to do this: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page But I can not do it by myself so I am asking for your help.

I am using a template with this code (Footer part only):

index.php:

<div class="rt-footer-surround">
    <div class="rt-container">
      <div class="rt-footer-inner">
        <?php /** Begin Footer **/ if ($gantry->countModules('footer')) : ?>
        <div id="rt-footer">
          <?php echo $gantry->displayModules('footer','standard','standard'); ?>
          <div class="clear"></div>
        </div>
        <?php /** End Footer **/ endif; ?>
        <?php /** Begin Copyright **/ if ($gantry->countModules('copyright')) : ?>
        <div id="rt-copyright">
          <?php echo $gantry->displayModules('copyright','standard','standard'); ?>
          <div class="clear"></div>
        </div>
        <?php /** End Copyright **/ endif; ?>
      </div>
    </div>
</div>

css/template.css:

/* Footer */
.backgroundlevel-high .rt-footer-surround {padding-top: 135px;}
.rt-footer-inner {border-radius: 5px 5px 0 0;position: relative;z-index: 0;margin: 0 10px;}
.rt-footer-inner:after {content: "";position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: -1;border-radius: 5px;}
.rt-footer-inner .rt-alpha {margin-left: 0;}
.rt-footer-inner .rt-omega {margin-right: 0;}
.backgroundlevel-high #rt-bottom {margin-bottom: -50px;}
#rt-bottom {margin-bottom: 15px;}
#rt-footer, #rt-copyright {margin: 0 -2px;}
#rt-copyright {position: relative;}
#rt-copyright .rt-grid-1, #rt-copyright .rt-grid-2, #rt-copyright .rt-grid-3, #rt copyright .rt-grid-4, #rt-copyright .rt-grid-5, #rt-copyright .rt-grid-6, #rt-copyright
.rt-grid-7, #rt-copyright .rt-grid-8, #rt-copyright .rt-grid-9, #rt-copyright .rt-grid 10,   #rt-copyright .rt-grid-11, #rt-copyright .rt-grid-12 {position: static;}

css/community-a.css:

/* Footer */
.rt-footer-inner {background-color: #1CA8D2;box-shadow: inset 1px 0 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2), 0 0 6px rgba(0,0,0,0.4);color: #fff;text-shadow: 1px -1px 1px rgba(0,0,0,0.5);}
.rt-footer-inner .module-surround, .rt-footer-inner .title {color: #fff;text-shadow: 1px -1px 1px rgba(0,0,0,0.5);}
.rt-footer-inner a {color: #BCFEFF;text-shadow: -1px -1px 1px rgba(0,0,0,0.3);}
.rt-footer-inner a:hover {color: #fff;}

The "community-a.css" is the stylesheet in the template I use.

I would be glad if someone could help me to sort this out.

FreDe
  • 1
  • 1
  • 2

1 Answers1

0

with the info you provided here is my two cents:

Following the tutorial you should apply the following CSS rules to the container element (should be rt-footer-surround):

.rt-footer-surround {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
}

that should pretty much do the trick, offcourse you should check if there is some other CSS rules that try to override the modifications you are doing, firebug or other developer tools are great for that kind of stuff.

EDIT: something like this http://jsfiddle.net/4PRmk/1/

speyburn
  • 63
  • 1
  • 5
  • By adding this to the "backgroundlevel-high .rt-footer-surround" I moved it to the buttom of the page. I will now try to format it so it looks right, but i might think it made the trick :) – FreDe Jul 02 '13 at 13:19
  • Okay, now it stays in the buttom, but then i get a new problem.. When I have a page with a lot of content, I am not able to scroll, but instead the content hides behind the fotter. – FreDe Jul 02 '13 at 14:14
  • When i got the position set as "relative" it works on a page with lot of content but when it is set to "absolute" it works on a page with a small amount of content and on the large it overlap. Here is the .css code: http://jsfiddle.net/z6D3J/2/ – FreDe Jul 02 '13 at 14:22
  • 1
    must must put padding equal to the footer size to the element where your content is in. So if your footer is 60px high then you put a bottom-padding of 60px to your container :) – speyburn Jul 03 '13 at 05:32