Abstände lassen sich nicht bändigen

  • Hallo,


    etwas das mich schon lange stört, aber das ich einfach nicht behoben bekomme, und gerade habe ich es mal wieder versucht. Die Boxen haben einen Abstand nach unten, wenn sie ganz unten dargestellt werden, doppelt sich dieser mitunter mit dem Rand des umgebenden Bereichs, was zu einem zu großen Abstand führt.



    Setzt man den Abstand des Bereichs jedoch auf Null, rutschen die Boxen trotz eigenen Abständen auch gerne mal aus dem umgebenden Bereich heraus.



    Also, wie kann ich die Darstellung so korrigieren, dass das für jede Anordnung der Boxen und jede Auflösung funktioniert? ?(


    Beste Grüße

  • Du musst dafür sorgen, dass das last-child den Abstand unten nicht hat.


    Also entweder für das :last-child den Abstand unten auf Null setzen, oder von vornherein dafür sorgen, dass alle außer dem last-child den Abstand haben: :not(:last-child)

    Gruß aus Südhessen

  • Kann man sich das irgendwo live ansehen?

    Ist unser Standardstil.

    Auf seiner Website scheint das Problem bereits behoben zu sein. Kann dies sein?

    Nein, auch wenn es nicht bei jeder Größe auffällt, meist ist unten einfach nur weniger Platz, nur der Außenabstand der Boxen und nicht der Innenabstand des Bereichs, aber wenn man das Fenster sehr klein zieht, sieht man unten zuverlässig immer einen riesengroßen Abstand, etwa zweimal den Innenabstand des Bereichs. :/

  • Das Problem summiert sich auf:

    #main > .layoutBoundary hat ein padding-bottom: 30px;

    .content:first-child + .boxesSidebarRight hat ein margin-bottom: 20px;

    .boxesSidebarLeft > .boxContainer > .box, .boxesSidebarRight > .boxContainer > .box haben immer noch ein margin-bottom: 30px; (statt nur :not(:last-child))


    Verändere die Abstände wunschgemäß und es dürfte passen.

  • Du meinst also die Darstellung, wenn nur noch eine Spalte für die Boxen übrig bleibt (auf Smartphones).


    Ändere folgende Regel:

    CSS
    @media (max-width: 1024px){
        .boxesSidebarLeft>.boxContainer>.box, .boxesSidebarRight>.boxContainer>.box {
            border: 0;
            border-radius: 10px;
            margin: 0 0 30px 0 !important;
        }
    }

    so ab:

    CSS
    @media (max-width: 1024px){
        .boxesSidebarLeft>.boxContainer>.box:not(:last-child), .boxesSidebarRight>.boxContainer>.box:not(:last-child) {
            border: 0;
            border-radius: 10px;
            margin: 0 !important;
    }


    Zusätzlich könntest Du noch folgende Regel:

    Code
    .content:first-child+.boxesSidebarRight {
        margin-bottom: 20px;
        margin-top: 0;
    }

    so ändern:

    Code
    @media (max-width: 544px){
        .content:first-child+.boxesSidebarRight {
            margin-bottom: 0;
            margin-top: 0;
        }
    }

    Gruß aus Südhessen

  • Hm, das führt leider nicht zur gewünschten Darstellung, aber ich konnte das jetzt stark vereinfachen, indem die Boxen, abgesehen von der allerersten, einen Außenabstand nach oben und unten von 30px besitzen (fallen dank Collapsing Margins ja zusammen). Diese zwei Phänomene treten aber noch immer auf:



    Der Abstand unten zwischen der grauen Box und dem Rand der weißen Box ist geringer (20px statt 30px).



    Der Abstand bleibt weiterhin riesig.

  • Okay, bei mittleren Größen konnte ich soeben die gewünschten Abstände erreichen, indem ich dem umgebenden Bereich einen Außenabstand von 30px gegeben habe, denn die Außenabstände der Boxen werden unten nicht beachtet, und laufen aus dem umgebenden Bereich hinaus. Sieht man recht schön in den Webdeveloper Tools. Aber erstell von solchen Mouse-Hover-Ansichten mal Screenshots. Wenn man das Fenster sehr klein zieht verdreifachen sich dafür die Abstände.

    Code
    .content:first-child + .boxesSidebarRight {
            margin-bottom: 30px;
        }

    Aber warum braucht es das bei Breiten unter 1024px? Mein Fehler oder eine Eigenheit der Standardformatierung?