statische Seite mit durchgehender Header und Footergrafik, wie?

**Kayzu** · 20.04.2011, 10:48

Hallo Leute,

erstelle gerade eine Seite für ein neues Fitnessstudio.
Bin im Moment beim Screendesign und mache mir aber natürlich auch Gedanken über die reibungslose Umsetzung.

Ich würde gerne eine statische Seite erstellen.
Mir ist klar, dass ich den oberen Teil locker über den Body als BG erreichen kann.

Wenn ich aber eine statische Seite habe, wie bekomme ich dann den unteren Teil des Footers grafisch als BG?

Der Footer selber ist ja nachher auch nur 960px breit, ich will aber den über die ganze Seite ziehen was ich ja oben über den Body BG erreiche.

Und leider kann ich im Body ja keine 2 unterschiedlichen BG´s einbauen.

Wie löst Ihr so ein Problem immer?

Vielen Dank für die Antworten.
Danke.

**psren** · 20.04.2011, 10:55

du könntest im Seitenlayout keine breite eintragen und dann
die breite

HTML-Code:

#header .inside, #container, #footer.inside {
  width: 960px;
  margin: auto;
}

vergeben. das hintergrundbild dann einfach in #header oder #footer einbauen.

**Kayzu** · 20.04.2011, 10:59

Die vorgehensweise mit den 960px breite setzen auf header, container und footer hatte ich auch schon in Erwägung gezocken, aber was mir fehlte war der #footer .inside und diesen vom #footer allgemein zu trennen.

Omg ich bin so blöd.

Danke Dir.

**magicsepp** · 20.04.2011, 11:29

in der fe_page.tpl läßt sich der fotter auch aus dem #wrapper nehmen

**Kayzu** · 20.04.2011, 12:14

Danke, habe ich auch schon überlegt.
Habe ich auch schon für andere Projekte umgesetzt zwecks "Sticky Footer".

**psren** · 20.04.2011, 13:05

Allerdings musst du dann eben das Template ändern... und wo es doch auch nur per CSS geht

**Kayzu** · 20.04.2011, 13:35

eben. Habe jetzt die obere BG Grafik in den Body gepackt und die untere einfach in den Footer.

#Header, #Container und "#Footer . inside" auf 960px begrenzt und das ganze schön mit margin: 0 auto formatiert.
Funktioniert tadellos.

Wie bei allem ist es meist so, dass man zu kompliziert denkt, auch wenn es dann wirklich mit geringem Aufwand geht.

Danke euch.

**macintoshi** · 12.01.2015, 15:45

Hallo,

stehe gerade vor dem gleichen Problem. Die obige Lösung funktioniert leider nur wenn man nicht das 12-Spalten Grid verwendet.

Da dieses ja im Hintergrund die 960px verwendet, ist mein Footer nicht durchgehend.

Wie kann man den Footer aus dem Grid herausnehmen ohne das 12-Spalten Grid zu deaktivieren zu müssen?

Für Hinweise bin ich dankbar.

Gruß.

**walkabout77** · 02.10.2016, 13:46

Habe gerade das gleiche Problem.. gibts da keine Antwort oder Lösung???

**tab** · 02.10.2016, 14:35

Da ich das Grid nicht nutze, habe ich auch keine praktischen Erfahrungen mit so einem Layout. Aus meiner Sicht dürfte das Einfachste sein, im fe_page-Template die Ausgabe von Header und Footer nach außerhalb des #wrapper zu verlegen und jeweils das .inside div darin auf 960px Breite zu setzen und zu zentrieren, falls die sonstigen Header-/Footerinhalte abgesehen vom Hintergrundbild auf 960px beschränkt bleiben sollen. Eventuell muss man die entsprechende Breite dieser inside-divs dann noch entsprechend zum #wrapper in den entsprechenden Breakpunkten (media queries...) anpassen.

Edit: In HTML 5 kann man übrigens auch sehr wohl mehrere Hintergrundbilder setzen für z.B. <body>

**walkabout77** · 10.10.2016, 12:36

Hallo zusammen,

also ich habe jetzt im Seitenlayout einen "eigenen Bereich" "sticky-footer" nach dem Umschliessenden Element eingefügt.

Das scheint zu funktionieren... CSS -> siehe Anhang.

sticky_footer.jpg

Mfg

Stefan

PS: Leider funktioniert bei mir "position: absolut" beim Footer nicht, wenn ich auf position fixed wechsle geht es. An was kann das liegen.. entstehen dadurch ev. Probleme??

**tab** · 10.10.2016, 13:44

Ägypten? Was genau funktioniert nicht und was willst du überhaupt erreichen. Von einem "sticky footer" war bisher in dem Thread eigentlich nicht die Rede und ich dachte eigentlich, du hättest das selbe Problem wie der Threadersteller.

Edit: Mit fixed bezieht sich die Position auf den Viewport, mit absolute in deinem Fall auf den Wrapper, weil du da position: relative; gesetzt hast. Und der Wrapper ist nun mal ohne sonstiges CSS nicht höher als sein Inhalt.

Edit2: Hmm, eigentlich sollte doch dein zusätzlicher Footer außerhalb des Wrappers liegen. Der Bezug geht also eher auf HTML, die Geschichte mit Inhalt ud Höhe gilt da aber trotzdem.

**Andreas** · 10.10.2016, 13:56

Einen eigenen Layoutbereich benötigst du dafür nicht.

**tab** · 10.10.2016, 14:04

Braucht man nicht, kann man aber machen, ich hätte den (Standard-)Footer im Template einfach aus dem Wrapper rausgeschoben. Dann wäre der Footer auch ein echter <footer>

.

**walkabout77** · 10.10.2016, 15:21

Zitat von Tab

Von einem "sticky footer" war bisher in dem Thread eigentlich nicht die Rede ...

Doch hier... (zudem erschint dieser Beitrag als erstes wenn ich nach "sticky footer" suche)

Zitat von Kayzu

Danke, habe ich auch schon überlegt.
Habe ich auch schon für andere Projekte umgesetzt zwecks "Sticky Footer".

Ich denke häufig wird ja beides in Kombination verwendet.. Sticky footer und volle Breite....

Meine Frage wäre eigentlich gewesen ob das so richtig ist, wie ich es gemacht habe. Ich mache nur gelegentlich Webseiten und wäre um einen Tip von einem Profi sehr froh

Zitat von Andreas

Einen eigenen Layoutbereich benötigst du dafür nicht.

Wenn ich die volle Breite will schon...oder nicht? Sollte doch eigentlich keinen Nachteil haben?

Ich dachte mir, das ist dann auch Updatesicher, wenn ich das Original Template nicht verändere.

PS: Ich verwende zusätzlich das 12 -Spalten Grid

**Andreas** · 10.10.2016, 16:11

Z.B. so

PHP-Code:


/* CSS */

body {

  min-height: 100vh;

  position: relative;

}

#container {

  padding-bottom: 180px; /* Footerhöhe plus kleiner Abstand */

}

#footer {

  bottom: 0;

  left: 0;

  position: absolute;

  width: 100%;

}

Der Footer wäre damit breiter als der Wrapper in welchem er sich befindet. Der Wrapper muss dabei auf position:static; stehen, also Browser Default Einstellung.

edit: Modernere Version siehe weiter unten https://community.contao.org/de/show...l=1#post496648

**walkabout77** · 10.10.2016, 21:58

Hallo Andreas,

vielen Dank für deinen Vorschlag....

"vh" habe ich bisher nicht gekannt. Funktioniert das auch mit älteren Browsern?

Mich würde aber auch interessieren, wieso man meine Version mit "fixed" nicht anwenden sollte?

Gruss

Stefan

***lucina*** · 11.10.2016, 10:55

Schau nach: http://caniuse.com/#feat=viewport-units

**Andreas** · 11.10.2016, 17:19

Zitat von walkabout77

Mich würde aber auch interessieren, wieso man meine Version mit "fixed" nicht anwenden sollte?

Ich kann nicht sehen, dass hier jemand davon abgeraten hat. Fixed ist halt eine andere Option. Mit fixed hast du einen real sticky footer, also der Footer wäre dann unten immer sichtbar, auch wenn du scrollst. Mit absolute, hast du den Footer mindestens unten, also dann, wenn der Inhalt der Seite nicht ausreicht um den Footer nach unten zu drücken. Du siehst ihn aber nicht, wenn du eine lange Seite ist. Der Footer scrollt also mit.

Eine Lösung mit display:flex; ist gut, weil der Footer dann in der Höhe variieren kann.

**walkabout77** · 13.10.2016, 14:07

Zitat von lucina

Schau nach: http://caniuse.com/#feat=viewport-units

Vielen Dank, ich möchte aber lieber eine Version die weiter zurück kompatibel ist... Ich werde es wohl mit dem Footer ausserhalb des Wrappers versuchen.

Diese Anleitung funktioniert leider nur wenn der Footer innerhalb des Wrappers ist:

http://de.contaowiki.org/Footer_am_u..._positionieren

Zitat von Andreas

Ich kann nicht sehen, dass hier jemand davon abgeraten hat.

Nein, aber niemand hat meine Fragen diesbezüglich beantwortet.. Stattdessen wurden andere Vorschläge gemacht... deshalb habe ich das angenommen...

Mit absolute, hast du den Footer mindestens unten, also dann, wenn der Inhalt der Seite nicht ausreicht um den Footer nach unten zu drücken. Du siehst ihn aber nicht, wenn du eine lange Seite ist. Der Footer scrollt also mit.

Diese Version wäre mir am liebsten... leider habe ich immer noch keine Lösung gefunden mit dem "Footer ausserhalb des Wrappers + volle Breite". Sollte mich wohl wieder mal in CSS einarbeiten, habe aber leider nicht viel Zeit dazu im Moment...

***lucina*** · 13.10.2016, 14:14

Nur der Vollständigkeit halber: für ältere Browser gibt es ein Polyfill unter https://github.com/saabi/vminpoly

Gesendet von iPad mit Tapatalk

**Andreas** · 13.10.2016, 14:20

Zitat von walkabout77

Diese Anleitung funktioniert leider nur wenn der Footer innerhalb des Wrappers ist:

http://de.contaowiki.org/Footer_am_u..._positionieren

Dann benutze diese Anleitung und lass den Footer im Wrapper. wenn du ihn über die ganze Viewportbreite brauchst, dann entferne das position:relative beim Wrapper und gebe es dem Body. Dann noch left:0 für den Footer.

Zu vh: Das Schlimmste was passieren könnte, wenn ein Browser vh nicht kennt wäre doch, dass der Footer dann nicht sticky ist. Damit müsste man eigentlich leben können denke ich.

**walkabout77** · 13.10.2016, 16:07

Hallo Andreas,

vielen Dank für deine Hilfe...

Nur leider klappt es immer noch nicht so ganz. Wenn ich nun langen Inhalt habe und scrollen muss, scrollt der Footer mit nach oben

sticky_footer.jpg

seite.jpg

**Andreas** · 13.10.2016, 16:22

Da müsstest du mal einen Link zur Seite zeigen, das ist bestimmt nur ne Kleinigkeit am CSS.

**walkabout77** · 13.10.2016, 22:10

So hier noch die Lösung für mein Problem ("Sticky Footer" mit voller Breite (Footer innerhalb von Wrapper))

Code:

html,
body {
    margin:0;
    padding:0;
}

html {
    height:100%;
}

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

#wrapper {
    min-height:100%;
}

#header {
    height:120px;
}

Höhe Footer + 20px
#container {
    padding-bottom:100px;
}


#footer {
    width:100%;
    height:80px;
    bottom:0;
    left:0;
    position:absolute;
    background-color:#fff;
}

Scheint mit folgenden aktuellen Browsern gut zu funktionieren:

Firefox, Chrome, Safari, Edge, Opera, Internet Explorer 11 und Samsung Handy Browser

Vielen Dank Andreas für deine Hilfe!

**walkabout77** · 19.02.2019, 22:40

Hallo zusammen,

ich möchte wieder mal eine Seite erstellen mit einem Sticky Footer. Diesmal aber noch mit einem durchgehenden Header. Nun habe ich das Beispiel von meinem letzten Beitrag übernommen.

Ich habe nun ein bisschen rumprobiert. Da ich aber eher selten Webseiten mache, wäre ich froh wenn da noch jemand drüber schauen kann.

Ist das richtig wenn ich noch folgende Definitionen zum obigen CSS hinzufüge? Oder könnte das ev. Probleme geben?

#header {
width:100%;
height:120px;
bottom:0;
left:0;
position:absolute;
}

#container {
top:120px;
position:relative;
}

Gruss Stefan

**Andreas** · 20.02.2019, 21:59

Du müsstest die Seite zeigen. position:absolute ist nicht so prickelnd für nen Header. Ich zeige gleich mal ein moderneres CSS für sticky footer.

Wenn der Header breiter sein soll als die Mitte und der Footer, dann darfst du die Maxbreite nicht auf den #wrapper geben, sondern auf den #container und #footer. #header ist dann automatisch 100% breit.

**Andreas** · 20.02.2019, 22:04

PHP-Code:


#wrapper {

  display: flex;

  flex-flow: column;

  min-height: 100vh;

}

#container {

  flex-grow: 1;

}

Höhen für #header und #footer brauchen dabei nicht angegeben zu werden. Einfach nicht angeben und die Höhe ergibt sich aus dem Inhalt.

Thema: statische Seite mit durchgehender Header und Footergrafik, wie?

Themen-Optionen

Thema durchsuchen

statische Seite mit durchgehender Header und Footergrafik, wie?

Sticky Footer per Flexbox, sehr einfach.

Aktive Benutzer

Aktive Benutzer

Lesezeichen

Lesezeichen

Berechtigungen

Contao

Empfohlene Webdesign-Bücher