Ergebnis 1 bis 14 von 14

Thema: Footer über gesammte breite am unteren Ende, unterhalb des wrapper (Sticky Footer)

  1. #1
    Contao-Nutzer
    Registriert seit
    10.06.2014.
    Beiträge
    46

    Standard Footer über gesammte breite am unteren Ende, unterhalb des wrapper (Sticky Footer)

    Hallo,

    ich baue momentan am basis Layout einer Seite, so das Layout hab ich so gestaltet damit im Footer einer art Sitemap erscheint... . Der Footer geht über die gesammte Breite und soll auch wenn der content nicht ausreicht um die Seite zu füllen immer am unteren Rand stehen. In der fe_pages.html5 hab ich den footer unterhalb des wrappers gesetzt , sprich...

    PHP-Code:
    <!DOCTYPE html>
    <html lang="<?php echo $this->language?>">
    <head>

      <?php $this->block('head'); ?>
        <meta charset="<?php echo $this->charset?>">
        <title><?php echo $this->title?></title>
        <base href="<?php echo $this->base?>">

        <?php $this->block('meta'); ?>
          <meta name="robots" content="<?php echo $this->robots?>">
          <meta name="description" content="<?php echo $this->description?>">
          <meta name="keywords" content="<?php echo $this->keywords?>">
          <meta name="generator" content="Contao Open Source CMS">
        <?php $this->endblock(); ?>

        <?php echo $this->viewport?>
        <?php echo $this->framework?>
        <?php echo $this->stylesheets?>
        <?php echo $this->mooScripts?>
        <?php echo $this->head?>

        <?php $this->block('html5shiv'); ?>
          <!--[if lt IE 9]><script src="<?php echo TL_ASSETS_URL?>assets/html5shiv/<?php echo $GLOBALS['TL_ASSETS']['HTML5SHIV']; ?>/html5shiv-printshiv.js"></script><![endif]-->
        <?php $this->endblock(); ?>
      <?php $this->endblock(); ?>

    </head>
    <body id="top" class="{{ua::class}}<?php if ($this->class) echo ' ' $this->class?>"<?php if ($this->onload): ?> onload="<?php echo $this->onload?>"<?php endif; ?>>

      <?php $this->block('body'); ?>
        <?php echo $this->sections('top'); ?>

        <div id="wrapper">

          <?php $this->block('header'); ?>
            <?php if ($this->header): ?>
              <header id="header">
                <div class="inside">
                  <?php echo $this->header?>
                </div>
              </header>
            <?php endif; ?>
          <?php $this->endblock(); ?>

          <?php echo $this->sections('before'); ?>

          <?php $this->block('container'); ?>
            <div id="container">

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

              <?php $this->block('left'); ?>
                <?php if ($this->left): ?>
                  <aside id="left">
                    <div class="inside">
                      <?php echo $this->left?>
                    </div>
                  </aside>
                <?php endif; ?>
              <?php $this->endblock(); ?>

              <?php $this->block('right'); ?>
                <?php if ($this->right): ?>
                  <aside id="right">
                    <div class="inside">
                      <?php echo $this->right?>
                    </div>
                  </aside>
                <?php endif; ?>
              <?php $this->endblock(); ?>

            </div>
         

        </div>
        
        
        
         <?php $this->endblock(); ?>

          <?php echo $this->sections('after'); ?>

          <?php $this->block('footer'); ?>
            <?php if ($this->footer): ?>
              <footer id="footer">
                <div class="inside">
                  <?php echo $this->footer?>
                </div>
              </footer>
            <?php endif; ?>
          <?php $this->endblock(); ?>
          
          

        <?php echo $this->sections('bottom'); ?>
      <?php $this->endblock(); ?>

      <?php echo $this->mootools?>

    </body>
    </html>

    in der CSS hängt es halt noch, ich schaffe es nicht den footer so zu beschreiben damit dieser eben immer unten ist...

  2. #2
    Contao-Fan Avatar von aadursun
    Registriert seit
    25.09.2011.
    Beiträge
    543

    Standard

    Guckst du mal hier
    http://www.cssstickyfooter.com/de/

    Grüße
    aadursun

  3. #3
    Contao-Nutzer
    Registriert seit
    10.06.2014.
    Beiträge
    46

    Standard

    hab ich schon, leider funktioniert das nicht wirklich.... sobald content drin ist und ich runter scroll bleibt der footer am unteren ende des Browser fensters hängen und wird mit nach oben gezogen.

  4. #4
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.513
    User beschenken
    Wunschliste

    Standard

    ne Alternative, auch dort im Einsatz http://contaogrid.glen-langer.de/con...ky-footer.html
    Rein CSS.
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  5. #5
    Contao-Fan Avatar von dackelchen
    Registriert seit
    24.05.2011.
    Ort
    Kiel
    Beiträge
    672
    User beschenken
    Wunschliste

    Standard

    Link zum Problem vorhanden?

    AlternatiV: Wie sieht Dein CSS an der Stelle aus?

    PS: Schau Dir Glens Lösung mal genauer an. Denk an das nächste Major-Update, alles, was nicht Core ist, ist eine potentielle Stelle, an der eventuell "händisch nachgearbeitet" werden muss. Das gilt auch für eine angepasste fe_page.
    Grüße Edgar
    Dackelalarm

  6. #6
    Contao-Nutzer
    Registriert seit
    10.06.2014.
    Beiträge
    46

    Standard

    hier hat der footer dann aber keine 100% breite über den gesammten Monitor?


    betreffs der fe_page, das problem mit dem core ist mir bewusst, gibt es eventuell bei contao die möglichkeit ein override zu erstellen, bei joomla z.b. funktioniert das, so bleiben die änderungen beim nächsten update erhalten...
    Geändert von traxel (30.07.2014 um 16:08 Uhr)

  7. #7
    Contao-Fan Avatar von dackelchen
    Registriert seit
    24.05.2011.
    Ort
    Kiel
    Beiträge
    672
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von traxel Beitrag anzeigen
    Der Footer geht über die gesammte Breite und soll auch wenn der content nicht ausreicht um die Seite zu füllen immer am unteren Rand stehen.
    heißt doch genau das.

    Ändern tust Du die Opptik das per CSS. siehe dazu auch die Frage danach in meinem letzten Post 8oder eben Link).

    Ediot: Wenn Du ein Template fe_page_namexy.html5 anlegst und dieses entsprechend zuweist, wird da nix beim nächsten Update überschriebem. Aber es kann eben sein, dass sich an der original fe_page beim Update was ändert... und dann past es eben nicht mehr.
    Geändert von dackelchen (30.07.2014 um 16:15 Uhr)
    Grüße Edgar
    Dackelalarm

  8. #8
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.119
    Partner-ID
    10107

    Standard

    Zitat Zitat von BugBuster Beitrag anzeigen
    ne Alternative, auch dort im Einsatz http://contaogrid.glen-langer.de/con...ky-footer.html
    Rein CSS.
    Zitat Zitat von dackelchen Beitrag anzeigen
    PS: Schau Dir Glens Lösung mal genauer an. Denk an das nächste Major-Update, alles, was nicht Core ist, ist eine potentielle Stelle, an der eventuell "händisch nachgearbeitet" werden muss. Das gilt auch für eine angepasste fe_page.
    Die Lösung wird er 1:1 nicht nehmen können, wenn der Footer auf die ganze Breite gehen soll und der #wrapper den Rest zentriert.



    Zitat Zitat von traxel Beitrag anzeigen
    Hallo,

    ich baue momentan am basis Layout einer Seite, so das Layout hab ich so gestaltet damit im Footer einer art Sitemap erscheint... . Der Footer geht über die gesammte Breite und soll auch wenn der content nicht ausreicht um die Seite zu füllen immer am unteren Rand stehen. In der fe_pages.html5 hab ich den footer unterhalb des wrappers gesetzt , sprich...

    PHP-Code:
    ... 

    in der CSS hängt es halt noch, ich schaffe es nicht den footer so zu beschreiben damit dieser eben immer unten ist...
    Mein Vorschlag: lass' den <footer> innerhalb des #wrapper (also lass' einfach die Original fe_page) und zentriere dir nur den <header> und den #container. Dann kannst du die zuletzt gepostete Anleitung verwenden.


    Ansonsten: hier meine Lösung mit <footer> außerhalb des #wrapper: http://jsfiddle.net/7LvX5/1/
    Relevant ist folgendes CSS:
    PHP-Code:
    body,html {
        
    height:100%;
    }

    #wrapper {
        
    min-height:100%;
    }

    #container {
        
    padding-bottom:100px/* footer height */
    }

    footer {
        
    height:100px;
        
    margin-top:-100px/* footer height */

    Geändert von Spooky (30.07.2014 um 16:25 Uhr)

  9. #9
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.758
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ich hab auch eine Lösung im Einsatz www.jsmed.de.
    Wurde ursprünglich in einer zweier Version aufgebaut und später auf 3.2 updedatet - schon deshalb mit angepasster fe-page.
    Vielleicht findest Du auch da noch eine Anregung.
    Ansonsten mal einen Link posten, dann kann man meist besser helfen.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  10. #10
    Contao-Nutzer Avatar von sandburg
    Registriert seit
    19.06.2009.
    Beiträge
    92

    Standard Template-Vererbung

    Zitat Zitat von traxel Beitrag anzeigen
    ...betreffs der fe_page, das problem mit dem core ist mir bewusst, gibt es eventuell bei contao die möglichkeit ein override zu erstellen, bei joomla z.b. funktioniert das, so bleiben die änderungen beim nächsten update erhalten...
    Hallo traxel,

    Template-Vererbung bietet die Möglichkeit, bestimmte Teilbereiche eines Templates zu überschreiben, anstatt das Template komplett zu ersetzen.

    Vorteile
    • Wiederkehrendes Markup kann zentral verwaltet werden
    • Templates wie z. B. "fe_page" müssen nicht mehr komplett ersetzt werden, wodurch der Wartungsaufwand beim Update sinkt
    Wie das funktioniert ... guckst Du hier -> https://contao.org/files/conference/2014/keynote/#23


    Viele Grüße
    - sandburg -


  11. #11
    Contao-Nutzer
    Registriert seit
    10.06.2014.
    Beiträge
    46

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Die Lösung wird er 1:1 nicht nehmen können, wenn der Footer auf die ganze Breite gehen soll und der #wrapper den Rest zentriert.

    Ansonsten: hier meine Lösung mit <footer> außerhalb des #wrapper: http://jsfiddle.net/7LvX5/1/
    Relevant ist folgendes CSS:
    PHP-Code:
    body,html {
        
    height:100%;
    }

    #wrapper {
        
    min-height:100%;
    }

    #container {
        
    padding-bottom:100px/* footer height */
    }

    footer {
        
    height:100px;
        
    margin-top:-100px/* footer height */


    CHECK

  12. #12
    Contao-Nutzer
    Registriert seit
    19.12.2011.
    Beiträge
    49

    Standard

    Hallo zusammen,

    ich stehe nun auch vor dem Problem, habe auch das Gefühl einen Fehler verbaut zu haben, ohne zu sehen. Sticky Footer will beim aktuellen Projekt nicht funktionieren

    Kurze Übersicht:
    - Contao 3.4.0

    - Layout nicht Statisch
    - css-reset
    - layout-builder
    + eigene css datei

    - 3 Zeilen
    - keine spalten

    Auszug aus der CSS:
    PHP-Code:
    htmlbody {
        
    font-family'Droid Sans'sans-serif;
        
    font-size:14px;
        
    height100%;
    }
    #container {
        
    padding0 0 180px 0;
        
    margin0 auto;
        
    width980px;
    }
    #wrapper {
        
    min-height100%;
        
    positionrelative;
    }
    #footer {
        
    position:absolute;
        
    bottom:0px;
        
    width100%;
        
    height180px;
        
    color:#FFF;

    Kann mir da jemand einen Tipp geben, was ich falsch mache? Warum der Sticky Footer, keiner sein will?

    Ansonsten Inhaltlich nicht aktuell, aber CSS ist die Gleiche!
    http://wp10714183.server-he.de/ewj/


    Danke und Gruß
    Christof

  13. #13
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.758
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Benutz mal position: fixed für den #footer. Dann scrollt der Footer nicht mit sondern bleibt immer am unteren Rand. Bedenke aber, dass bei kleinem Bildschirm und hohem Footer viel vom Inhalt verdeckt werden kann. Außerdem bereitet position fixed auch technische Probleme auf mobilen Endgeräten. Dort sollte man darauf verzichten.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  14. #14
    Contao-Nutzer
    Registriert seit
    19.12.2011.
    Beiträge
    49

    Standard

    Zitat Zitat von mlweb Beitrag anzeigen
    Benutz mal position: fixed für den #footer. Dann scrollt der Footer nicht mit sondern bleibt immer am unteren Rand. Bedenke aber, dass bei kleinem Bildschirm und hohem Footer viel vom Inhalt verdeckt werden kann. Außerdem bereitet position fixed auch technische Probleme auf mobilen Endgeräten. Dort sollte man darauf verzichten.
    hehe, das ich da nicht selber drauf gekommen bin! Danke Dir

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
  •