Float box design + script fehler suche.


Andrin.Spitzer

Erfahrenes Mitglied
Hay ich hatte erst gerade einen guten Beitrag hier im Forum wollte nun aber nach Überarbeitung des Quellcode nun neu anfangen.

Alter Beitrag

Meine Website

Was ich wissen möchte ist:

-Ist der Code so sauber und Regel komm-form? (bin Anfänger)
-Warum funktioniert mein Parralax scrolling effect nicht mehr.
-warum ändert die Nav leiste die Farbe nicht mehr und wie sollte ich sie fixieren am oberen ende?
-und wie bekomme ich mein Kontaktformular und download bereich etwa so hin.
Unbenannt.png

-und einfach mal gefragt wäre es möglich die <h1> elemente transparent zu gestalten das die schrift durch das weiße div Element das Hintergrundbild scheint?



Freundliche Grüsse
 

Sempervivum

Erfahrenes Mitglied
Positiv fällt mir schon mal auf, dass die riesige Überschrift nicht mehr da ist und man dadurch nicht mehr so viel scrollen muss.
Eigentlich ist die Überschrift schon OK, da man dann gleich sieht, worum es auf der Seite geht. Nur eben nicht so übergroß.

Aber warum hast Du denn alles über den Haufen geworfen? Skript und HTML müssen zusammen passen. Vorher wurde main gescrollt und mit der neuen Version body. Daher funktioniert das Javascript nicht mehr.
 

Andrin.Spitzer

Erfahrenes Mitglied
Positiv fällt mir schon mal auf, dass die riesige Überschrift nicht mehr da ist und man dadurch nicht mehr so viel scrollen muss.
Eigentlich ist die Überschrift schon OK, da man dann gleich sieht, worum es auf der Seite geht. Nur eben nicht so übergroß.

Aber warum hast Du denn alles über den Haufen geworfen? Skript und HTML müssen zusammen passen. Vorher wurde main gescrollt und mit der neuen Version body. Daher funktioniert das Javascript nicht mehr.
Hay danke für die antwort.

Mir wurde das ganze zu unübersichtlich. Habe mir daher einige informationen zusammen gesucht und das gerüst neu konstruiert. Ich glaube es wäre nicht gelogen wenn man sagt das ich mir so viel code gespart habe und es jetzt ein saubereren code ist.
 

Andrin.Spitzer

Erfahrenes Mitglied
Hay danke für die antwort.

Mir wurde das ganze zu unübersichtlich. Habe mir daher einige informationen zusammen gesucht und das gerüst neu konstruiert. Ich glaube es wäre nicht gelogen wenn man sagt das ich mir so viel code gespart habe und es jetzt ein saubereren code ist.
Ps: habe viel fon die gelernt. Wie du siehst habe ich deinen input soweit ich es hinbekommen habe widerverwendet.
 

Sempervivum

Erfahrenes Mitglied
Ich glaube es wäre nicht gelogen wenn man sagt das ich mir so viel code gespart habe und es jetzt ein saubereren code ist.
Das ist natürlich ein Grund. Selber bevorzuge ich auch das Prinzip "KISS"- "keep it simple and stupid". Häufig, wenn etwas sehr kompliziert wird, liegt es daran, dass man es noch nicht richtig verstanden hat.
Aus dem Grunde gefällt mir auch das Layout in deiner Grafik nicht so gut: Zu stark zergliedert. Aber wenn Du es so möchtest, werde ich mal daran gehen und es umzusetzen. Ebenso das Javascript wieder zum Laufen bringen.
 

Sempervivum

Erfahrenes Mitglied
Javascript funktioniert so:
Code:
    (function () {
        var parallax = document.querySelectorAll("body"),
            speed = -0.2;
        var vnav = document.querySelector('nav'),
            deltaScrollPos = 50;
        window.addEventListener('scroll', () => {
            var scrollPos = document.documentElement.scrollTop;
            [].slice.call(parallax).forEach(function (el, i) {
                var elBackgrounPos = "10% " + (scrollPos * speed) + "px";
                el.style.backgroundPosition = elBackgrounPos;
            });
            if (scrollPos < deltaScrollPos)
                vnav.classList.remove('scrolled');
            else
                vnav.classList.add('scrolled');
        });
    })();
 

Sempervivum

Erfahrenes Mitglied
Und mein Entwurf für das Kontakt-Layout:

CSS:
            .container-contact {
                display: flex;
            }

            .container-contact>div.left {
                flex: 2;
                display: grid;
                grid-template-columns: 1fr 2fr;
                grid-template-areas: "heading-text heading-text"
                    "name  message"
                    "email  message"
                    "phone message";
            }

            .container-contact>div.right {
                flex: 1;
            }

            .heading-text {
                grid-area: heading-text;
            }

            #name {
                grid-area: name;
            }

            #email {
                grid-area: email;
            }


            #phone {
                grid-area: phone;
            }

            #message {
                grid-area: message;
            }
HTML:
        <div class="container-contact">
            <div class="left">
                <p class="heading-text">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore et dolore
                    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    Stet clita kasd
                    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                <input name="name" id="name" placeholder="Name*" />
                <input name="email" id="email" placeholder="E-Mail*" />
                <input name="Tel" id="phone" placeholder="Tel" />
                <textarea name="text" id="message" placeholder="Nachricht..."></textarea>
            </div>
            <div class="right">

            </div>
        </div>
Den rechten Container kannst Du dann selbst versuchen.
 

Andrin.Spitzer

Erfahrenes Mitglied
Das ist natürlich ein Grund. Selber bevorzuge ich auch das Prinzip "KISS"- "keep it simple and stupid". Häufig, wenn etwas sehr kompliziert wird, liegt es daran, dass man es noch nicht richtig verstanden hat.
Aus dem Grunde gefällt mir auch das Layout in deiner Grafik nicht so gut: Zu stark zergliedert. Aber wenn Du es so möchtest, werde ich mal daran gehen und es umzusetzen. Ebenso das Javascript wieder zum Laufen bringen.
Hay danke für die hilfe.

Was sagst du sonst zum gerüst meiner seite? Besser wie der vorgänger?
 

Sempervivum

Erfahrenes Mitglied
Doch, das Parallax funktioniert, wenn man genau hinsieht. Damit der Effekt kräftiger wird, kannst Du den Faktor erhöhen:
Code:
        var parallax = document.querySelectorAll("body"),
            speed = -0.5; // <-- hier
 

Sempervivum

Erfahrenes Mitglied
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:

Andrin.Spitzer

Erfahrenes Mitglied
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

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

Sempervivum

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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:

Sempervivum

Erfahrenes Mitglied
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.
 

Andrin.Spitzer

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

Neue Beiträge