Footer rutscht nicht ans Seitenende

    Guten Tag,

    Ich weiß nicht genau, ob dieses Thema in den Bereich HTML gehört, aber jetzt ist es halt hier.

    Kann mir irgendjemand beantworten, warum der Footer am Ende einer nicht-scrollbaren Seite ist, aber nicht am Ende einer scrollbaren Seite ist?

    Ich bin noch ein "Anfänger" in CSS und HTML. Vielleicht kann es trotzdem jemand beantworten.

    Das ganze sieht dann etwa so aus:

    http://prntscr.com/mhbk4d

    Der Footer überschreibt also andere Divs, die eigentlich über dem Footer sein müssten.

    Hier ist der CSS-Code vom Footer:

    Wenn ihr noch den HTML-Code benötigt, kann ich ihn auch gern noch geben.

    Danke schonmal für eure Hilfe,

    MadeByProxxy

    Hallo MadeByProxxy,


    leider sagt dein Bild nicht viel aus da der ausschnitt viel zu klein ist um zu erkennen wo das Problem liegt. Mit dem HTML Code hätte es mehr Aussagekraft, auch nur den Footer teil des CSS zu haben macht das ganze recht schwer. Daher kann ich an der Stelle nur raten:


    Du nutzt ein Position: absolute; (2 mal), welches angibt das ein element an einer "absoluten" position abhängig von einem anderen element ist, was das verhalten mit dem Scrollbaren / nicht Scollbaren erklären könnte. (Auch das ist leider keine nützliche aussage ohne die ganze Seite: html und css, sehen zu können).


    Viele Grüße


    Timo

    Wie soll sich der Footer denn verhalten?

    Immer sichtbar am 'Fuß' der Seite?

    Dann müsstest du mit 'position: fixed;' arbeiten

    Code
    #footer {
...
   position: fixed;
   left: 0px;
   bottom: 0px;
   right: 0px;
...
}

    Soll der Footer unten auf der Seite sein... also unterhalb des restlichen Codes und erst dann sichtbar sein, wenn man nach unten scrolled?

    Dann solltest du 'position: relative;' oder 'position: static;' verwenden.


    Ggf. solltest du dir überlegen, das Layout der Seite mit Flex-Box zu realisieren und den Footer als Flex-Item anzulegen.


    Frage:

    Warum hast du mache Formatierungen (zB position und bottom) doppelt in deinem CSS. Einmal reicht und vermeidet Fehler.

    Okay. Danke erstmal. Ich probier es aus.

    Antwort zu deiner Frage: Weil ich ein Teil aus dem Internet hab und wohl übersehen hab, dass es da schon ist. Zudem bin ich, wie gesagt, ein HTML/CSS Anfänger c:

    Soo. Der HTML-Code von der Index-Seite ist dieser hier:


    https://pastebin.com/7WRRcN7s


    (Ich weiß, dass das ganze <br> keine schöne Idee ist, aber sie funktioniert erstmal und ich spiel nur ein bisschen an der Website rum. Das bitte ignorieren, ich weiß, man kann es besser machen :D)


    Und der jetzige CSS-Code:


    Ok, da sind 2 dinge am Footer code "falsch".


    1. Dein gesamter sichtbarer html code muss im <body> bereich sein, das <footer> element gehört da ebenfalls rein.

    2. Wenn du das <footer> element nutzt, musst du in diesem nicht zusätzlich ein <div> mit einer footer klasse hinzufügen. Am besten setzt du die klasse footer in das footer element. Oder du hältst es einheitlich und nutzt nur das <div class='footer'>



    HTML
    <html>
    <head>
    </head>
    <body>
        <footer class='footer'>
        </footer>
    </body>
</html>


    Schau mal wie die Seite nach der Anpassung aussieht.


    Grüße


    Timo

    Sorry... aber das ist nur die Hälfte dessen, was jemand braucht, der dir helfen will!

    Was steht in deiner 'stylesheet/style.css' ... nichts? Ohne zu sehen, wie die anderen Elemente formatiert sind, kann man kaum was sagen.

    Aber ist jetzt auch egal.. du schreibst...

    Zitat von MadeByProxxy

    Der Footer bleibt immer noch oben am Seitenende der nicht-scrollbaren Seite.

    Ja.. das soll wohl so sein. er bleibt da, wo du ihn im Textfluss eingefügt hast - am Ende der Seite. Und wenn das Ende der Seite früher ist, als das Ende des Bildschirms, was ja bei nicht scrollbaren Seiten eigentlich die Regel ist, dann wird der Footer auch da angezeigt, wo der Code zu Ende ist.


    Schau mal in Betrag #3... da habe ich das schon mal nachgefragt und dir auch dafür schon alternativen Möglichkeiten genannt.

    Nur was du jetzt genau erreichen willst, ist mir weiterhin unklar... wo soll der Footer sein (scrollbar / nicht scrollbar) ... soll er mitscrollen oder immer sichtbar am unteren Bildschirmrand sein... oder irgendwas anderes?


    Die Qualität der Antworten hängt immer auch von der Qualität der Frage ab...


    Bevor ich es vergesse. In deinem HTML Quellcode, hast du ein <style>body... </style> inmitten des "body's"! Das gehört da nicht hin - das muss in den <head>... </head>.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden