Background-DIV irritiert Navigation

  • Hallo an alle,


    hier die Seite zur Veranschaulichung: https://mariposa.beautiful-dreaming.net/index.html

    Ich habe eine Navigation <nav> und nach der Navigation ein <div> mit dem Background. Dieses div habe ich aus hier noch nicht ersichtlichen Gründen um 50px nach unten verschoben mit margin-top. position-y hat irgendwie nicht das gemacht, was ich wollte. Ich dachte, damit könnte ich das div um 50px nach unten versetzen, aber da passiert gar nix. Ich dachte, juhu, Problem gelöst - und schwupps taucht das nächste auf. Nun irritiert dieses DIV die darüberliegende Navigation. Warum um Himmels Willen rutscht die jetzt mit nach unten, die befindet sich ja außerhalb des DIV.



  • Zitat

    Warum um Himmels Willen rutscht die jetzt mit nach unten, die befindet sich ja außerhalb des DIV.

    :-) Das ist eines der Mysterien von CSS und läuft unter dem Begriff "collapsing margins" bzw. "zusammenfallende Außenabstände", hier wird es erklärt:
    https://developer.mozilla.org/de/docs/Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern


    Setze ich jetzt das margin-top für das div.banner auf 0 so verschwindet der obere Abstand aber dann wird sich das Problem stellen, dass dieses div.banner unter die Nav rutscht. Normaler Weise könnte man das leicht lösen, indem man die Nav auf position:sticky setzt aber hier macht einem Bootstrap einen Strich durch die Rechnung weil die Klasse zwar "sticky" heißt aber position:fixed gesetzt wird, wahrscheinlich aus Gründen der Kompatibilität mit alten Browsern. Ein Grund mehr, warum ich kein Freund von Bootstrap bin.

  • Bootstrap verwende ich eig nur für das Carousel, das jetzt auf der index nicht mehr drin ist, sondern ich auf eine Testseite verlegt habe.

    Die Navigation läuft völlig ohne alles. Sticky ist sie allerdings schon, wird aber erst beim scrollen hinzugefügt (über JS).


    Was Basti da schön mit Rahmen gemacht hat, so sollte es eig sein.

    Also die Navigation soll oben sein, wird beim Scrollen aber ein bisschen kleiner.

    So ganz richtig ist das von Basti aber auch nicht, denn wenn dieser Hintergrund 100vh hat, aber sich unter der Navigation befindet, geht er am unteren Bildschirmrand genau um diese Höhe nochmal weiter. Gut, das lässt sich über calc lösen.


    Das mit der margin hab ich in ein border-top geändert, so klappt das dann zwar mit dem Menü. Nun müsste ich aber aus box-sizing eine padding-box machen anstatt das auf border-box zu lassen und das viel größere Problem ist, dass dann eig immer noch der Hintergrund hinter dem Menü ist.


    Worum es mir letzten Endes geht ist folgendes: Der ganze Content, der auf der Landing-Page innerhalb des banner-DIVs sein soll, sollen vertikal zentriert sein. Das ist er zwar, aber halt nicht im sichtbaren Teil, der unter dem Menü beginnt, da dieses banner-DIV vom oberen Browserrand ausgeht. Und das ist doch eigentlich unlogisch und doof, da doch die Navigation nicht nur ebenenmäßig drüberliegt, sondern auch im Code davor steht. Womit wir eig wieder bei Bastis Lösung sind.


    Geht's euch wie mir und ihr seid jetzt auch verwirrt? *den Affensmiley von Whatsapp such*




    ***********



    So, ich nochmal. Ich hab jetzt mal position:sticky gesetzt, aber dann scrollt die Navigation tatsächlich nicht mehr mit. Bei Basti ist sie aber auch auf sticky, scrollt aber trotzdem mit. Bin noch nicht dahintergekommen, was er da anders gemacht hat?

  • Ich poste das jetzt nochmal hier in diesem Thread.

    Ich hatte ja damals das Problem hier mit einem Menü. Diesmal hab ich's geschafft, es selbst zu lösen - bei einem anderen Menü für eine neue Seite.

    Da die Menüs sehr ähnlich sind, passt das mMn hier nochmal rein.

    Also: Ich hab eine NAV und darin einen Wrapper, in dem dann das Menü ist. Bei dem Menü in dem Thread hier war das auch so, nur hatten die eine andere Bezeichnung. Das Original von diesem Menü hat diesen Wrapper nicht. Ich möchte aber nicht, dass sich alles über die ganze Bildschirmbreite erstreckt, es passt danach auch zum Content usw. Dem Wrapper hab ich mal eine gelbe Border gegeben, damit man sieht, was ich meine. Eigentlich wäre ja der ganze Menüinhalt innerhalb dieses Wrappers, er ist aber quasi drüber und umrahmt das ganze nicht. Wenn ich ihm display:flex zuweise, würde er das zwar machen, aber dann tut das Menü nicht mehr das, was es soll.

    Wie kann ich das Problem jetzt lösen? Ich mein, der Wrapper tut zwar, was er soll - nämlich den Inhalt des Menüs zusammenschieben auf 960px, sodass der Hintergrund vom Menü trotzdem die volle Breite hat. Man könnte das jetzt einfach so lassen, da man's ohne Border eh nicht sieht. Und wie ihr unten im Content seht, da passt's dann plötzlich. Aber ich würde gerne verstehen, warum das so ist und das ggf. doch "ausbessern".

    Hier mal der vorläufige Link zur Seite.


    Danke für euer aufschlussreiches Wissen!


    Elly

  • Du hast die beiden vorhandenen Container (div.wrapper und ul) mit float aus dem Dokumentenfluß entfernt. Dadurch sind sie für den umgebenden Container (div.wrapper) nicht vorhanden. Ohne Inhalt hat der .wrapper nur die Höhe vom oberen und unteren Border (4px).


    Das ist mit ein Grund dafür float nicht mehr für Gestaltungsmaßnahmen zu mißbrauchen. Vor der Einführung von Flexbox und CSS-Grid ging es nicht anders, die Zeiten sind aber seit Jahren vorbei.


    Warum Flexbox (display: flex;) nicht funktionieren sollte erschließt sich mir nicht und ist an Hand deines float-Beispiels nicht nachvollziehbar. Wie hast du es denn versucht?

  • Ah, dann ist ja alles klar. Dann kann das ja so bleiben, wenn's mit float nicht anders geht.


    Meine erste Herangehensweise an das Menü war, alle floats zu entfernen und das Ganze in eine Flexbox umzustrukturieren. Links das Logo, die Menüpunkte in einem eigenen DIV, die beiden auf space-between und das Menüpunkt-DIV nochmal auf space-between. Das hat für Großbildschirme auch funktioniert, fürs Handy dann aber nicht mehr, da war dann alles verschoben. Also hab ich wieder von vorne angefangen und nur das Design geändert, nicht aber die Struktur.