statische Seite mit durchgehender Header und Footergrafik, wie?

Druckbare Version

20.04.2011, 10:48
Kayzu

Liste der Anhänge anzeigen (Anzahl: 1)

statische Seite mit durchgehender Header und Footergrafik, wie?

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.
20.04.2011, 10:55
psren

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.
20.04.2011, 10:59
Kayzu

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.
20.04.2011, 11:29
magicsepp

in der fe_page.tpl läßt sich der fotter auch aus dem #wrapper nehmen
20.04.2011, 12:14
Kayzu

Danke, habe ich auch schon überlegt.
Habe ich auch schon für andere Projekte umgesetzt zwecks "Sticky Footer".
20.04.2011, 13:05
psren

Allerdings musst du dann eben das Template ändern... und wo es doch auch nur per CSS geht :D
20.04.2011, 13:35
Kayzu

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.
12.01.2015, 15:45
macintoshi

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ß.
02.10.2016, 13:46
walkabout77

Habe gerade das gleiche Problem.. gibts da keine Antwort oder Lösung??? :rolleyes:
02.10.2016, 14:35
tab

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>
10.10.2016, 12:36
walkabout77

Liste der Anhänge anzeigen (Anzahl: 1)

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.

Anhang 18344

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??
10.10.2016, 13:44
tab

Ä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.
10.10.2016, 13:56
Andreas

Einen eigenen Layoutbereich benötigst du dafür nicht.
10.10.2016, 14:04
tab

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> :).
10.10.2016, 15:21
walkabout77

Zitat:

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:

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 :D

Zitat:

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
10.10.2016, 16:11
Andreas

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
10.10.2016, 21:58
walkabout77

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
11.10.2016, 10:55
lucina

Schau nach: http://caniuse.com/#feat=viewport-units
11.10.2016, 17:19
Andreas

Zitat:

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.
13.10.2016, 14:07
walkabout77

Zitat:

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:

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...

Zitat:

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...
13.10.2016, 14:14
lucina

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

Gesendet von iPad mit Tapatalk
13.10.2016, 14:20
Andreas

Zitat:

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.
13.10.2016, 16:07
walkabout77

Liste der Anhänge anzeigen (Anzahl: 2)

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 :(

Anhang 18352

Anhang 18353
13.10.2016, 16:22
Andreas

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

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

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! :D
19.02.2019, 22:40
walkabout77

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
20.02.2019, 21:59
Andreas

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.
20.02.2019, 22:04
Andreas

Sticky Footer per Flexbox, sehr einfach.

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.

Alle Zeitangaben in WEZ +1. Es ist jetzt 15:18 Uhr.