Überlappen von Divisionen

  • Das geht einfach mit Flexbox (display: flex). Ich gehe davon aus, dass sich der Header und die graue Content-Box direkt im body-Bereich befinden. Zum Beispiel:

    Code
    body {
       display: flex;
       flex-direction: column;
    }
    .graue-content-box {
       margin-top: -200px;
    }


    Die -200px musst du natürlich deinen Wünschen anpassen.

  • Dankeschön, das hat funktioniert :)


    Der Footer meines derzeitigen Projektes beinhaltet eine Hintergrundgrafik und eine halbtransparente Grafik welche die Hintergrundgrafik überlagert. Nun möchte ich diese zweite Grafik unten ausrichten. Aber weder mit Position noch mit Flex funktioniert das.


  • Leider schreibst Du nicht, was denn genau nicht funktioniert. Dein CSS funktioniert bei mir einwandfrei, wenn ich eine Testdatei anlege. Ich musste lediglich einen main-Bereich hinzu fügen, um den Footer nach unten zu bekommen und dem überlagerten, absolut positionierten, die Breite 100% geben, damit er sichtbar wird.

    Gibt sicher auch andere Varianten, mit Flex ginge es auch, wenn man die überlagerte Grafik nicht absolut positioniert.

  • Anbei mal der ganze Code :)

    Ich möchte, dass die Hintergrundgrafik von #footer_background unten am Rand anliegt. Bei dem Code wird die Grafik gar nicht angezeigt.

    #footer_background liegt in der DIV #footer.

  • Zitat von wakeme

    Bei dem Code wird die Grafik gar nicht angezeigt.

    Das liegt vermutlich hieran:

    Zitat von Sempvervivum


    Ich musste lediglich ... dem überlagerten, absolut positionierten, die Breite 100% geben, damit er sichtbar wird.

    Aber ohne das HTML kann man nur Rätsel raten ...

  • Es hat funktioniert aber jetzt ist ein größerer Abstand zwischen dem unterem Rand des Bildschirmes und der Grafik. Ich verstehe nich wodurch dieser verursacht wird. Aus irgendeinem Grund wird durch diesen Zusatz das margin-bottom: -200px; des #Wrappers ignoriert.

  • Da musst Du dem #footer noch ein position: relative; verpassen, damit der überlagerte Container relativ zu diesem ausgerichtet wird (so wie Du es in deinem Posting #5 schon hattest):

  • Danke, das habe ich gemacht aber die beiden Probleme bestehen weiterhin.


    #footer_background hat einen größeren Abstand zu unterem Bildschirmrand ist aber dennoch fast richtig ausgerichtet.

    Das margin-bottom: -200px; vom #wrapper wird ignoriert und bei diesem Design ist es wichtig, dass der wrapper Header&Footer überlagert.

  • Zitat

    Das margin-bottom: -200px; vom #wrapper wird ignoriert

    Bei mir wird es nicht ignoriert sondern der überlagerte Teil des #wrapper verschwindet unter dem #footer weil #footer nach dem #wrapper notiert wird. Gib dem #wrapper einen hohen z-index und ein position: relative; :

    Code
    #wrapper {
        width: 900px;
        margin: 0 auto;
        margin-top: -300px;
        margin-bottom: -200px;
        display: flex;
        flex-direction: row;
        z-index: 100;
        position: relative;
    }
    Zitat

    #footer_background hat einen größeren Abstand zu unterem Bildschirmrand ist aber dennoch fast richtig ausgerichtet.

    Das kann ich auf meiner Testseite nicht nachvollziehen.

  • Auf deinem Screenshot sehe ich den Abstand aber bei mir tritt er nicht auf. Kannst Du das online stellen und die URL posten?

    Welchen Browser benutzt Du, möglicher Weise hat dieser andere Default-Werte als meiner (Opera)?

Jetzt mitmachen!

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