Frage Neue Ebene zum runter scrollen.

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Skyfay

Mitglied
21 März 2020
111
0
16
18
Ich bin mal wieder in der HTML+CSS Welt unterwegs und arbeite an einer neuen Website.
Nun habe ich den ersten Teil erstmal fertig und möchte gerne herunter scrollen und da einen neuen Bereich haben.
Aber wie mach ich das?

Wenn ich einen Text einfüge, dann wird das Bild geteilt und rechts steht der Text eingequetscht.

Aktuell ist es so:

Ich möchte das wie hier:

Also halt mehrere solche Ebenen sozusagen erstellen.

Ich hoffe ihr versteht, wie das gemeint ist.

Hier ist der HTML und CSS Code:

Danke schonmal für eure Hilfe.
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
Mal sehen ob ich dich richtig verstehe: Du möchtest, dass das große Bild kein Hintergrund ist, der dann von den anderen Elementen überlagert wird, sondern dass das große Bild als erstes allein kommt und darunter dann die anderen Elemente, so dass sie beim Scrollen sichtbar werden?
 

Skyfay

Mitglied
21 März 2020
111
0
16
18
Jain, das Bild soll im Hintergrund bleiben.
Allerdings soll unter dem Bild dann eine weisse Fläche kommen, wo ich einen Text rein schreiben kann und danach eventuell noch weitere Ebenen mit Text und Bildern etc.
 
Werbung:

Skyfay

Mitglied
21 März 2020
111
0
16
18
Auf dem Screenshot, wie es sein soll, sehe ich aber oben nur das Bild ohne Elemente, die es überlagern?
Ja, da das Bild abgeschnitten ist. Da ist darüber auch noch etwas. Ich habe da zum veranschaulichen etwas runter gescrollt.
Es soll halt erstaml das Bild im Hintergrund und und der "Inhalt" da sein und dann soll man runter scrollen können und da sind dann weitere "ebenen".
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
Das heißt, es soll schon noch Elemente geben, die das Bild überlagern, aber zusätzlich soll darunter die weiße Fläche mit "About us" und weiter darunter ein Bereich mit hellblauem Hintergrund und weiteren Element darauf?
 
  • Like
Reaktionen: Skyfay
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
OK, dann ist die Lösung ja sehr einfach: Statt body den Hintergrund zu geben, gibst Du den Hintergrund nur dem Container, also statt diesem:
Code:
        body {
            /*Want to change background image?*/
            /*Upload a new one to the img folder.*/
            /*Make sure you name it 'minecraft.jpg'*/
            background: linear-gradient(rgba(20, 26, 35, 0.55), rgba(20, 26, 35, 0.55)),
                url("images/dia0.jpg") no-repeat center center fixed;
            background-size: cover;
            font-family: "Open Sans", Helvetica;
            margin: 0;
            position: relative;
            box-sizing: border-box;
        }
dieses:
Code:
        .container {
           /* Der Container soll die Höhe des Browserfensters annehmen */
           height: 100vh;
            /*Want to change background image?*/
            /*Upload a new one to the img folder.*/
            /*Make sure you name it 'minecraft.jpg'*/
            background: linear-gradient(rgba(20, 26, 35, 0.55), rgba(20, 26, 35, 0.55)),
                url("images/dia0.jpg") no-repeat center center fixed;
            background-size: cover;
            font-family: "Open Sans", Helvetica;
            margin: 0;
            position: relative;
            box-sizing: border-box;
        }
Und dann im HTML die zusätzlichen Elemente nach dem Container einfügen:
Code:
<body>
    <div class="container">
    <!-- hier die Elemente im Container -->
    </div>
    <section>
        <h2>About aus</h2>
        <p>
             My server is a ... usw.
        </p>
    </section>
    <!-- hier dann weitere Inhalte -->
</body>
 
Zuletzt bearbeitet:

Skyfay

Mitglied
21 März 2020
111
0
16
18
Also muss ich einfach komplett den body Teil löschen und bei .container statt "background: linear-gardient" das Bild einfügen?
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
Im CSS ja, im HTML muss <body> natürlich drin bleiben. Und den zweiten Abschnitt für html und body im CSS musst Du auch beibehalten:
Code:
html, body {
    width: 100vw;
    /* Dieses kann entfallen, da sich die Hoehe jetzt
    nach dem Inhalt richten soll:*/
    /* height: 100vh; */
    overflow-x: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
 

Skyfay

Mitglied
21 März 2020
111
0
16
18
Dann sieht es so aus:


CSS:
.container {
    text-align: center;
    background: linear-gradient(rgba(20, 26, 35,0.55),rgba(20, 26, 35, 0.55)),
                url("../img/minecraft.png") no-repeat center center fixed;
    background-size: cover;
    font-family: "Open Sans", Helvetica;
    margin: 0;
    position: relative;
    box-sizing: border-box;
}

Wenn ich width: 100% und height: 100% einstelle, dann habe ich auf beiden Seiten noch einen kleinen weissen Rand.

Und wenn ich unten noch einen Text dazu mache passiert das:
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
Das müsste man jetzt im Zusammenhang sehen. Lade es doch Mal hoch und poste die URL.
Ich hatte das so verstanden, dass auf das Bild mit den Icons "Regeln", "Store" ... noch mehr kommen sollte?
 
Werbung:

Skyfay

Mitglied
21 März 2020
111
0
16
18

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
Das hatte ich noch nicht bemerkt, dass Du beim body display: flex; hattest. Dadurch ist die Lösung einfach, Du brauchst nur flex-direction: column; hinzu zu fügen:
Code:
html, body {
    width: 100vw;
    /* height: 100vh; */
    overflow-x: hidden;
    /* display: -webkit-box;
    display: -ms-flexbox; */
    display: flex;
    /* -webkit-box-pack: center; */
    /* -ms-flex-pack: center; */
    justify-content: center;
    /* -webkit-box-align: center;
    -ms-flex-align: center; */
    align-items: center;
    flex-direction: column; /* <--- */
}
Und diese Regeln mit Prefixes, die ich auskommentiert habe, brauchst Du nicht mehr.
 

Skyfay

Mitglied
21 März 2020
111
0
16
18
Jetzt müsste der Rand oben noch weg, und das erste Bild müsste komplett den Bildschrim verdecken.
Erst wenn man runter scrollt, sollte man dann das weisse sehen.

 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
Ich bin der Meinung, dass Du mit dem Hintergrundbild besser bedient warst. Prüfe, ob dies so aussieht, wie Du es dir vorstellst:

CSS:
        html,
        body {
            margin: 0;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        a {
            text-decoration: none;
        }

        p {
            margin: 0;
            padding: 3px;
        }

        .container {
            align-self: stretch;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: linear-gradient(rgba(20, 26, 35, 0.55), rgba(20, 26, 35, 0.55)),
                url("../img/minecraft.png") no-repeat center center fixed;
            height: 100vh;
            background-size: cover;
            font-family: "Open Sans", Helvetica;
            margin: 0;
            position: relative;
            box-sizing: border-box;
        }

        @-webkit-keyframes logo {
/* usw. */
HTML:
<body>
    <div class="container">
        <!-- <div class="logo"> -->
        <!-- In the img folder, upload your logo -->
        <!-- Make sure you name it 'logo.png' -->
        <!-- <img src="img/logo.png" alt="MyServer logo"> -->
        <!-- </div> -->

        <div class="items">
            <!-- Regeln-->
            <a href="#" class="item forums">
                <div>
                    <img src="img/forums.png" alt="Minecraft forums icon" class="img">
                    <p class="subtitle">Lese hier die</p>
                    <p class="title">Regeln</p>
                </div>
            </a>

            <!-- Store -->
            <a href="https://store.skycraft.one" class="item store">
                <div>
                    <img src="img/store.png" alt="Minecraft store icon" class="img">
                    <p class="subtitle">Hier ist unser</p>
                    <p class="title">Store</p>
                </div>
            </a>

            <!-- Voting -->
            <a href="" class="item vote">
                <div>
                    <img src="img/vote.png" alt="Minecraft voting icon" class="img">
                    <p class="subtitle">Supporte uns mit</p>
                    <p class="title">Voting</p>
                </div>
            </a>

            <!-- Server Status -->
            <a href="https://status.skycraft.one" class="item vote">
                <div>
                    <img src="img/status.PNG" alt="Minecraft voting icon" class="img">
                    <p class="subtitle">Hier siehst du unseren</p>
                    <p class="title">Server Status</p>
                </div>
            </a>

        </div>

        <div class="playercount">
            <!-- Replace play.myserver.net with your IP address -->
            <!-- Do it for both examples below -->
            <!-- Please set both your IP and port -->
            <p>Spiele mit <span class="sip" data-ip="play.skycraft.one" data-port="25565">
                    0</span> anderen spielern auf <span class="ip">play.skycraft.one</span></p>

        </div>
    </div>
    <div class="main-content">
<!-- usw. -->
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
PS: Da habe ich jetzt etwas übersehen: Dieses Bild war nicht der Hintergrund sondern der Schriftzug oben, sorry. Das muss also drin bleiben.
 

Skyfay

Mitglied
21 März 2020
111
0
16
18
Ich bin der Meinung, dass Du mit dem Hintergrundbild besser bedient warst. Prüfe, ob dies so aussieht, wie Du es dir vorstellst:

CSS:
        html,
        body {
            margin: 0;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        a {
            text-decoration: none;
        }

        p {
            margin: 0;
            padding: 3px;
        }

        .container {
            align-self: stretch;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: linear-gradient(rgba(20, 26, 35, 0.55), rgba(20, 26, 35, 0.55)),
                url("../img/minecraft.png") no-repeat center center fixed;
            height: 100vh;
            background-size: cover;
            font-family: "Open Sans", Helvetica;
            margin: 0;
            position: relative;
            box-sizing: border-box;
        }

        @-webkit-keyframes logo {
/* usw. */
HTML:
<body>
    <div class="container">
        <!-- <div class="logo"> -->
        <!-- In the img folder, upload your logo -->
        <!-- Make sure you name it 'logo.png' -->
        <!-- <img src="img/logo.png" alt="MyServer logo"> -->
        <!-- </div> -->

        <div class="items">
            <!-- Regeln-->
            <a href="#" class="item forums">
                <div>
                    <img src="img/forums.png" alt="Minecraft forums icon" class="img">
                    <p class="subtitle">Lese hier die</p>
                    <p class="title">Regeln</p>
                </div>
            </a>

            <!-- Store -->
            <a href="https://store.skycraft.one" class="item store">
                <div>
                    <img src="img/store.png" alt="Minecraft store icon" class="img">
                    <p class="subtitle">Hier ist unser</p>
                    <p class="title">Store</p>
                </div>
            </a>

            <!-- Voting -->
            <a href="" class="item vote">
                <div>
                    <img src="img/vote.png" alt="Minecraft voting icon" class="img">
                    <p class="subtitle">Supporte uns mit</p>
                    <p class="title">Voting</p>
                </div>
            </a>

            <!-- Server Status -->
            <a href="https://status.skycraft.one" class="item vote">
                <div>
                    <img src="img/status.PNG" alt="Minecraft voting icon" class="img">
                    <p class="subtitle">Hier siehst du unseren</p>
                    <p class="title">Server Status</p>
                </div>
            </a>

        </div>

        <div class="playercount">
            <!-- Replace play.myserver.net with your IP address -->
            <!-- Do it for both examples below -->
            <!-- Please set both your IP and port -->
            <p>Spiele mit <span class="sip" data-ip="play.skycraft.one" data-port="25565">
                    0</span> anderen spielern auf <span class="ip">play.skycraft.one</span></p>

        </div>
    </div>
    <div class="main-content">
<!-- usw. -->
Jetzt stimmt alles, nur die Breite noch nicht:



Und mein Logo ist weg.

Edit: Ah, das Logo hab ich wieder.
Habe es ausversehen entfernt.
 
Werbung:
Werbung: