Float box design + script fehler suche.

Die Nav bar ist so aber noch nicht fix
Das liegt daran, dass jetzt body gescrollt wird und nicht main. Für einen fixierten Header gibt es zwei Möglichkeiten:
1. So wie wir es vorher hatten: Scrolling nur auf main. Vorteil: Das ganze Layout passt sich automatisch an, wenn sich die Höhe des Header ändert und ist damit responsiv. Nachteil: Es ist ungewohnt, dass die Scrollbar nur über main geht; aber auf der anderen Seite auch logisch, weil die Navbar ja gar nicht gescrollt wird.
2. Die althergebrachte Lösung: Nav mit position: fixed; fixiert. Damit sie dann nicht die anderen Inhalte überdeckt, muss man dem main ein festes margin-top geben. Darin besteht auch der Nachteil dieser Lösung: Sie ist nicht responsiv, denn wenn sich die Höhe der Navbar ändert, passt sich dieses Margin nicht an.
 
Zuletzt bearbeitet:
Das liegt daran, dass jetzt body gescrollt wird und nicht main. Für einen fixierten Header gibt es zwei Möglichkeiten:
1. So wie wir es vorher hatten: Scrolling nur auf main. Vorteil: Das ganze Layout passt sich automatisch an, wenn sich die Höhe des Header ändert und ist damit responsiv. Nachteil: Es ist ungewohnt, dass die Scrollbar nur über main geht; aber auf der anderen Seite auch logisch, weil die Navbar ja gar nicht gescrollt wird.
2. Die althergebrachte Lösung: Nav mit position: fix; fixiert. Damit sie dann nicht die anderen Inhalte überdeckt, muss man dem main ein festes margin-top geben. Darin besteht auch der Nachteil dieser Lösung: Sie ist nicht responsiv, denn wenn sich die Höhe der Navbar ändert, passt sich dieses Margin nicht an.
Achso etz verstehe ich das. Ich mache es wider wie vorher also ich probieres selber al haha
 
Hay. Ich weiß nicht was ich falsch mache. Kriegs einfach ned hin mit dem parralax. (code auf der website ist aktuell).

habe deinen alten Beitrag angeschaut und verstehe das so dass sich alles im script nich auf eine id oder class sondern aufs element bezieht. also müsste ich doch keine klasse zuweisen?

Javascript:
(function () {
            var parallax = document.querySelectorAll("body"),
                speed = -0.8;
            var vnav = document.querySelector('nav'),
                deltaScrollPos = 10;
            // main ist doch ned auf class="main" sondern <main> bezogen?:
            vmain = document.querySelector('main');
            vmain.addEventListener('scroll', () => {
                var scrollPos = vmain.scrollTop;
                [].slice.call(parallax).forEach(function (el, i) {
                    var elBackgrounPos = "50% " + (scrollPos * speed) + "px";
                    el.style.backgroundPosition = elBackgrounPos;
                });
                if (scrollPos < deltaScrollPos)
                    vnav.classList.remove('scrolled');
                else
                    vnav.classList.add('scrolled');
            });
        })();
 
verstehe das so dass sich alles im script nich auf eine id oder class sondern aufs element bezieht.
Genau, es wird nur der Tagname als Selektor benutzt, keine Klasse und keine ID. Für das Parallax ist diese Zeile maßgeblich:
vmain = document.querySelector('main');
Dort wird die Scrollposition abgefragt und dort muss gescrollt werden.
 
Genau, es wird nur der Tagname als Selektor benutzt, keine Klasse und keine ID. Für das Parallax ist diese Zeile maßgeblich:
vmain = document.querySelector('main');
Dort wird die Scrollposition abgefragt und dort muss gescrollt werden.

also dann habe ich das richtig verstanden. was habe ich denoch falsch das es nicht funktioniert?

Kurtz ne frage zwischen durch würde es nicht mehr sin machen anstatt die container einzeln zu zentrieren einfach dem main bzw section vorgeben alles zu zentrieren was drin ist?

und brauche ich überhaupt ein main und eine section?
 
Zuletzt bearbeitet:
Kurtz ne frage zwischen durch würde es nicht mehr sin machen anstatt die container einzeln zu zentrieren einfach dem main bzw section vorgeben alles zu zentrieren was drin ist?
Selbstverständlich, mit
Code:
main {
    display: flex;
    flex-directon: column;
    align-items: center;
}
kannst Du sie problemlos zentrieren.
 
Hier die max width
CSS:
h1 {
             text-align: center;
            padding: 1em;
            width: 100em;
            max-width: 60%;
            font-family: Bahnschrift SemiBold;
            font-size: 4em;
            font-weight:900;
            text-transform: uppercase;
            letter-spacing: 0.5em;
            mix-blend-mode: screen;
            margin: 0em auto;
            background-color: rgba(255,255,255,1.00);
}
 
Zurück