MetaModels Workshop in Berlin
Ergebnis 1 bis 28 von 28

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

  1. #1
    Contao-Nutzer Avatar von Kayzu
    Registriert seit
    26.11.2009.
    Beiträge
    145

    Standard 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.
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Contao-Urgestein
    Registriert seit
    07.04.2010.
    Ort
    Stuttgart
    Beiträge
    2.733
    User beschenken
    Wunschliste

    Standard

    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.

  3. #3
    Contao-Nutzer Avatar von Kayzu
    Registriert seit
    26.11.2009.
    Beiträge
    145

    Standard

    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.

  4. #4
    Contao-Urgestein
    Registriert seit
    30.01.2011.
    Ort
    Stuttgart
    Beiträge
    4.024

    Standard

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

  5. #5
    Contao-Nutzer Avatar von Kayzu
    Registriert seit
    26.11.2009.
    Beiträge
    145

    Standard

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

  6. #6
    Contao-Urgestein
    Registriert seit
    07.04.2010.
    Ort
    Stuttgart
    Beiträge
    2.733
    User beschenken
    Wunschliste

    Standard

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

  7. #7
    Contao-Nutzer Avatar von Kayzu
    Registriert seit
    26.11.2009.
    Beiträge
    145

    Standard

    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.

  8. #8
    Contao-Nutzer
    Registriert seit
    24.10.2012.
    Beiträge
    5

    Standard

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

  9. #9
    Contao-Nutzer
    Registriert seit
    30.05.2010.
    Ort
    Schweiz
    Beiträge
    233

    Standard

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

  10. #10
    Contao-Urgestein
    Registriert seit
    22.10.2013.
    Beiträge
    7.887
    User beschenken
    Wunschliste

    Standard

    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>
    Geändert von tab (02.10.2016 um 14:38 Uhr)

  11. #11
    Contao-Nutzer
    Registriert seit
    30.05.2010.
    Ort
    Schweiz
    Beiträge
    233

    Standard

    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??
    Geändert von walkabout77 (10.10.2016 um 12:52 Uhr)

  12. #12
    Contao-Urgestein
    Registriert seit
    22.10.2013.
    Beiträge
    7.887
    User beschenken
    Wunschliste

    Standard

    Ä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.
    Geändert von tab (10.10.2016 um 14:06 Uhr)

  13. #13
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.613
    User beschenken
    Wunschliste

    Standard

    Einen eigenen Layoutbereich benötigst du dafür nicht.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  14. #14
    Contao-Urgestein
    Registriert seit
    22.10.2013.
    Beiträge
    7.887
    User beschenken
    Wunschliste

    Standard

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

  15. #15
    Contao-Nutzer
    Registriert seit
    30.05.2010.
    Ort
    Schweiz
    Beiträge
    233

    Standard

    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 Beitrag anzeigen
    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 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

  16. #16
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.613
    User beschenken
    Wunschliste

    Standard

    Z.B. so
    PHP-Code:
    /* CSS */
    body {
      
    min-height100vh;
      
    positionrelative;
    }
    #container {
      
    padding-bottom180px/* Footerhöhe plus kleiner Abstand */
    }
    #footer {
      
    bottom0;
      
    left0;
      
    positionabsolute;
      
    width100%;

    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
    Geändert von Andreas (20.02.2019 um 22:06 Uhr) Grund: Modernere Version siehe weiter unten
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  17. #17
    Contao-Nutzer
    Registriert seit
    30.05.2010.
    Ort
    Schweiz
    Beiträge
    233

    Standard

    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

  18. #18

  19. #19
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.613
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von walkabout77 Beitrag anzeigen
    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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  20. #20
    Contao-Nutzer
    Registriert seit
    30.05.2010.
    Ort
    Schweiz
    Beiträge
    233

    Standard

    Zitat Zitat von lucina Beitrag anzeigen
    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...

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

  21. #21
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    6.412
    Partner-ID
    152
    User beschenken
    Wunschliste

    Standard

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


    Gesendet von iPad mit Tapatalk

  22. #22
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.613
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von walkabout77 Beitrag anzeigen
    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.
    Geändert von Andreas (13.10.2016 um 14:23 Uhr)
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  23. #23
    Contao-Nutzer
    Registriert seit
    30.05.2010.
    Ort
    Schweiz
    Beiträge
    233

    Standard

    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

  24. #24
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.613
    User beschenken
    Wunschliste

    Standard

    Da müsstest du mal einen Link zur Seite zeigen, das ist bestimmt nur ne Kleinigkeit am CSS.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  25. #25
    Contao-Nutzer
    Registriert seit
    30.05.2010.
    Ort
    Schweiz
    Beiträge
    233

    Standard

    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!

  26. #26
    Contao-Nutzer
    Registriert seit
    30.05.2010.
    Ort
    Schweiz
    Beiträge
    233

    Standard

    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

  27. #27
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.613
    User beschenken
    Wunschliste

    Standard

    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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  28. #28
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.613
    User beschenken
    Wunschliste

    Daumen hoch Sticky Footer per Flexbox, sehr einfach.

    PHP-Code:
    #wrapper {
      
    displayflex;
      
    flex-flowcolumn;
      
    min-height100vh;
    }
    #container {
      
    flex-grow1;

    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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •