Logo coldheat - Weblog von Christian Mücke

Seitenleiste einblenden

  • Archiv
  • Layouts
  • 100 Filme
  • Uniques
  • Impressum
  • Mi, 09. August 2006
  • 4 Kommentare

tricky sticky Footer

Bei der Arbeit am Portfolio, zeigte sich ein nerviges, altes und immer ignoriertes Problem. Der Footer dieser Div-Struktur klebt leider nicht immer schön am Fuß des Browserfensters… nun ja nun tut er es. Das soll kein episch langer Text werden. Wer bei Google nach sticky footer sucht, erhält als erstes Ergebnis gleich die perfekte Lösung. Die perfekt einfache Lösung?

Hier zu sehen die Grundstruktur der Seite, bestehend aus nur vier Divs.

Div-Struktur Version 5Nun für meinen Aufbau der Seite, schien diese Lösung leider nicht wirklich fehlerlos zu funktionieren. Vor Monaten hatte ich diesen CSS-Code schon einmal versucht in die Seite zu integrieren, jedesmal mit wenig Erfolg, weshalb der kleine Fehler bis heute existierte.

Die dort beschriebene Methode ist in der Tat perfekt, wieso nur funktionierte es nicht für meine Seite? Ein Blick auf den Aufbau der Div-Struktur offenbart das Problem dann doch recht schnell. Die dort angebotene Lösung, setzt einen etwas anderen Aufbau der Divs vorraus. Mein Problem ist die fast schon zu simple Stuktur, bei der das #header-Div, ein Problem darstellt, da es nicht innerhalb des #container-Divs liegt. Leider ist dieser #container mein vom Tutorial bezeichnetes #nonFooter-Div.

Mit meiner Struktur funktioniert es leider nicht ohne Anpassung:

<div id="header"></div>

<div id="container">
<div id="content"></div>
</div>

<div id="footer"></div>

So dagegen würde es problemlos funktionieren:

<div id="container">
<div id="header"></div>
<div id="content"></div>
</div>

<div id="footer"></div>

Bekommt div#container einen Höhen-Wert von 100%, dann ergibt sich für die Gesamthöhe der Seite ein Wert aus 100% Fenster-Höhe, samt Höhe des Headers und Höhe des Footers. Nur einen zusätzlichen Wert kann ich durch den negativen Margin-Wert der Sticky-Footer Methode negieren, den des Headers leider nicht, genau dies war das Problem.

es klebt

Ich hab in sinnlos komplizierte Richtungen überlegt. Negative Margins samt Script-Berechnung für die Höhe des #container-Divs, die alle das Ziel haben sollten, die Höhe des Headers, aus der Höhe der Seite insgesamt zu entfernen. Wie nimmt man ein Element aus dem Flow der Seite? position:absolute;

Wieso fallen einem die einfachsten Lösungen so spät ein. Dieses position:absolute; ist die halbe Miete zur Lösung, der Footer ist sofort sticky. Von hier an spielt wie so oft, ein simpler Zufall die entscheidende Rolle. Ich hatte da immer dieses zweite Div (#content) innerhalb des #containers, primär angelegt um grafische Spielerein auch strukturell im #container-Div zu belassen. Geplant war mal Intro-Bilder für die jeweiligen Kategorien zu zeigen. Dieses #content-Div war schon immer da und konnte endlich eine Aufgabe bekommen.

Durch den nun absolut positionierten Header, klebte auch das #container-Div am oberen Rand der Seite. Ein oberes Padding auf diesem Element hätte theoretisch funktionieren sollen, praktisch tat es das nicht, da verschiedenste Browser wieder unterscheiden und das Padding mal zur Höhe addieren und mal nicht. Das #content-Div war bereit seine Hauptrolle zum Besten zu spielen. Dieses Div musste nun nur einen größeren margin-top Wert bekommen, nämlich zusätzlich genau den Wert der Höhe des Headers. Schon sitzt wieder alles an seinem Platz und der Footer klebt fest am Boden eures Browser-Fensters.

Die vom Mann in Blau angebotene Methode funktioniert in der Tat perfekt, braucht nur manchmal ein bischen Anpassung an das jeweilige Beispiel, besonders dann, wenn man wirklich jedes überflüssige Div einsparen möchte. Wie konnte ich so eine simple Lösung nur so lange übersehen. Peinlich, peinlich.

  • Schlagwörter:
  • CSS,
  • Website.

Zum gleichen Thema

  • streamlined
    streamlined
  • IE Terror Update
    IE Terror Update
  • Wo bleiben die Updates?
    Wo bleiben die Updates?
  • Tutorial: Gestaltungsraster im Webdesign
    Tutorial: Gestaltungsraster im Webdesign
  • Details zum Update - Raster und Kopf
    Details zum Update - Raster und Kopf
  • Zehn Fragen
    Zehn Fragen

4 Kommentare

Für diesen Eintrag wurden die Kommentare geschlossen.

  • #1
  • Do, 10. August 2006
  • omphteliba schrieb:

vielen dank für das coole tutorial!

eine kleine anmerkung von mir: auf der demo seite zum „sticky footer“ ist bei mir die untere zeite im footer angeschnitten. und darum habe ich wohl auch ständig rechts einen rollbalken. egal wie gross ich das fenster ziehe.

ich weiss ja, das ich alleine mit dem problem da stehe, weil ich die minimal schrift im firefox so gross eingestellt habe. aber auf dem 30″ tft sind die schriften zum dauerhaft lesen unter 16 Punkt einfach zu klein.

aber ich denke mal dass user mit seh-problemen (also alles bis kurz vor dem braille-display) auch ihre schriften stark vergrössern.

Webmaster
  • #2
  • Do, 10. August 2006
  • Christian schrieb:

eine kleine anmerkung von mir: auf der demo seite zum „sticky footer“ ist bei mir die untere zeile im footer angeschnitten. und darum habe ich wohl auch ständig rechts einen rollbalken. egal wie gross ich das fenster ziehe.

Ich vermute mal, das bei so einer großen Grundgröße irgendwelche Padding oder Border-Größen relativ mitwachsen und dann so groß werden, dass der negative Margin-Wert des Footers nicht mehr 100%ig ausreicht.

ich weiss ja, das ich alleine mit dem problem da stehe, weil ich die minimal schrift im firefox so gross eingestellt habe. aber auf dem 30″ tft sind die schriften zum dauerhaft lesen unter 16 Punkt einfach zu klein.

Mal so aus reiner Neugier, da du hier schreibst denke ich zwar die Antwort zu kennen, aber fragen kostet ja nichts. Ist diese Seite hier, mit solch einer großen Grundeinstellung der Font-Größe problemlos bedien- und lesbar? Ich versuche zwar immer alle Seiten relativ flexibel anzulegen, aber die Möglichkeit auf einem 30 Zoll Display zu testen sind halt sehr begrenzt.

  • #3
  • Do, 10. August 2006
  • omphteliba schrieb:

Mal so aus reiner Neugier, da du hier schreibst denke ich zwar die Antwort zu kennen, aber fragen kostet ja nichts. […]

diesbezüglich ist die site 1000 mal besser als viele andere sites in denen teilweise texte verschwinden und links nicht anklickbar sind. ich zähl einfach mal auf, was mir auffällt was nicht „so schön“ ist.

  • im header menu laufen tutorial und galerie über das such feld, so dass ich zwar noch die beiden links anclicken kann, aber nichts ins suchen feld eingeben kann.
  • der block „benutzbare HTML tags“ läuft in das „Remember me“ rein und der SENDEN knopf ist schwierig zu „treffen“.

das wars schon. hab mal alle bereiche durchgeguckt, konnte aber nichts weiteres feststellen.

  • #4
  • Do, 10. August 2006
  • Stulle schrieb:

Danke für den Tipp, denn ein „Redesign“ weg vom Standardlayout hin zum eigenen Skin steht bei mir im September an.

CC © 2022 C.Mücke Datenschutzerklärung Zurück zum Seitenanfang