Sticky Footer unter Wrapper

[jeykon]

Nachdem ich mir jetzt quasi den ganzen Sonntag um die Ohren geschlagen habe um einen sticky footer (sollte 100% Seitenbreite haben) unter den wrapper zu hängen, versuch ich das ganze jetzt mal wiederzugeben falls es andere Interessenten gibt.

1.Schritt: Template editieren - Footer unter das Wrapper <div>

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

<div id="container">
<?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; ?>

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

</div>

</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; ?>
<div id="clear"></div> //hier war ich nicht sicher ob das clear über oder unter den footer teil kommt

2.Schritt: CSS anpassen:

html,
body
{
    margin: 0;
    padding: 0;
    height: 100%;
}

body
{
    height:100%;
    min-height:100%;
}

header
{
    width:960px;
    height:150px;
}

#container
{
    height:100%;
    min-height:100%;
    margin-top:10px;
    margin-bottom:10px;
    padding-bottom:100px;
}

#wrapper
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

#main
{
    
}

#footer
{
    width:100%;
    height:100px;
    background-color:rgba(142,202,31,0.33);
    position: relative;
    margin-top: -100px; /* Negativer Wert der Footer-Höhe */
    height: 100px;
    clear:both;
}

So hat das ganze jetzt bei mir funktioniert, Korrekturen und Anregungen erwünscht.

have fun

EDIT: kleiner Nachtrag, meistens soll ja dann im Footer trotzdem zentriert und auf Wrapper-Breite weiter gearbeitet werden, hierfür einfach das gewünschte Inhaltselement mit

width: 960px;
margin-right: auto; /* Abstand rechts */
margin-left: auto; /* Abstand links */

wieder in die gewünschte Position bringen.

[Marchie]

Hallo Jeykon,

das ist genau das was ich brauche. Hab das nun auch umgesetzt und funktioniert hervorragend!! Danke dir!!

Liebe Grüße Marchie

[MiTsch]

Hallo Marchie,

Daher erst mal die Frage wie komm ich denn an diese Script ran?? Per FTP zwar, das soll man ja nicht, oder??

Einfach per Copy and Paste! Für das Template nutzt Du einfach ein guter Editor z.B. Notepad++ und für das CSS installierst Du dir die Erweiterung CSSEditor.

Viele Grüße
MiTsch

[Marchie]

Upps, da ham sich unsere Post wohl überschnitten.

Ich hab nun ein neues Template aus ce_page.html5 erstellt und im Projektordner abgelegt und dann kann ich diese *.tpl auch bearbeiten. Ich hatte nämlich schon nach den Editor für den Code gesucht.... hier siehst du meinen "sticky footer" :-)

Lg, Marchie

[Zappa]

Danke für deine präzisen Angaben, das hat mir viel Zeit und Mühe gespart! Ich finde es super, dass du das hier teilst!!!

Herzliche Grüße!

[Schnippel]

Hi Leute,

Frage zu Sticky Footer

verstehe ich das richtig, daß der gesamte FOOTER-Bereich im "fe_page.xhtml" unter das
abschließende </div> vom Wrapper verschoben werden muß?



Mein Ziel:

- Footer-Hintergrund soll über gesamte Breite des Broweser gehen

- Footer soll mit unterem Browserfenster abschließen, auch wenn
der Inhalt im Container nicht so lang ist. Jetzt schwebt er irgendwo in der Luft.

[folkfreund]

Hallo,

da kann ich euch meine Erweiterung 'semidynamic' ans Herz legen - die kann auch 'sticky footer', und das sogar ohne Änderung der fe_page und damit update-sicher!

Gruß, folkfreund

[Schnippel]

Ich habe diese Erweiterung 'semidynamic' installiert, aber trotzdem bleibt der FOOTER nicht am unteren Rand des Browserfensters, wenn der Inhalt entsprechend kurz ist. Woran kann das liegen?

[tblumrich]

1. Ganz blöde Frage... den entsprechenden Haken im Seitenlayout hast du gesetzt?
2. Zeig mal.

[folkfreund]

Hi Schnippel,

Mein Ziel:

- Footer-Hintergrund soll über gesamte Breite des Broweser gehen

siehe dazu auch
https://www.contao-community.de/show...l=1#post207051

Gruß, folkfreund

[Schnippel]

Häckchen ist drin bei " Footer am unteren Rand "

und so schauts aus:

k1.jpg



k2.jpg



Hier das CSS dazu:


/*=== Gestaltung des Fußbereiches ===*/
#footer {
position:relative;
height:89px;
}
#ips {
position:relative;
height:12px;
text-align:center;
font-size:9px;
margin-top:0px;
margin-bottom:7px;

}
#ips a {
color:#575759;
font-size:9px;
}
#ips a:hover {
color:#eb6b22;
}

#last {
height:89px;
}


#last_links {
background-image:url(layout_elemente/fussboden-jena.jpg);
background-repeat:repeat-x;
width:55%;
height:70px;
float:left;
}
#last_rechts {
background-image:url(layout_elemente/fussbodenaufbau-jena.jpg);
background-repeat:repeat-x;
float:right;
height:70px;
width:45%;

}
#last_rechts img {
margin-left:-2px;
}


und hier der HTML-Code

<div id="footer">
<div class="inside">

<div id="last">
      <div id="ips">© 2012 &nbsp; Kunath Raumkonzept Stadtroda  Jena Thüringen &nbsp; 
    &nbsp; • &nbsp; &nbsp; Webbetreuung, Webdesign &amp; Layout&nbsp; by &nbsp;<a href="http://www.internet-projekt-service.de" title="Partner für Layout, Webdesign, Film-Produktion von Video-Trailer und Marketing im Internet">www.internet-projekt-service.de</a> &nbsp; &nbsp; • &nbsp; &nbsp; <a href="http://www.kunath-raumkonzept.de/impressum.html" title="Raumgestaltung in Jena">Impressum   </a></div>
      <div id="last_links"></div>
    
   <div id="last_rechts"><img src="tl_files/layout_elemente/raumdesign.jpg" alt="raumdesign" title="Raumdesign in Thüringen, Jena, Erfurt, Weimar, Hermsdorf, Gera " /></div>
    
  </div> 
</div>
</div>
  
    </div>

[folkfreund]

Hi Schnippel,

nimm mal die Angaben zum #footer aus dem CSS raus - darum kümmert sich semidynamic. Du solltest nur den Inhalt formatieren.

Gruß, folkfreund

[pmmueller]

Angeregt durch eine Idee von Christian de la Haye habe ich im Contao-Forum einen Beitrag gepostet, wie man mit dem normalen Seitentemplate fe_page und ein paar pfiffigen CSS-Regeln einen Sticky Footer basteln kann:

https://www.contao-community.de/show...l=1#post209629

Dazu braucht man nicht wirklich eine Erweiterung ;-)

[Schnippel]

Antwort zu folkfreund und pmmueller:

Habe beide Varinaten ausprobiert und beide Varianten funktioneren.
Hinweis zur Erweiterung semidynamic: die Höhe des Footer muß im BA / Seitenlayout beim eingestellt werden.
Ich hatte die Höhe im CSS, da funktionierte das nicht.

ABER

Bei beiden Varianten hab ich das Problem, daß bei einer leeren Seite der Footer nur dann zu sehen ist, wenn man scrollt:

k3.jpg


wenn gescrollt, dann erst kommt Footer zum vorschein:

k4.jpg


Bei genügend Inhalt der gescrollt werden muß ist das ja okay.
Aber ich möchte die Startseite so layouten, daß Header und Footer zu sehen sind, ohne daß man scrollen muß.
Wie läßt sich das realisieren?
Ein "min-heigt" wurde nicht vergeben.
Ich habe es auch mit
#footer { margin-top:-89px; } probiert, funktioniert auch nicht.

Gibt es dazu eine Lösung?

[folkfreund]

@Schnippel:
mit Verlaub: wenn es sich mit beiden Methoden gleich verhält, dann hast du vermutlich noch irgend etwas in deinem eigenen CSS, dass da kollidiert. Da sollte eigentlich nichts zu Größen oder Positionierung von #header, #wrapper, #footer drin stehen. Hast du einen Link zu deiner Seite, damit ich mal schauen kann?

@pmmueller:
danke für die Anleitung!
'semidynamic' macht bzgl. sticky footer im Prinzip genau das. Es verwendet eben nur die Eingaben aus dem Layout (z.B. Höhe des #footer) und erzeugt das entsprechende CSS automatisch.

Gruß, folkfreund

[tblumrich]

...und um dem ganzen die Krone aufzusetzen...
Es gibt schon einige Zeit lang einen Beitrag im Wiki:
http://de.contaowiki.org/Footer_am_u..._positionieren

Das funktioniert auch.

Gruß
Thomas