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.

.banner{
  background:url("../images/colorsplash01b.jpg") no-repeat;
  height:calc(100vh - 50px);
  background-size:cover;
  background-position:center;
  background-attachment:scroll;
  margin-top:50px;
  display:flex;
  align-items:center;
  justify-content:center;
}

<nav class="navbar">
        <div class="nav-content">
            <div class="logo">
                <a href="index.html"><img class="md_logo" src="images/md_logo.png"><img class="md_logo_text" src="images/md_logo_text.png"></a>
            </div>
            
            <ul class="menu-list">
                <div class="icon cancel-btn">
                    <i class="fas fa-times"></i>
                </div>
                <li><img class="md_logo_text" src="images/md_logo_text.png"></li>
                <li><a href="uebermich.html">Über&nbsp;mich</a></li>
                <li><a href="web.html">Webdesign</a></li>
                <li><a href="print.html">Printdesign</a></li>
                <li><a href="foto.html">Fotografie</a></li>
                <li><a href="kontakt.html">Kontakt</a></li>
            </ul>
            
            <div class="icon menu-btn">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </nav>
    
    <div class="banner"></div>

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

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.