2013-07-02 7 views
0

Я пытаюсь сделать это: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page Но я не могу сделать это сам, поэтому я прошу вас о помощи.Joomla Template - нижний колонтитул внизу

Я использую шаблон с этим кодом (Footer часть только):

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

«community-a.css» - это таблица стилей в используемом шаблоне.

Я был бы рад, если бы кто-то помог мне разобраться в этом.

+0

Пожалуйста, создайте [jsFiddle] (http://www.jsfiddle.net) – screenmutt

+0

Я новичок в этом, но: http://jsfiddle.net/z6D3J/ – FreDe

+0

Я просто добавил остальную часть файла .css: http://jsfiddle.net/z6D3J/1/ – FreDe

ответ

0

с информацией предоставленной вами здесь мои два цента:

После урока вы должны применять следующие правила CSS для элемента контейнера (должен быть RT-колонтитула-объемного звучания):

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

это должно в значительной степени сделать трюк, и вы должны проверить, есть ли другие правила CSS, которые пытаются переопределить те модификации, которые вы делаете, firebug или другие инструменты разработчика отлично подходят для такого рода вещей.

EDIT: что-то вроде этого http://jsfiddle.net/4PRmk/1/

+0

Добавив это в «background-level-high .rt-footer-surround», я переместил его в конец страницы , Теперь я попытаюсь отформатировать его, чтобы он выглядел правильно, но я мог бы подумать, что он сделал трюк :) – FreDe

+0

Хорошо, теперь он остается в buttom, но затем я получаю новую проблему. Когда у меня есть страница с много контента, я не могу прокручивать, но вместо этого содержимое скрывается за фоттером. – FreDe

+0

Когда я установил позицию как «относительную», она работает на странице с большим количеством контента, но когда она настроена на «абсолютную», она работает на странице с небольшим количеством контента и на большом ее перекрытии. Вот код .css: http://jsfiddle.net/z6D3J/2/ – FreDe

Смежные вопросы