Problem mit Schrift

    Hallo liebes HTML Forum,

    ich habe vor ein ungefähr 2 Wochen mit HTML angefangen und bin nun bei CSS gelandet. Ich denke in HTML verstehe ich bereits die wichtigsten Befehle und kann diese auch schon einfügen.


    Nun habe ich mich an CSS gewagt... Irgendwie sah CSS anfangs sehr komplex aus... Nach ein paar Tagen Tutorials ansehen und Codes von Youtube Video kopieren, verstehe ich auch dort schon mehrere Befehle, kann diese teilweise auch schon einsetzten. Fehlen tut mir da aber sicher noch Einiges.


    Nun aber zu der meiner Frage. Ich habe mich in Parallax Scrolling verguckt. Ich finde teilweise die Art und Weise, wie man Dinge auf der Webseite darstellen kann einfach beeindruckend.


    Anfangs nehme ich aktuell ganz gerne Videos und schreibe den Code mit... Befehle die ich nicht kenne oder verstehe, bei diesen probiere ich entweder etwas herum oder schaue mir dazu Videos an oder lese sie mir auf selfhtml durch.


    So viel zum Thema, wie ich das ganze angehe.

    Externer Inhalt www.youtube.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.
    Diesen Code hier in diesem Video habe ich dann mal mitgeschrieben gestern.

    Nun habe ich aber ein Problem. Denn mein <h2>Moon Light<h2> ist bei mir über dem Hintergrund... Ich möchte das aber gerne wie auf dem Video haben.


    Vielleicht kann mir da jemand helfen? Ich habe im Github den HTML Code und das Stylesheet hochgeladen.


    https://github.com/Sol06/Parallax-Scrolling-Webseite


    LG

    Keine Screenshots hoch laden sondern die Einzelbilder, die hier in die img-Tags geladen werden:

    Code
            <section>
            <img src="stars.png" id="stars">
            <img src="moon.png" id="moon">
            <img src="mountains_behind.png" id="mountains_behind">
            <h2 id="text">Moon Light</h2>
            <a href="#sec" id="btn">Explore</a>
            <img src="mountains_front.png" id="mountains_front">
        </section>

    Die Erklärung und die Lösung ist relativ einfach: Durch den z-index hier:

    Code
    #text {
    position: absolute;
    right: -350px;
    color: #fff;
    white-space: nowrap;
    font-size: 7.5vw;
    /* z-index: 9; */
    overflow: hidden;
}

    wird die Schrift in den Vordergrund geholt. Deaktiviere ich das, wird sie wie gewünscht angeordnet, d. h. sie verschwindet hinter den Bergen im Vordergrund. Die Elemente werden so aufeinander gestapelt wie sie im HTML notiert sind, d. h. das letzte überdeckt die davor wo es nicht transparent ist. Jedenfalls dann wenn man diese Anordnung nicht durch z-index ändert.

    Meinst du, ich kann problemlos diese beiden Codes der beiden Videos hier unten auf die Webseite hinzufügen?


    Externer Inhalt www.youtube.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.


    Externer Inhalt www.youtube.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

    Kann ich die Body Befehle des 2. Videos auch in meinen Body schreiben oder muss ich dafür eine andere Klasse oder Id erstellen, um die Frage zu konkretisieren.

    Die body-Befehle des 2. Videos dienen dazu, die Buttons im Browserfenster mittig anzuordnen und ich denke mal, das ist nur bei der Demo wichtig. Also am besten weg lassen. Du hast ja wahrscheinlich andere Wünsche wo Du die Buttons hinlegen willst.


    Auch in der ersten Demo kannst Du die Bilder mit den Containern darum herum dort anordnen, wo Du es brauchst.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden