Hans: Footer platzieren funktioniert nicht richtig

Hallo Leute,

ich habe ein kleines Positionierungsproblem und finde keine richtige Lösung. Hier erstmal mein HMTL-Code:

<div><div>Text</div><span style="margin-bottom:5%;"><br>footer</span></div>

Wie man sieht, gibt es zwei ineinander verschachtelte Divs. Mein Footer soll einfach nur immer direkt am Ende der Seite stehen, das erste Div füllt die Seite exakt aus. Leider bringt die Angabe "margin-bottom" leider nichts, es gibt immer ein paar Pixel Abstand zum Boden. Der Abstand lässt sich durch die Angabe zwar, vergrößern, jedoch nicht auf 0 reduzieren.

Weiß jemand Rat? Danke!

  1. @@Hans

    <div><div>Text</div><span style="margin-bottom:5%;"><br>footer</span></div>
    

    Wie man sieht, gibt es zwei ineinander verschachtelte Divs

    Warum zwei? Und warum noch ein <span>? Da sollte gar kein <div> sein, sondern ein <footer>, siehe Seitenstrukturierung.

    Und auch kein <br>. Abstände mit CSS.

    Mein Footer soll einfach nur immer direkt am Ende der Seite stehen, das erste Div füllt die Seite exakt aus. Leider bringt die Angabe "margin-bottom" leider nichts, es gibt immer ein paar Pixel Abstand zum Boden.

    Das liegt wohl an der Angabe body { margin: 8px } im Browser-Styelsheet, die du überschreiben müsstest.

    🖖 Живи довго і процвітай

    --
    When the power of love overcomes the love of power the world will know peace.
    — Jimi Hendrix
  2. Hallo Hans,

    das erste Div füllt die Seite exakt aus.

    sicherlich möchtest Du sowas haben:

    <body>
       <header>...</header>
       <nav></nav>
       <main>Dein Hauptinhalt</main>
       <footer></footer>
    </body>
    

    Wie Gunnar schrieb: die Browser geben dem Body per Default einen Margin, der muss weg. Und dann kannst Du mit height:100vh; und Grid-Layout auf dem body nach Belieben den Heiligen Gral zelebrieren, und bei Bedarf auch abhängig von der Viewportbreite umgruppieren.

    Rolf

    --
    sumpsi - posui - obstruxi
  3. Hallo,

    erstmal besten Dank, habe es jetzt hingekriegt. Es kommt im FF und Edge zu teils abweichenden Darstellungen; dabei dachte ich, dass die Zeiten von Browserweichen endgültig vorbei sind ^^

    Gruß Hans

    1. @@Hans

      erstmal besten Dank, habe es jetzt hingekriegt. Es kommt im FF und Edge zu teils abweichenden Darstellungen; dabei dachte ich, dass die Zeiten von Browserweichen endgültig vorbei sind ^^

      Das sind sie.

      Vermutlich machst du was falsch. Da du uns deine Seite nicht zeigst, können wir dir aber nicht sagen, was.

      Ähm, <!DOCTYPE html> hast du oder schickst du die Browser in den Quirksmodus? Dann kann man ihnen keinen Vorwurf machen, unterschiedlich darzustellen.

      🖖 Живи довго і процвітай

      --
      When the power of love overcomes the love of power the world will know peace.
      — Jimi Hendrix
      1. Hallo Gunnar,

        wahrscheinlich hast du Recht^^. Habe meine letzte Website vor 20 Jahren gebaut und lese hier zwar recht regemäßig mit, was trotzdem nicht verhindern konnte, dass meine Kenntnisse hoffnungslos veraltet sind. Ich müsste mal schauen, ob sich der Aufwand lohnt. Vielleicht bin ich mit einem Template schon gut bedient.

        Gruß Hans

        1. ...oder ich klaue mir ein Layout, kriegt sowieso keiner mit :-D

          1. Servus!

            ...oder ich klaue mir ein Layout, kriegt sowieso keiner mit :-D

            Hier gibt's ein HTML5 Grundgerüst

            Hier gibt's 13 fertige Layouts

            Herzliche Grüße

            Matthias Scharwies

            --
            Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
            1. @@Matthias Scharwies

              Hier gibt's ein HTML5 Grundgerüst

              „Für die heutigen Browser wird nur noch die DTD für HTML5 benötigt“ 😱

              Es gab nie eine DTD für HTML5 und es wird auch nie eine geben.

              Ich könnte mich mal ransetzen und den Artikel zumindest von den gröbsten Fehlern befreien …

              🖖 Живи довго і процвітай

              --
              When the power of love overcomes the love of power the world will know peace.
              — Jimi Hendrix
              1. ...da prangt auch immernoch das Weihnachts-Wiki-Logo mit Mütze ;-)

                1. Servus!

                  ...da prangt auch immernoch das Weihnachts-Wiki-Logo mit Mütze ;-)

                  Das wird da irgendwie gecached. Auch die MediaWiki-Sidebar, die ich mittlerweile geändert habe, wird im Edge noch unverändert gezeigt, während Firefox und Chrome das neue Menü anzeigen.

                  Herzliche Grüße

                  Matthias Scharwies

                  --
                  Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
              2. Servus!

                @@Matthias Scharwies

                Hier gibt's ein HTML5 Grundgerüst

                „Für die heutigen Browser wird nur noch die DTD für HTML5 benötigt“ 😱

                Es gab nie eine DTD für HTML5 und es wird auch nie eine geben.

                Ich könnte mich mal ransetzen und den Artikel zumindest von den gröbsten Fehlern befreien …

                Das wäre nett! Vielen Dank im Voraus!

                🖖 Живи довго і процвітай

                Herzliche Grüße

                Matthias Scharwies

                --
                Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“