Pascal: stiky footer

SELF-Forum

stiky footer

Pascal Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo Zusammen

Gleich mal vorneweg, JA ich weiß das dies ein altes Thema ist! Ich weiß auch das darüber im internet unzählige Seiten ihre Idee dazu präsentieren ... das ist was ich mir nun für Stunden angesehen habe, leider bin ich dennoch nicht auf eine Lösung gekommen...

Mein footer macht nicht was er soll! Ich mache daran nun schon seit Tagen rum aber ich komm auf keinen grünen Zweig.
Das Problem liegt darin das der Inhalt den footer nicht nach unten drückt. Der footer macht es sich genau am unteren Rand eines Fensters bequem und macht keinen wank mehr.

Um das ganze mal zu sehen hab ich ein Provisorium hoch geladen...

  • www.globetrotter.ph

Auf der index Seite scheint alles zu funktionieren, was mich lange an den div's der Folgeseiten rumexperimentieren lies.
Bei "About" kann man schön sehen wo sich der footer einnistet. Bei "Portfolio" habe ich im CSS die höhe des Inhalts auf 1750px gestellt und erhalte somit (zumindest bei meiner Auflösung) eine "korrekte" darstellung, das kann so aber nicht sein!
Bei "stock" habe ich nur zum demonstrieren ein wenig text rein gehauen der nun über das Ende der Seite rausläuft, footer und bg des Inhalts werden aber nicht verlängert.

Ja ich habe viel gelesen, gesucht und gegoogelt, nein leider bin ich immer noch überfordert, ja ich habe mir den Beitrag hier im Forum angesehen, konnte daraus aber keine schlüsse ziehen.
Sollte trotzdem jemand Zeit und Lust haben sich dem Problem an zu nehen bin ich unglaublich dankbar.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. stiky footer

    Pascal Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Nachtrag:

    Ich weis nicht ob man den fehler in dem Stück CSS schon sieht:

    * { margin:0; padding:0; }  
  
html, body, #wrap { height: 100%;}  
  
html {  
	background-image:url(images/bg.png);  
	background-repeat:repeat-y;  
	background-position:center;  
}  
body > #wrap {  
	height: auto;  
	min-height: 100%;  
	font:62.5% Arial,Helvetica,sans-serif;  
	background-color:#181818;  
	margin-left: auto;  
   	margin-right: auto;  
   	width: 1000px;  
	position:relative;}  
  
  
#footer {  
	position: relative;  
	margin-top: -20px; /* negative value of footer height */  
	height: 20px;  
	clear:both;  
	padding-bottom:0px;  
	text-align:center;  
	margin-left: auto;  
   	margin-right: auto;  
   	width: 1000px;  
  }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. stiky footer

    Detlef G.
    – Informationen zu den Bewertungsregeln

    Hallo Pascal

    Mein footer macht nicht was er soll! Ich mache daran nun schon seit Tagen rum aber ich komm auf keinen grünen Zweig.
    Das Problem liegt darin das der Inhalt den footer nicht nach unten drückt. Der footer macht es sich genau am unteren Rand eines Fensters bequem und macht keinen wank mehr.

    Warum er das macht bzw. wie deine Lösung überhaupt funktionieren soll, kann ich auf die Schnelle nicht nachvollziehen.

    Um das ganze mal zu sehen hab ich ein Provisorium hoch geladen...

    • www.globetrotter.ph

    Vielleicht ist das Verhalten aufgrund der XHTML- und CSS-Fehler nicht nachvollziehbar.

    Wenn der überwiegende Teil der Seiten sowieso höher als die üblichen Browserfenster sind, würde ich auf extra Positionierungen für den Footer verzichten, und diesen als letztes Element der Seite einfach im Elementfluss belassen. Dann ist er immer am Seitenende, wenn auch nicht unbedingt am unteren Rand des Browserfensters.

    Wenn ich ihn unbedingt mindestens am Fensterrand haben will, dann würde ich das wohl einfach so machen:

    html, body {  
  margin:0;  
  padding:0;                       /* keine Abstände */  
}  
html {  
  height:100%;                     /* html braucht volle Fensterhöhe */  
}  
body {  
  min-height:100%;                 /* mindestens Fensterhöhe, ansonsten so hoch wie das Dokument */  
  position:relative;               /* damit sich position:absolute auf body bezieht */  
}  
* html body {  
  height: 100%;                    /* min-height für 6er IE */  
}  
#footer {  
  position:absolute;               /* absolut an der Unterkante von body ausrichten */  
  left:0;  
  right:0;  
  bottom:0;  
  background-color:#f00;  
  width:100%;  
  text-align: center;  
}  
#content {  
  border-bottom:1.2em solid green; /* Platz für den Footer */  
}  


      <body>  
   <div id="content">  
     Viel Inhalt <br />Viel Inhalt <br />Inhalt - letzte Zeile <br />  
   </div>  
   <div id="footer">  
     Der Footer  
   </div>  
  </body>

    In #content kann dann alles eingefügt werden, so lange darauf geachtet wird, dass nichts aus dem Elementfluss genommen wird, oder dieser innerhalb von #content wieder hergestellt wird.

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. stiky footer

      Pascal Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo Detlef

      Vielen Dank für die Antwort.

      Ich ziehe es in Erwägung eine deiner Lösungen aus zu probieren sollte ich es nicht schaffen das Problem in kurze zu lösen.

      Nun bei weiteren Recherchen hab ich noch gelernt das dies an absoluter Positionierung scheitern kann. Dabei frag ich mich ob dies auf alle absolut positionierte div's zutrifft, sprich ob keine div's ne absolute Position haben dürfen (was mir nicht wirklich einleuchtet) oder ob es nur die div's der Grundstruktur (html, body, contend und footer)betrifft die nicht absolut positioniert werden dürfen?

      Den meine Grundstruktur ist eigentlich "absolut" RELATIV ohne Ausnahme, wen ich mich nicht vertan hab :oD

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. stiky footer

        Detlef G.
        – Informationen zu den Bewertungsregeln

        Hallo Pascal

        Nun bei weiteren Recherchen hab ich noch gelernt das dies an absoluter Positionierung scheitern kann. Dabei frag ich mich ob dies auf alle absolut positionierte div's zutrifft, sprich ob keine div's ne absolute Position haben dürfen (was mir nicht wirklich einleuchtet) oder ob es nur die div's der Grundstruktur (html, body, contend und footer)betrifft die nicht absolut positioniert werden dürfen?

        Nein, prinzipiell kann jedes Element absolut positioniert werden. Es bereitet auch keine Probleme, wenn man weiß, was man tut.
        Wenn jemand versucht, sein Layout mittels position:absolute aufzubauen, dann gibt es oft Probleme mit Überlappungen, z.B. wenn sich nur die Schriftgröße und dadurch eine Elementgröße ändert.
        Die position-Eigenschaft ist nicht als Standardanwendung geeignet, dabei entstehen fast zwangsläufig Probleme, die nicht entstehen würden, wenn die Elemente im normalen Elementfluss belassen würden. Für das grundsätzliche Layout sind passende Abstände und Floats besser geeignet.

        Für Spezialanwendungen hat position aber seine Berechtigung.
        Mittels position:relative kann ein Element um ein Stück verschoben werden, ohne es aus dem Elementfluss zu nehmen, wie in diesen Beispielen: Papier mit angebranntem Rand, Box mit runden Ecken.
        Mit position:absolute kann ein Element vollständig aus dem Elementfluss entfernt und wie ein Aufkleber an einer beliebigen Position wieder „draufgeklebt” werden.
        Wenn man sich dessen wirklich bewusst ist und dafür sorgt, dass nie etwas verdeckt wird, was nicht verdeckt werden soll, dann ist das auch problemlos anwendbar.
        Deshalb auch border-bottom:1.2em solid green; für #content in meinem Beispiel (wobei natürlich noch eine passendere Farbe gewählt werden sollte).

        Den meine Grundstruktur ist eigentlich "absolut" RELATIV ohne Ausnahme, wen ich mich nicht vertan hab :oD

        Auch position:relative sollte nur verwendet werden, wenn ein Element verschoben werden soll, oder sich ein absolut positioniertes Nachfahrenelement an diesem orientieren soll. Sonst ist position:static zu verwenden, was nicht extra angegeben werden muss, weil das die Grundeinstellung ist.

        Auf Wiederlesen
        Detlef

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln