Float box design + script fehler suche.

[Sempervivum]

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.

 

[Andrin.Spitzer]

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

 

[Andrin.Spitzer]

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?

(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');
            });
        })();

 

[Sempervivum]

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.

 

[Andrin.Spitzer]

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?

 

[Sempervivum]

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

main {
    display: flex;
    flex-directon: column;
    align-items: center;
}

kannst Du sie problemlos zentrieren.

 

[Sempervivum]

brauche ich überhaupt ein main und eine section?

Nein, brauchst Du nicht, main ist ausreichend. Und dann dem main ein overflow-y: scroll; geben, dann sollte es auch mit dem Javascript funktionieren.

 

[Andrin.Spitzer]

Nein, brauchst Du nicht, main ist ausreichend. Und dann dem main ein overflow-y: scroll; geben, dann sollte es auch mit dem Javascript funktionieren.

Funktioniert.

Weiist du warum die % sicher anderst bei meinen h1 verhalten wie die div?

 

[Sempervivum]

Bei deinen h1 sehe ich nichts mit %.

 

[Andrin.Spitzer]

Hier die max width

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);
}