Frage Neue Ebene zum runter scrollen.

Skyfay · 21 März 2021

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:

Bilder-Upload - Kostenlos Fotos hochladen und ins Netz stellen

Kostenlos Bilder hochladen. Bilder Upload ohne Anmeldung

www.bilder-upload.eu

Ich möchte das wie hier:

Bilder-Upload - Kostenlos Fotos hochladen und ins Netz stellen

Kostenlos Bilder hochladen. Bilder Upload ohne Anmeldung

www.bilder-upload.eu

Also halt mehrere solche Ebenen sozusagen erstellen.

Ich hoffe ihr versteht, wie das gemeint ist.

Hier ist der HTML und CSS Code:

HTML:<!-- Version: 1.9 - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

pastebin.com

Danke schonmal für eure Hilfe.

Skyfay · 21 März 2021

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.

Skyfay · 21 März 2021

Sempervivum schrieb:
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".

Skyfay · 21 März 2021

Genau so hab ich mir das vorgestellt.

Skyfay · 21 März 2021

Also muss ich einfach komplett den body Teil löschen und bei .container statt "background: linear-gardient" das Bild einfügen?

Skyfay · 21 März 2021

Dann sieht es so aus:

Bilder-Upload - Kostenlos Fotos hochladen und ins Netz stellen

Kostenlos Bilder hochladen. Bilder Upload ohne Anmeldung

www.bilder-upload.eu

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:

Bilder-Upload - Kostenlos Fotos hochladen und ins Netz stellen

Kostenlos Bilder hochladen. Bilder Upload ohne Anmeldung

www.bilder-upload.eu

Skyfay · 21 März 2021

Bilder-Upload - Kostenlos Fotos hochladen und ins Netz stellen

Kostenlos Bilder hochladen. Bilder Upload ohne Anmeldung

www.bilder-upload.eu

Also je mehr ich einfüge, desto weiter geht es nach rechts obwohl es nach unten sollte.

HTML:<!-- Version: 1.9 - - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

pastebin.com

Skyfay · 21 März 2021

Bilder-Upload - Kostenlos Fotos hochladen und ins Netz stellen

Kostenlos Bilder hochladen. Bilder Upload ohne Anmeldung

www.bilder-upload.eu

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.

HTML:<!DOCTYPE html><html><head> <!-- Info meta tags, important for soci - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

pastebin.com

Skyfay · 21 März 2021

Sempervivum schrieb:

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:

Bilder-Upload - Kostenlos Fotos hochladen und ins Netz stellen

Kostenlos Bilder hochladen. Bilder Upload ohne Anmeldung

www.bilder-upload.eu

HTML:<!DOCTYPE html><html><head> <!-- Info meta tags, important for so - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

pastebin.com

Und mein Logo ist weg.

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

Skyfay · 21 März 2021

Sempervivum schrieb:
Das war mein Fehler, siehe mein Posting #17

Jetzt muss es noch etwas breiter werden, dann stimmt es perfekt.

Skyfay · 21 März 2021

Bilder-Upload - Kostenlos Fotos hochladen und ins Netz stellen

Kostenlos Bilder hochladen. Bilder Upload ohne Anmeldung

www.bilder-upload.eu

Also das Bild streckt sich gerade nicht nach ganz aussen.

Skyfay · 21 März 2021

Sempervivum schrieb:
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?

Skyfay · 21 März 2021

Bilder-Upload - Kostenlos Fotos hochladen und ins Netz stellen

Kostenlos Bilder hochladen. Bilder Upload ohne Anmeldung

www.bilder-upload.eu

Wenn man die Seite breit aber nicht so hoch macht, passiert das oben auf dem Bild.

Gibt es da eine Möglichkeit das zu verhindern?

Dazu eventuell auch für das Handy etwas anzupassen?

Skyfay · 21 März 2021

Super Danke!

Skyfay · 22 März 2021

Sempervivum schrieb:
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.

Bilder-Upload - Kostenlos Fotos hochladen und ins Netz stellen

Kostenlos Bilder hochladen. Bilder Upload ohne Anmeldung

www.bilder-upload.eu

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

HTML:<!DOCTYPE html><html><head> <!-- Info meta tags, important for so - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

pastebin.com

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.

Skyfay · 22 März 2021

Also aktuell sieht es bei mir so aus:

HTML:<!DOCTYPE html><html><head> <!-- Info meta tags, important for soci - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

pastebin.com

Skyfay · 22 März 2021

Synology Drive

drive.skyfay.ch

Hier ist alles, HTML, CSS, JS und die Bilder.

Da kannst du oben auf herunterladen klicken, und dann sollte es so aussehen wie bei mir.

Skyfay · 22 März 2021

, gibt es dafür eine Lösung?

Skyfay · 22 März 2021

Wenn ich das mache, dann sind die Icons bei mir irgendwie ganz komisch und extrem klein.

Ich glaube, dass ich grad einiges falsch mache

Skyfay · 22 März 2021

Sempervivum schrieb:
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.

Frage Neue Ebene zum runter scrollen.

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied