Ergebnis 1 bis 15 von 15

Thema: Contao 2.11 - StickyFooter - Veränderungen an der fe_page

  1. #1
    Contao-Fan
    Registriert seit
    14.01.2011.
    Beiträge
    260

    Standard Contao 2.11 - StickyFooter - Veränderungen an der fe_page

    Bisher habe ich meine StickyFooter immer anhand dieses Eintrags umgesetzt:
    https://www.contao-community.de/grou...=51&do=discuss

    Allerdings sieht die fe_page mittlerweile anders aus, als noch bei Contao 2.9. Das Tutorial kann man natürlich noch verwenden, allerdings muss der Abschnitt über die Anpassung der fe_page überarbeitet werden.

    Man sollte den wrapper komplett durch diesen Code ersetzen:

    Code:
    <div id="wrapper">
    	<?php if ($this->header): ?>
    	<div id="header">
    		<div class="inside"> <?php echo $this->header; ?> </div>
    	</div>
    	<?php endif; ?>
    	<?php echo $this->getCustomSections('before'); ?>
    	<div id="container" class="clearfix">
    		<?php if ($this->left): ?>
    		<div id="left">
    			<div class="inside"> <?php echo $this->left; ?> </div>
    		</div>
    		<?php endif; ?>
    		<?php if ($this->right): ?>
    		<div id="right">
    			<div class="inside"> <?php echo $this->right; ?> </div>
    		</div>
    		<?php endif; ?>
    		<div id="main">
    			<div class="inside"> <?php echo $this->main; ?> </div>
    			<?php echo $this->getCustomSections('main'); ?>
    			<div id="clear"></div>
    		</div>
    		<?php echo $this->getCustomSections('after'); ?> </div>
    </div>
    <?php if ($this->footer): ?>
    <div id="footer">
    	<div class="inside"> <?php echo $this->footer; ?> </div>
    </div>
    <?php endif; ?>
    <!-- indexer::stop -->
    <img src="<?php echo $this->base; ?>cron.php" alt="" class="invisible" />
    <!-- indexer::continue -->
    Ich habe schon versucht es auf 2.11 umzumodellieren, es hat aber leider nicht funktioniert. Vielleicht schafft es einer von euch und könnte es dann für alle posten?

  2. #2
    Contao-Fan
    Registriert seit
    14.01.2011.
    Beiträge
    260

    Standard

    O.K. - gefunden: http://contaogrid.glen-langer.de/fe_pagehtml5.html

    Aber welche CSS-Anweisungen muss man dem ganzen noch mitgeben, damit der Footer auch am unteren Seitenrand "kleben" bleibt?

    Das funktioniert nicht:
    Code:
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
    }
     
    /* LAYOUT */
     
    #wrapper {
        min-height: 100%;
        position: relative;
    }
     
    #header {
        height: 175px;
        background: red;
    }
     
    #container {
        background: blue;
        padding-bottom: 335px; /* Höhe des Footers */
    }
     
    #footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 355px;
        background: green;
    }

  3. #3
    Contao-Fan
    Registriert seit
    14.01.2011.
    Beiträge
    260

    Standard

    Funktioniert. Allerdings nur, wenn ich den bgStretcher deaktiviere...
    Gibt es eine Lösung für 2.11, die auch mit der Erweiterung bgStretcher funktioniert?
    Außerdem ist es mit dem CSS-Code von oben völlig egal, welche fe_page ich nehme. Egal ob diese: http://contaogrid.glen-langer.de/fe_pagehtml5.html oder die Standard fe_page...

  4. #4
    Contao-Urgestein Avatar von tblumrich
    Registriert seit
    25.06.2009.
    Ort
    Feldberger Seenlandschaft
    Beiträge
    2.225
    Partner-ID
    7979
    User beschenken
    Wunschliste

    Standard

    So, wie es aussieht, hast du den CSS Code ja von hier:
    http://de.contaowiki.org/Footer_am_u..._positionieren

    Und da steht doch auch nichts von veränderter fe_page, oder? Warum also willst du diese überhaupt verändern?

    Im diesem Thread wurde zuletzt auch nochmal einiges zu den StickyFooter Methoden gesagt.

    Gruß
    Thomas
    blucomp | Webdesign & Onlinelösungen

  5. #5
    Contao-Fan
    Registriert seit
    14.01.2011.
    Beiträge
    260

    Standard

    Richtig, ich habe auch den Thread schon gelesen. Allerdings funktioniert die reine CSS-Version nicht mit dem bgStretcher -> Also würde ich lieber so vorgehen: http://contaogrid.glen-langer.de/fe_pagehtml5.html

    Allerdings weiß ich dann nicht, was ich CCS mäßig noch erledigen muss, dass es funktioniert... Es gibt einige Threads dazu, aber keiner hilft mir so wirklich weiter. Es wäre super, wenn wir hier eine Methode komplett vorstellen, so dass es jeder einfach verwenden kann. Ich würde auch gerne ein kleines Tutorial schreiben...
    Geändert von freak_me11 (25.02.2012 um 11:14 Uhr)

  6. #6
    Contao-Urgestein Avatar von tblumrich
    Registriert seit
    25.06.2009.
    Ort
    Feldberger Seenlandschaft
    Beiträge
    2.225
    Partner-ID
    7979
    User beschenken
    Wunschliste

    Standard

    Auf der Seite, wo die Beispieldateien für Contao mal lagen, gibts nicht mehr, wie es scheint... ich hatte diese aber noch hier rumliegen, vielleicht kannst du da was mit anfangen...

    Gruß
    Thomas
    Angehängte Dateien Angehängte Dateien
    blucomp | Webdesign & Onlinelösungen

  7. #7
    Contao-Fan
    Registriert seit
    14.01.2011.
    Beiträge
    260

    Standard

    Das ist das, was ich im ersten Post geschrieben habe... Das ist eben für Version 2.9 -> Mein Problem sind aber genau die fe_pages ab 2.10 mit HTML5 -> Die fe_page ist bis 2.9 anders aufgebaut...

  8. #8
    Contao-Urgestein Avatar von tblumrich
    Registriert seit
    25.06.2009.
    Ort
    Feldberger Seenlandschaft
    Beiträge
    2.225
    Partner-ID
    7979
    User beschenken
    Wunschliste

    Standard

    In deinem letzten Post hattest du doch nach passenden CSS Anweisungen für die Varianten mit bearbeiteter fe_page gefragt. In der ZIP ist doch eine entsprechende CSS drin. Für die ist doch völlig unerheblich ob xhtml oder html5 oder tpl Template.

    Sicher musst du diese noch anpassen, aber prinzipiell dürften die Anweisungen stimmen - das ist ja keine Erfindung für Contao....
    Letztendlich sorgt die Variante mit umgebauter fe_page doch nur dafür, das der Footer außerhalb des wrappers liegt. Das ist beim Template von Glen auch nicht anders.

    Gruß
    Thomas
    blucomp | Webdesign & Onlinelösungen

  9. #9
    Contao-Fan
    Registriert seit
    14.01.2011.
    Beiträge
    260

    Standard

    Auch hier das Problem, dass es nicht mehr mit dem bgStretcher funktioniert. Das ging bis 2.9 wunderbar – jetzt leider nicht mehr.

    meine fe_pageStickyFooter:
    Code:
    <!DOCTYPE html>
    <html lang="<?php echo $this->language; ?>">
    <head>
    <meta charset="<?php echo $this->charset; ?>">
    <title><?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?></title>
    <base href="<?php echo $this->base; ?>">
    <meta name="robots" content="<?php echo $this->robots; ?>">
    <meta name="description" content="<?php echo $this->description; ?>">
    <meta name="keywords" content="<?php echo $this->keywords; ?>">
    <?php echo $this->framework; ?>
    <?php echo $this->stylesheets; ?>
    <?php echo $this->mooScripts; ?>
    <?php echo $this->head; ?>
    <!--[if lt IE 9]><script src="<?php echo TL_PLUGINS_URL; ?>plugins/html5shim/html5-<?php echo HTML5SHIM; ?>.js"></script><![endif]-->
    </head>
    <body id="top" class="{{ua::class}}<?php if ($this->class): ?> <?php echo $this->class; ?><?php endif; ?>"<?php if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
    <?php $this->showIE6warning(); ?>
    
    <div id="wrapper">
    <?php if ($this->header): ?>
    
    <header id="header">
    <div class="inside">
    <?php echo $this->header; ?> 
    </div>
    </header>
    <?php endif; ?>
    <?php echo $this->getCustomSections('before'); ?>
    
    <div id="container" class="clearfix">
    <?php if ($this->left): ?>
    
    <aside id="left">
    <div class="inside">
    <?php echo $this->left; ?> 
    </div>
    </aside>
    <?php endif; ?>
    <?php if ($this->right): ?>
    
    <aside id="right">
    <div class="inside"> 
    <?php echo $this->right; ?> 
    </div>
    </aside>
    <?php endif; ?>
    
    <section id="main">
    <div class="inside">
    <?php echo $this->main; ?> 
    </div>
    <?php echo $this->getCustomSections('main'); ?> 
    <div id="clear"></div>
    </section>
    
    </div>
    <?php echo $this->getCustomSections('after'); ?>
    </div>
    <?php if ($this->footer): ?>
    
    <footer id="footer">
    <div class="inside">
    <?php echo $this->footer; ?> 
    </div>
    </footer>
    <?php endif; ?>
      
      
    <?php echo $this->mootools; ?>
    <?php if (!$this->disableCron): ?>
    
    <script>
    new Request({
      url:'system/html/cron.txt',
      onComplete: function(txt) {
        if (!txt) txt = 0;
        if (parseInt(txt) < (Date.now()/1000 - 300)) {
          new Request({url:'cron.php'}).get();
        }
      }
    }).get();
    </script>
    <?php endif; ?>
    
    </body>
    </html>

    CSS:
    Code:
    /* Version: 1.0.0 Sticky Footer Solution for Contao (TYPOlight) by Nils
    Mueller (www.exsiteing.com) inspired by Steve Hatcher (http://stever.ca,
    http://www.cssstickyfooter.com) */
    *
    {
        margin:0;
        padding:0;
    }
    
    
    /* must declare 0 margins on everything, also for main layout components
    use padding, not vertical margins (top and bottom) to add spacing, else
    those margins get added to total height and your footer gets pushed down
    a bit more, creating vertical scroll bar */
    html,
    body,
    #wrapper
    {
        height:100%;
    }
    
    body > #wrapper
    {
        height:auto;
        min-height:100%;
    }
    
    #container
    {
        padding-bottom:120px;
    }
    
    
    /* must be same height as the footer */
    #footer
    {
        position:relative;
        clear:both;
        margin-top:-120px;
        /* negative value of footer height */ height: 120px;
    }
    
    
    /* CLEAR FIX */
    .clearfix:after
    {
        height:0;
        clear:both;
        display:block;
        content: ".";
        visibility: hidden;
    }
    
    .clearfix
    {
        display:inline-block;
    }
    
    
    /* Hides from IE-mac \ */
    * html .clearfix
    {
        height:1%;
    }
    
    .clearfix
    {
        display:block;
    }

    Vielleicht weiß ja jemand, wieso die bgStretcher Erweiterung nicht mehr funktioniert, sobald man diese CSS-Datei verwendet!?

  10. #10
    Contao-Urgestein Avatar von tblumrich
    Registriert seit
    25.06.2009.
    Ort
    Feldberger Seenlandschaft
    Beiträge
    2.225
    Partner-ID
    7979
    User beschenken
    Wunschliste

    Standard

    Hi.

    Kennst du diesen Thread?

    Da steht irgendwo was von StickyFooter + bgStretcher.

    Gruß
    Thomas
    blucomp | Webdesign & Onlinelösungen

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

    Standard

    erstmal zum Verständnis, welche der beiden hier genannten Varianten willst du erreichen?
    https://www.contao-community.de/show...l=1#post178685

    Du kannst nicht die reine CSS Variante mit der modifizierten fe_page von meiner Seite nehmen.
    Den bgstretcher kenn ich nicht und weiß daher nicht wie der arbeitet, daher kann ich dazu keine Auskunft geben
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  12. #12
    Contao-Fan
    Registriert seit
    14.01.2011.
    Beiträge
    260

    Standard

    Hallo BugBuster,

    es soll genau so funktionieren: http://www.cssstickyfooter.com/de/
    -> Also Variante a. Wie gehst du vor, wenn du das umsetzen willst?

    1. Anpassung müsste in der fe_page sein. Man nimmt den Footer und packt ihn außerhalb des Wrappers.
    2. CSS Anweisungen -> Wie sieht das bei dir aus?

    Viele Grüße

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

    Standard

    Fast wie in diesem Beispiel, und die Klassen heißen einmal anders.
    Auszug aus http://contaogrid.glen-langer.de/contao-grid-basic.html
    Code:
    /* Die Höhe des Footers, wird später
     * auch noch mal in #footer definiert */
    #container {
    padding-bottom: 50px;
    }
    /* Sticky Footer Hoehe als height und negativem margin-top */
    #footer
    {
    height:50px;
    position:relative;
    margin-top:-50px;
    }
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  14. #14
    Contao-Fan
    Registriert seit
    14.01.2011.
    Beiträge
    260

    Standard

    O.K – jetzt hat es glaube ich "klick" gemacht.

  15. #15
    Contao-Nutzer Avatar von Nils Müller
    Registriert seit
    19.02.2010.
    Ort
    Hamburg
    Beiträge
    19

    Standard

    Für 2.10 und xHtml guckst du hier: https://www.contao-community.de/show...891#post185891
    ... ich habe es mal angepasst.

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
  •