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

Frage Neue Ebene zum runter scrollen.

Skyfay

Mitglied
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:
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.
 
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".
 
Werbung:
Also muss ich einfach komplett den body Teil löschen und bei .container statt "background: linear-gardient" das Bild einfügen?
 
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:
Werbung:
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.

 
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:
Das liegt daran, dass ich für body align-items: center; definiert hatte. Für den Container habe ich dies jedoch mit align-self: stretch; umgeändert, so dass dieser Container die volle Breite einnimmt. Ich habe dein letztes Pastebin in eine Testseite kopiert und dort habe ich keine Ränder. Hast Du bei dir auch das align-self: stretch; drin?
Ah, Vielen Dank!
Jetzt sieht es gut aus.
Hast du mir eventuell noch Tipps, für Gestaltung etc.
Gibt es da gute Turtorials oder sonstiges?
 
Werbung:
Ich nehme an mit der Anpassung für das Handy meinst Du, dass die Items bei schmalem Browserfenster nicht mehr hinein passen? Dafür gibt es mehrere Lösungen, die einfachste ist, dass wir den Zeilenumbruch für Flex zulassen:
Code:
        .items {
            display: flex;
            /* Zeilenumbruch zulassen: */
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 18px 0 10px 0;
        }

        .item {
            flex: 1 0 auto;
        }
Das funktioniert sehr gut!
Allerdings wenn ich das mache wird eines der Bilder extrem gross.


Ich bin weiss leider auch nicht genau woran das liegt.
Wenn ich das Fenster kleiner mache, dann wird dieses eine Bild auch kleiner.


Die Icons auf der ersten Seite stimmen auch nicht mehr genau.

So sollte es sein: https://www.bilder-upload.eu/bild-a5ee8c-1616414717.png.html

So sieht es aktuell aus: https://www.bilder-upload.eu/bild-202be5-1616414749.png.html

Die Icons sind da irgendwie bisschen zu weit rechts.
 
Zuletzt bearbeitet:
Werbung:
Werbung:
Wenn ich das mache, dann sind die Icons bei mir irgendwie ganz komisch und extrem klein.

Ich glaube, dass ich grad einiges falsch mache o_O
 
Bei mir sieht das ganz gut aus, nur bei knapp über 1000px Breite sind die mittleren beiden Icons zu klein:
Anhang anzeigen 5550
Das liegt dann am Margin, deaktiviere ich das, sind sie gleich groß:
Code:
@media (min-width: 1000px)
.item:not(:first-child) {
    /* margin-left: 90px; */
}
@media (min-width: 1000px)
.item:not(:first-child) {
    /* margin-left: 90px; */
}
Ah, jetzt sieht es sehr gut aus.
Mir ist aber aufgefallen, dass wenn ich es klein mache unten alle Formatierungen weg sind.
 
Zurück
Oben