Contao 2.11 - StickyFooter - Veränderungen an der fe_page

Bisher habe ich meine StickyFooter immer anhand dieses Eintrags umgesetzt:
https://www.contao-community.de/grou...=51&do=discuss

Allerdings sieht die fe_page mittlerweile anders aus, als noch bei Contao 2.9. Das Tutorial kann man natürlich noch verwenden, allerdings muss der Abschnitt über die Anpassung der fe_page überarbeitet werden.

Man sollte den wrapper komplett durch diesen Code ersetzen:

Code:

---

<div id="wrapper">
        <?php if ($this->header): ?>
        <div id="header">
                <div class="inside"> <?php echo $this->header; ?> </div>
        </div>
        <?php endif; ?>
        <?php echo $this->getCustomSections('before'); ?>
        <div id="container" class="clearfix">
                <?php if ($this->left): ?>
                <div id="left">
                        <div class="inside"> <?php echo $this->left; ?> </div>
                </div>
                <?php endif; ?>
                <?php if ($this->right): ?>
                <div id="right">
                        <div class="inside"> <?php echo $this->right; ?> </div>
                </div>
                <?php endif; ?>
                <div id="main">
                        <div class="inside"> <?php echo $this->main; ?> </div>
                        <?php echo $this->getCustomSections('main'); ?>
                        <div id="clear"></div>
                </div>
                <?php echo $this->getCustomSections('after'); ?> </div>
</div>
<?php if ($this->footer): ?>
<div id="footer">
        <div class="inside"> <?php echo $this->footer; ?> </div>
</div>
<?php endif; ?>
<!-- indexer::stop -->
<img src="<?php echo $this->base; ?>cron.php" alt="" class="invisible" />
<!-- indexer::continue -->

---

Ich habe schon versucht es auf 2.11 umzumodellieren, es hat aber leider nicht funktioniert. Vielleicht schafft es einer von euch und könnte es dann für alle posten? :o

O.K. - gefunden: http://contaogrid.glen-langer.de/fe_pagehtml5.html

Aber welche CSS-Anweisungen muss man dem ganzen noch mitgeben, damit der Footer auch am unteren Seitenrand "kleben" bleibt?

Das funktioniert nicht:

Code:

---

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
 
/* LAYOUT */
 
#wrapper {
    min-height: 100%;
    position: relative;
}
 
#header {
    height: 175px;
    background: red;
}
 
#container {
    background: blue;
    padding-bottom: 335px; /* Höhe des Footers */
}
 
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 355px;
    background: green;
}

---

Funktioniert. Allerdings nur, wenn ich den bgStretcher deaktiviere...
Gibt es eine Lösung für 2.11, die auch mit der Erweiterung bgStretcher funktioniert?
Außerdem ist es mit dem CSS-Code von oben völlig egal, welche fe_page ich nehme. Egal ob diese: http://contaogrid.glen-langer.de/fe_pagehtml5.html oder die Standard fe_page...

So, wie es aussieht, hast du den CSS Code ja von hier:
http://de.contaowiki.org/Footer_am_u..._positionieren

Und da steht doch auch nichts von veränderter fe_page, oder? Warum also willst du diese überhaupt verändern?

Im diesem Thread wurde zuletzt auch nochmal einiges zu den StickyFooter Methoden gesagt.

Gruß
Thomas

Richtig, ich habe auch den Thread schon gelesen. Allerdings funktioniert die reine CSS-Version nicht mit dem bgStretcher -> Also würde ich lieber so vorgehen: http://contaogrid.glen-langer.de/fe_pagehtml5.html

Allerdings weiß ich dann nicht, was ich CCS mäßig noch erledigen muss, dass es funktioniert... Es gibt einige Threads dazu, aber keiner hilft mir so wirklich weiter. Es wäre super, wenn wir hier eine Methode komplett vorstellen, so dass es jeder einfach verwenden kann. Ich würde auch gerne ein kleines Tutorial schreiben...

Auf der Seite, wo die Beispieldateien für Contao mal lagen, gibts nicht mehr, wie es scheint... ich hatte diese aber noch hier rumliegen, vielleicht kannst du da was mit anfangen...

Gruß
Thomas

Das ist das, was ich im ersten Post geschrieben habe... Das ist eben für Version 2.9 -> Mein Problem sind aber genau die fe_pages ab 2.10 mit HTML5 -> Die fe_page ist bis 2.9 anders aufgebaut...

In deinem letzten Post hattest du doch nach passenden CSS Anweisungen für die Varianten mit bearbeiteter fe_page gefragt. In der ZIP ist doch eine entsprechende CSS drin. Für die ist doch völlig unerheblich ob xhtml oder html5 oder tpl Template.

Sicher musst du diese noch anpassen, aber prinzipiell dürften die Anweisungen stimmen - das ist ja keine Erfindung für Contao....
Letztendlich sorgt die Variante mit umgebauter fe_page doch nur dafür, das der Footer außerhalb des wrappers liegt. Das ist beim Template von Glen auch nicht anders.

Gruß
Thomas

Auch hier das Problem, dass es nicht mehr mit dem bgStretcher funktioniert. Das ging bis 2.9 wunderbar – jetzt leider nicht mehr.

meine fe_pageStickyFooter:

Code:

---

<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>">
<head>
<meta charset="<?php echo $this->charset; ?>">
<title><?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?></title>
<base href="<?php echo $this->base; ?>">
<meta name="robots" content="<?php echo $this->robots; ?>">
<meta name="description" content="<?php echo $this->description; ?>">
<meta name="keywords" content="<?php echo $this->keywords; ?>">
<?php echo $this->framework; ?>
<?php echo $this->stylesheets; ?>
<?php echo $this->mooScripts; ?>
<?php echo $this->head; ?>
<!--[if lt IE 9]><script src="<?php echo TL_PLUGINS_URL; ?>plugins/html5shim/html5-<?php echo HTML5SHIM; ?>.js"></script><![endif]-->
</head>
<body id="top" class="{{ua::class}}<?php if ($this->class): ?> <?php echo $this->class; ?><?php endif; ?>"<?php if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
<?php $this->showIE6warning(); ?>

<div id="wrapper">
<?php if ($this->header): ?>

<header id="header">
<div class="inside">
<?php echo $this->header; ?>
</div>
</header>
<?php endif; ?>
<?php echo $this->getCustomSections('before'); ?>

<div id="container" class="clearfix">
<?php if ($this->left): ?>

<aside id="left">
<div class="inside">
<?php echo $this->left; ?>
</div>
</aside>
<?php endif; ?>
<?php if ($this->right): ?>

<aside id="right">
<div class="inside">
<?php echo $this->right; ?>
</div>
</aside>
<?php endif; ?>

<section id="main">
<div class="inside">
<?php echo $this->main; ?>
</div>
<?php echo $this->getCustomSections('main'); ?>
<div id="clear"></div>
</section>

</div>
<?php echo $this->getCustomSections('after'); ?>
</div>
<?php if ($this->footer): ?>

<footer id="footer">
<div class="inside">
<?php echo $this->footer; ?>
</div>
</footer>
<?php endif; ?>
 
 
<?php echo $this->mootools; ?>
<?php if (!$this->disableCron): ?>

<script>
new Request({
  url:'system/html/cron.txt',
  onComplete: function(txt) {
    if (!txt) txt = 0;
    if (parseInt(txt) < (Date.now()/1000 - 300)) {
      new Request({url:'cron.php'}).get();
    }
  }
}).get();
</script>
<?php endif; ?>

</body>
</html>

---

CSS:

Code:

---

/* Version: 1.0.0 Sticky Footer Solution for Contao (TYPOlight) by Nils
Mueller (www.exsiteing.com) inspired by Steve Hatcher (http://stever.ca,
http://www.cssstickyfooter.com) */
*
{
    margin:0;
    padding:0;
}


/* must declare 0 margins on everything, also for main layout components
use padding, not vertical margins (top and bottom) to add spacing, else
those margins get added to total height and your footer gets pushed down
a bit more, creating vertical scroll bar */
html,
body,
#wrapper
{
    height:100%;
}

body > #wrapper
{
    height:auto;
    min-height:100%;
}

#container
{
    padding-bottom:120px;
}


/* must be same height as the footer */
#footer
{
    position:relative;
    clear:both;
    margin-top:-120px;
    /* negative value of footer height */ height: 120px;
}


/* CLEAR FIX */
.clearfix:after
{
    height:0;
    clear:both;
    display:block;
    content: ".";
    visibility: hidden;
}

.clearfix
{
    display:inline-block;
}


/* Hides from IE-mac \ */
* html .clearfix
{
    height:1%;
}

.clearfix
{
    display:block;
}

---

Vielleicht weiß ja jemand, wieso die bgStretcher Erweiterung nicht mehr funktioniert, sobald man diese CSS-Datei verwendet!?

Hi.

Kennst du diesen Thread?

Da steht irgendwo was von StickyFooter + bgStretcher.

Gruß
Thomas

erstmal zum Verständnis, welche der beiden hier genannten Varianten willst du erreichen?
https://www.contao-community.de/show...l=1#post178685

Du kannst nicht die reine CSS Variante mit der modifizierten fe_page von meiner Seite nehmen.
Den bgstretcher kenn ich nicht und weiß daher nicht wie der arbeitet, daher kann ich dazu keine Auskunft geben

Hallo BugBuster,

es soll genau so funktionieren: http://www.cssstickyfooter.com/de/
-> Also Variante a. Wie gehst du vor, wenn du das umsetzen willst?

1. Anpassung müsste in der fe_page sein. Man nimmt den Footer und packt ihn außerhalb des Wrappers.
2. CSS Anweisungen -> Wie sieht das bei dir aus?

Viele Grüße

Fast wie in diesem Beispiel, und die Klassen heißen einmal anders.
Auszug aus http://contaogrid.glen-langer.de/contao-grid-basic.html

Code:

---

/* Die Höhe des Footers, wird später
 * auch noch mal in #footer definiert */
#container {
padding-bottom: 50px;
}
/* Sticky Footer Hoehe als height und negativem margin-top */
#footer
{
height:50px;
position:relative;
margin-top:-50px;
}

---

O.K – jetzt hat es glaube ich "klick" gemacht.

Für 2.10 und xHtml guckst du hier: https://www.contao-community.de/show...891#post185891
... ich habe es mal angepasst.