Footer läßt sich nicht am Boden ausrichten

  • Ich habe mich jetzt schon durch mehrere Tutorials und Forenbeirträge gewühlt, aber immer konnte ich das Problem nicht lösen.

    Ich habe die Aufteilung meines Designs abgespeckt und eine Testseite erstellt, um das Problem unabhängig von anderen Darstellungsproblemen isoliert lösen zu können.

    Zuletzt habe ich einiges anhand dieses Tutorials ausprobiert. Aber der Footer läßt sich einfach nicht am Boden ausrichten.

    Hier der Link zu meiner Testseite: klick

    Es scheint mir, dass die Höhe des "Nonfooters" komplett ignoriert wird. Firebug zeigt das zumindest nicht an. Auch das padding des Footers scheint ignoriert zu werden.

    Hier meine entsprechendende CSS:

    und der Quellcode der Testseite:

    Wie gesagt, ich habe einige Sachen rausgeschmissen, um die Datei übersichtlicher zu haben...

    Wo steh ich auf dem Schlauch? Wer kann mir helfen?

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Ich hab grade gesehen, dass es beim Footer natürlich beim margin eingestellt werden muss und nicht beim padding. Das ändert aber am grundsätzlichen Problem nicht... :(

  • teste mal dies

    Code
    #footer {
        background: url("images/footer_bg.png") repeat scroll center bottom transparent;
        border: medium none;
        bottom: 0;
        height: 118px;
        margin: 0 auto;
        position: absolute;
        width: 100%;
    }
  • Wow, scheint zu funktionieren. Vielen tausend Dank!
    Jetzt muss ich es natürlich noch ausprobieren, wenn ich die richtigen Inhalte wieder einfüge...

    Aber soweit schon mal sehr prima!

  • Ach ja kleiner Tipp noch...auf die Schreibweise achten

    Code
    #non[COLOR=Red]F[/COLOR]ooter
    Code
    <div id="non[COLOR=Red]f[/COLOR]ooter">
  • Kommando zurück...
    Funzt leider nicht ganz. Auf den Seiten, wo der Inhalt über den sichtbaren Bereich hinaus geht, bleibt der Footer am Ende des sichtbaren Bereichs stehen... und rückt nicht ans Ende des gesamten Inhalts...

    Bei den kürzeren Seiten gibt es einen Scrollbalken, obwohl alles auf einen Bildschirm passt... Und es gibt einen kleinen Abstand unterhalb des Footers, der etwas der Größe des Pfeiles des Scrollbalkens entspricht.

    Ich hab wieder etwas rumprobiert, aber ohne Erfolg. Leider...

  • liegt daran das der Footer in weitere div's eingepackt ist
    das div wird nicht durch den Namen zum Footer, es sollte auch dort sein ;)

    und wie ober schon geschrieben, auf die Schreibweise achten

  • Es gibt natürlich einen Unterschied, ob der Footer immer am Ende des Inhalts angezeigt werden soll oder grundsätzlich am Seitenende/Displayende(also immer zusehen ist, nicht mitscrollt)

    für Ende des Inhalts gehört dann ein

    Code
    clear: both;

    dazu und ohne

    Code
    position: absolute;

    Einmal editiert, zuletzt von Tutrix (7. Juni 2011 um 21:10)

  • Danke, ich glaube das "clear: both;" war es gewesen.
    Ich hab zwar noch einen bug auf der Seite "Meine Arbeiten", wo die Seite unerklärlich lang ist, obwohl inhaltlich eigentlich nichts da ist, was sie so lange macht.

    Aber ich glaub, das Problem ist erstmal gelöst.

    Vielen Dank!

  • Gerade eben konnte ich durch diesen Thread dasselbe Problem lösen.

    Code
    position: absolute;

    entfernt, dafür

    Code
    clear: both;

    hinzugefügt. Funktioniert wunderbar. Danke dafür!

    Allerdings verstehe ich den Grund noch nicht. Was genau macht denn dieses "clear: both;" genau? Warum wird der Footer nun am Inhalts-Ende angezeigt und sonst nicht?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!