Druckbare Version
Hallo zusammen,
ich möchte gerne einen Sticky Footer in Contao 2.10.0 anwenden.
Scheitere allerdings an der Änderung in der fe_page.xhtml-Datei. Contao scheint die Änderung des Templates nicht zu übernehmen, egal was ich dort eintrage.
Habe die fe_page.xhtml direkt in Contao bearbeitet und auch über FTP. Beides mal keine Wirkung!
Wo könnte der Fehler liegen? Hab schon im Forum geforscht aber nichts passendes gefunden.
Danke für eure Hilfe!
Andrea
Hast du denn in Themes - Seitenlayout als DOCTYPE auch XHTML Strict oder Transitional gewählt?
Gibt's einen Link?
Oh klasse - daran lag es! Diese Option habe ich noch gar nie beachetet...
Vielen Dank!
gibt es eigentlich noch eine andere möglichkeit einen sticky footer in contao 2.10.x umzusetzten oder muss man dafür zwingend das fe_page modifizieren?
Hi.
Meiner Meinung nach muss man dafür das Seitentemplate ändern. Einfach aus dem Grund, weil der Footer ausserhalb des Wrappers liegen muss... und der ist per se bei Contao IM Wrapper.
Gruß
Thomas
vielen Dank für die Info!Zitat:
Zitat von tblumrich
Mit den folgenden CSS-Angaben muss man die fe_page nicht modifizieren:Zitat:
Zitat von erik_m
1. Volle Höhe für den Wrapper sicherstellen
- html, body mit height:100%
- #wrapper mit min-height: 100%
2. Footer unten im Wrapper positionieren
- #wrapper bekommt position:relative
- footer wird absolut positioniert mit bottom:0
- footer bekommt eine definierte Breite (sonst shrink-to-fit wegen absoluter Positionierung)
3. Platz reservieren für Footer
- footer bekommt eine definierte Höhe
- #container bekommt ein unteres padding, das mindestens so hoch wie die height des Footer.
Im angehängten Screenshot kann man das konkrete CSS sehen: Anhang 8010
Die Methode steht habe ich übrigens nicht erfunden. Sie steht zum Beispiel als "Sticky Footer" auch in dem Buch "Fortgeschrittenes CSS" von Ingo Chao und Corina Rudel. Und danke an Christian de la Haye für die Anregung zu diesem Gedankenspiel.
Falls irgendwas nicht funktionieren sollte, oder es irgendwo Bugs gibt, hier einfach posten. Oder doch den Sticky Footer mit Template-Änderung nehmen (siehe CSS Sticky Footer).
@ pmmueller
Die Lösung ist echt super, da man alles über CSS regulieren kann.
Ich hab da aber noch ein Problem, daß bei einer leeren Seite der Footer nur dann zu sehen ist, wenn man scrollt:
Anhang 8524
wenn gescrollt, dann erst kommt Footer zum vorschein:
Anhang 8525
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 weiteres "min-heigt" wurde nicht vergeben. (außer die im empfohlenem CSS)
Ich habe es auch mit
#footer { margin-top:-89px; } probiert, funktioniert auch nicht.
Gibt es dazu eine Lösung?
Ohne Link ist das wie Kaffeesatz lesen, sach ich immer ;-)
@ Schnippel
... ich vermute mal das im Header ein margin-top verwendet wird.
Gruß
@ pmmueller:
Leider ist die Seite noch nicht öffentlich im Netz, sondern lokal auf dem PC.
Aber trotzdem Danke für die Hilfsbereitschaft.
@ tomsky
Danke, das margin-top im Header war das Problem.
Habe aus dem margin-top ein padding-top gemacht, und schon paßt alles wie gewünscht.
Habt alle vielen Dank für Eure Hilfe.
Ich hab das jetzt auch ausprobiert...Zitat:
Zitat von pmmueller
Ich seh wahrscheinlich den Wald vor Bäumen nicht. Ich bin der Meinung, dass ich es genau so gemacht habe. Und trotzdem funktioniert es nicht sauber. Es bleibt immer ein Abstand unterhalb des footers. Wo ist mein Denkfehler?
Hier könnt ihr meinen Versuch sehen:
http://kneipp-verein.kneippverein-obernkirchen.de/
Seite 3 ist in Ordnung. Aber die längeren Seiten sehen doch seltsam aus...
:( Ratlos,
Clemens
Ich habe momentan keine Zeit, aber du hast Contao 3.0 im Einsatz?
Kann eventuell sein, dass der Trick da nicht funktioniert, weil das CSS-Framework auf das Holy-Grail-Prinzip umgestellt wurde.
@ smirk9
Mach mal in Deinem #footer das position:absolut; weg und probiere mal, obs dann funktioniert...
Bei der Seite 3, wenn Du da nur wenig Inhalt hast, dann gib mal das hier ein:
#wrapper {
position:relative;
min-height: 100%;
height: auto !important;
height:100%;
}
Angaben ohne Gewähr, da selber nur Laie...
Doch, funktioniert hier, jedenfalls kann ich mich nicht erinnern da noch was dran geändert zu haben.Zitat:
Zitat von pmmueller
http://contaogrid.glen-langer.de
Herzlichen Dank für Eure Antworten!
Manchmal muss man einfach mal Pause machen....
Die Lösung war: Ich hatte beim #container das nicht das untere padding auf 60px gesetzt, sondern das untere margin. :rolleyes:
Jetzt sieht es genau richtig aus!
Danke an Peter Müller für die Anleitung (s.o),
funktioniert auch in Contao 3 einwandfrei
Gruß macello
Hi Leute,
ich habe in Contao 3 folgende 2 Probleme mit Sticky Footer.
So soll die Seite ausschauen im Footer. (links andre Farbe als rechts,
und Logo-Bild rechts aus der Mitte raus).
Anhang 10496
Im Modul Footer habe ich folgendes HTML angelagt:
Das CSS schaut so aus:HTML-Code:<div id="ips">© 2012 [nbsp] Kunath Raumkonzept ....... </div>
[COLOR="#FF0000"][B] <div id="last_links"></div>
<div id="last_rechts"><img src="files/images/raumdesign-jena.jpg" ></div>[/B][/COLOR]
Das Layout ist im BA Statisches Layout mit 100% Breite angelegt.Code:
html { height:100%; margin:0; padding:0; } /*sorgt dafür, das #footer unten platziert wird*/
body {
height:100%;
background-image:url("images/fussbodenleger-jena-weimar.jpg");
background-repeat:repeat-x;
margin:0;
padding:0;
position:relative;
color:#575759;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
overflow-y: scroll;
}
#wrapper {
position:relative;
min-height: 100%;
height: auto !important;
height:100%;
}
/*Padding-bottom entspricht der Höhe des #footer */
#container {
position:relative;
width:970px;
margin-left:auto;
margin-right:auto;
padding-bottom:89px;
}
/*=== Gestaltung des Fußbereiches ===*/
#footer {
width:100%; /*wg absoluter Positionierung ==> #container heigth padding-bottom*/
height:89px;
bottom:0px;
position:absolute;
}
#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_links {
background-image:url("images/fussboden-jena.jpg");
background-repeat:repeat-x;
width:55%;
height:70px;
float:left;
}
#last_rechts {
background-image:url("images/fussboden-bau-jena.jpg");
background-repeat:repeat-x;
float:right;
height:70px;
width:45%;
}
#last_rechts img {
margin-left:-2px;
}
Problem 1:
Wenn ich im BA Responsive Grid aktiviere, dann schaut der Footer so aus:
Anhang 10497
Problem 2:
Wenn ich das Browserfester verkleinere, dann
wird das Logo-Bild im Footer auch verändert,
was dann das Layout zerstört:
Anhang 10498
Wie lassen sich diese Probleme beheben?
Link?
Hab mal das Ganze vom localem PC hochgeladen
http://www.kunath-raumkonzept.de
Das Bild in <div id="last_rechts"> bekommt vom Contao-CSS-Framework max-width:100%. Wenn du das für diese Grafik mit dem Wert none deaktivierst, stimmt es in meinem Chrome auf den ersten Blick:
Sieht übrigens schick aus ;)Code:#last_rechts img {
margin-left: -2px;
max-width: none;
}
@ PeterMüller
vielen Dank für die schnelle Hilfe..
Es funktioniert mit der none-Anweisung.
Ich hab jetzt mal im BA "Responsive Grid" aktiviert.
Wie zu sehen ist, fehlen nun die rechten / linken Bereiche im
Footer (siehe Problem 1).
Anhang 10500
Wie hängt das zusammen, das bei aktiviertem Grid die Bereiche abgeschnitten sind?
Wie läßt sich dies bei aktiviertem Grid trotzdem realisieren?
So sollte es aussehen:
Anhang 10501
So auf den ersten Blick würde ich sagen, dass durch die Aktivierung des Responsive Grid #wrapper auf eine Breite von 960px gesetzt wird, und da sitzt deine absolut positionierte Fußzeile drin, weil der Wrapper position:relative hat (siehe Little Boxes - absolut und relative).
Mögliche Lösung:
Nimm dem Wrapper das position:relative weg (wenn er das nicht woanders für braucht) und gebe #footer zusätzlich noch ein left:0, damit er auch wirklich links anfängt.
Jetzt funktioniert es.
Leider hab ich noch ein weiteres Problem:
Die Inhalte wandern unterm Footer durch.
Anhang 10555
auch live zu sehen unter
http://www.kunath-raumkonzept.de
.
Wenn ich #wrapper {
position:relative; }
angebe, dann wandert der Inhalt nicht mehr unten durch, aber es ist wieder das
Problem, daß der Streifen im Footer rechts und links abgeschnitten ist (wie oben schon beschrieben wurde).
Anhang 10556
Ich kann das Problem nicht finden..
Ich habe mal ein bisschen nach oben gescrolled und finde die Antwort in einem meiner Beiträge:
Das wird also in der Kombination nicht passen, was du da vorhast.Zitat:
Zitat von pmmueller
Und aus dem selben Beitrag noch eine potenzielle Lösung:
Wenn du unbedingt einen Sticky Footer haben willst, wirst du das mit der Template-Änderung probieren müssen und den Footer aus dem Wrapper rausnehmen. Aber ich verstehe immer ehrlich gesagt nicht wirklich, warum alle Welt einen Sticky Footer haben will...Zitat:
Zitat von pmmueller
Vielleicht gehört das nicht ganz hierher: Ich habe mit den Anweisungen von pmmueller und bugbuster einen sticky footer unter C3 ohne Änderung fe_page realisiert. Ich setze responsive grid mit einer Breite von 960px ein und möchte sowohl den header als auch den footer über die gesamte Breite des Bildschirms haben. Realisiert habe ich das durch die Trennung von html und body im stylesheet:
Jetzt meine Frage: Gibt es eine andere Möglichkeit?Code:html{
background:url("../../files/img/footer.png") center bottom repeat-x
}
body{
background-image:url("../../files/img/body.PNG");background-repeat:repeat-x;
}
Gruß Georgi
Jetzt funktioniert es.Zitat:
Zitat von pmmueller
Hier meine Lösung für all jene, die das gleiche Problem haben:
Mein Problem war:
Anhang 10558
Lösung Schritt 1:
In Tamplates ein neues Tamplates „fe_page.html5“ anlegen.
Das neu angelegt Template öffnen und den individuellen HTML-Code eingeben.
Anhang 10557
Lösung Schritt 2:
Im Layoutbereich den Footer deaktivieren
Anhang 10559
Fertige Ergebnis :
Anhang 10560
Das CSS entspricht dem, wie es Peter Müller schon hier beschrieben hat.
Statt deinen Code reinzukopieren könntest du auch einfach den Quelltext für den vorhandenen Footer verschieben (<footer> bis </footer>).
Das hätte den Vorteil, dass du im Seitenlayout den Footer anlassen und alles über Frontend-Module regeln könntest. Besonders bei mehreren Seitenlayouts ist das besser.
So hier ?
Anhang 10565
Sieht auf dem Bild soweit gut aus. Ein paar Leerzeilen kannst du noch rausnehmen. Funktioniert es denn?
Nein, es funktioniert nicht, da der Inhalt wieder unter dem Footer durchgrabbelt...Zitat:
Funktioniert es denn?
Muß da noch was am CSS gemacht werden?
Hier nochmal der Link,
http://www.kunath-raumkonzept.de/
Vergleiche es doch mal mit dem HTML und CSS des oben verlinkten Beitrags:
http://www.cssstickyfooter.com/html-code.html
http://www.cssstickyfooter.com/style.css
Darin wird der Footer relativ positioniert.
Jetzt funktioniert es auch auf diesem Weg.Zitat:
Darin wird der Footer relativ positioniert.
Vielen Dank
Hallo,
habe das Problem, daß der Footer, der über die ganze Breite gehen soll,
bei kleineren Bildschirmen abgeschnitten wird.
Siehe Bild:
Anhang 10648
das Original schaut so aus:
Anhang 10649
Website
Hat jemand eine Idee, wie sich dieser Fehler beheben läßt?
Bei mir im Chrome unter OS X sieht alles okay, wenn ich das Browserfenster verkleinere.
Wie hast du denn den Screenshot mit dem zu kurzen Footer erstellt?
Browser?
OS?
Den Screenshot hab ich erstellt, indem ich das Browserfenster verkleinert hab.
Bei mir im Chrome ist das Problem zu sehen, wie auch im IE und FF, wenn ich mit dem horizontalen Scrollbalken nach rechts gehe.
Auf der Startseite mal rüberscrollen zu dem Bereich des Steuertipps, dann ist bei mir unten der rechte Bereich frei
nach dem Logo (Ambiente für Ihr Heim). Das Gleiche Verhalten ist auf dem iPhone eines Kumpels zu beobachten.
Dagegen ist auf meinem Handy der untere Bereich wieder ok.
Das im Browserfenster ist dann erwartetes Verhalten: Der Footer wird so breit wie das Browserfenster.
So ist der ideale Zustand:
Anhang 10659
und so sieht es bei verkleinertem Browserfenster aus.
Da fehlt der restliche Teil rechts, wenn man nach rechts scrollt
Anhang 10660
Zur Not muß man damit leben, aber gibt es da nicht eine Lösung dafür?
Kannst du normalerweise per css mit 'min-width' für den footer oder body lösen. Lege dort einfach fest, wie schmal die seite oder das element sein darf.
Gesendet von meinem HTC One mit Tapatalk 2
Hätte ich deine Antwort nur früher gefunden ... ;P dann wäre mir meine Odysee erspart geblieben. Hab' letztendlich in einem Fremdforum die Lösung entdeckt.Zitat:
Zitat von Big_Berny
https://community.contao.org/de/show...icht-angezeigt
Gruß,
Andreas