Frage Neue Ebene zum runter scrollen.

[Sempervivum]

Die Feinheiten kannst Du noch justieren, indem Du die Umschaltpunkte der Mediaqueries veränderst und die Breite des Icon-Containers .icon. Z. B. auf 80% setzen, dann ist links und rechts etwas Platz und die äußeren Icons hängen nicht so am Rand.

 

[Skyfay]

Mir ist aber aufgefallen, dass wenn ich es klein mache unten alle Formatierungen weg sind.

Oder hab ich jetzt etwas gelöscht, was ich nicht löschen sollte?

Ich glaube unter 600 sind unten alle Formatierungen weg.

 

[Sempervivum]

Der Bereich unterhalb des dunklen Hintergrundes mit den Icons ist bei mir in Ordnung und gut formatiert, auch bei schmalem Fenster. Allerdings hatte ich, um es schnell testen zu können, das neue CSS mit dem Grid ganz unten in die CSS-Datei nur eingefügt und alles andere gelassen. Das ist natürlich keine Dauerlösung.
Ich vermute, Du hast da etwas gelöscht, was dort noch gebraucht wird.

 

[Skyfay]

Wäre es möglich, dass du mir deine Version schicken kannst?

 

[Skyfay]

Ah, jetzt hab ich es hinbekommen.

Aktuell gehen die Items am einer bestimmten breite nicht mehr weiter auseinander.
Kann man das eventuell wieder aktivieren?

 

[Sempervivum]

Aktuell gehen die Items am einer bestimmten breite nicht mehr weiter auseinander.
Kann man das eventuell wieder aktivieren?

Das war Absicht von mir, weil ich dachte, dass sie sonst zu groß werden: Die Breite des Item-Containers wird begrenzt mit max-width. Wenn Du das nicht möchtest, kannst Du es heraus nehmen.

.items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    max-width: 800px;
    width: 90%;
}

 

[Skyfay]

Ah, Danke ja ich habe es noch ein bisschen grösser geamcht.

Drei Dinge:

1. Die Bilder ganz oben sind nicht genau über dem Text, könnte man das eventuell auch noch etwas verschieden?

2. Wo genau müsste ich diese 80% einstezen, dass die Bilder oben auf dem Handy in der Mitte sind, da die aktuell etwas weit links sind.

3. Ich habe einen Button (Auf dem Bild ganz oben "Voten"), wenn man da drauf klickt dann geht es mit einem Script eine gewisse Anzahl nach unten. Allerdings stimmt das auch nur wenn man das Fenster ganz offen hat.

            <script>
                button.onclick = function() {
                    window.scrollBy({ top: 1710, left: 0, behavior: "smooth" });
}
            </script>

Gibt es da eine bessere Möglichkeit das zu machen, dass man auf einen Knopf drücken kann und es immer an den richtigen Ort geht, egal welche Grösse das Fenster hat?

 

[Sempervivum]

1. Die Bilder ganz oben sind nicht genau über dem Text, könnte man das eventuell auch noch etwas verschieden?

Das liegt daran, dass die Texte linksbündig sind und in den Bildern außen etwas freier Raum. Wenn Du alles zentrierst, sieht es besser aus:

.items div {
    text-align: center;
}

 

[Sempervivum]

2. Wo genau müsste ich diese 80% einstezen, dass die Bilder oben auf dem Handy in der Mitte sind, da die aktuell etwas weit links sind.

Nachdem ich die Texte zentriert habe, ist alles absolut symmetrisch:

Möglicher Weise gibt es da irgend wo noch ein Padding oder Margin.
BTW: Bist Du schon mit dem HTML-Inspektor vertraut? Damit kannst Du dir einen sehr guten Überblick über das Layout verschaffen.

 

[Skyfay]

BTW: Bist Du schon mit dem HTML-Inspektor vertraut? Damit kannst Du dir einen sehr guten Überblick über das Layout verschaffen.

Nein, hab ich noch nie probiert. Habe das Problem gefunden und entfernt. Jetzt stimmt das bei mir auch.

 

[Sempervivum]

3. Ich habe einen Button (Auf dem Bild ganz oben "Voten"), wenn man da drauf klickt dann geht es mit einem Script eine gewisse Anzahl nach unten. Allerdings stimmt das auch nur wenn man das Fenster ganz offen hat.

Das geht am einfachsten mit einem Verweis auf einen Anker, siehe hier:

HTML/Tutorials/Links/Seiteninterne Verweise – SELFHTML-Wiki

wiki.selfhtml.org

 

[Skyfay]

Ich wollte am Anfang ganz oben statt diesem Bild ein Video mit Loop einfügen.
Ich habe es aber nicht hinbekommen.

Ist das wirklich so schwer oder hab ich mich da nur dumm angestellt.

Und macht es überhaupt Sinn, oder sollte man das nicht machen da die Website dann wesentlich länger laden muss?

 

[Sempervivum]

Normaler Weise unterbinden die Browser das Autoplay, d. h. der Benutzer müsste erst Mal auf einen Playbutton drücken, damit das Video startet.
Auch für Videos ist Selfhtml eine gute Anlaufstelle:

HTML/Tutorials/Multimedia/video – SELFHTML-Wiki

wiki.selfhtml.org

Die Befürchtung, dass die Website dadurch länger zum Laden braucht, ist unbegründet, da sie schon angezeigt wird, bevor das Video abgespielt wird. Das Video muss ja nicht erst vollständig herunter geladen werden, bevor es abgespielt werden kann, sondern der Browser lädt ein kleines Stück am Anfang und beginnt dann zu spielen. Der Rest wird dann kontinuierlich nachgeladen.

 

[Skyfay]

Normaler Weise unterbinden die Browser das Autoplay, d. h. der Benutzer müsste erst Mal auf einen Playbutton drücken, damit das Video startet.
Auch für Videos ist Selfhtml eine gute Anlaufstelle:

HTML/Tutorials/Multimedia/video – SELFHTML-Wiki

wiki.selfhtml.org

Die Befürchtung, dass die Website dadurch länger zum Laden braucht, ist unbegründet, da sie schon angezeigt wird, bevor das Video abgespielt wird. Das Video muss ja nicht erst vollständig herunter geladen werden, bevor es abgespielt werden kann, sondern der Browser lädt ein kleines Stück am Anfang und beginnt dann zu spielen. Der Rest wird dann kontinuierlich nachgeladen.

Ich habe mal nachgelesen, dass wenn man den Ton auf "mute" macht, dass es dann trotzdem automatisch starten sollte stimmt das?

 

[Sempervivum]

Da bin ich jetzt überfragt, musst Du austesten.

 

[Skyfay]

Das Video sollte halt als Hintergrund abgespielt werden.
Aktuell habe ich ja den Hintergrund im CSS Konfiguriert.
Ich glaube nicht, dass ich das mit dem Video da machen könnte oder?

So wie ich das gesehen habe ist das Turtorial für HTML.

 

[Sempervivum]

Ein Video kann zwar kein Hintergrund im Sinne von CSS sein, aber Du kannst das Video-Tag in den Container legen und die Icons mit absoluter Positionierung oder mit Gridlayout darüber, dann sieht man das Video im Hintergrund.

 

[Skyfay]

Die Seite ist jetzt Onlien: https://skycraft.one

Was mir noch aufgefallen ist, dass wenn ich die Seite auf dem Hand öffne ist das Bild weg.

Woran liegt das?

 

[Sempervivum]

Das liegt sehr wahrscheinlich an der URL des Hintergrundbildes:

linear-gradient(rgba(20, 26, 35, 0.55), rgba(20, 26, 35, 0.55)),
        url("../img/minecraft.png") no-repeat center center fixed

../ führt im Verzeichnisbaum eine Stufe höher, die HTML-Datei liegt jedoch schon im Root-Verzeichnis.

 

[Skyfay]

Ah, das Problem ist, dass auf dem Handy das Bild nur rechts oben in der Ecke zu sehen ist und da ist nur Himmel. Deswegen.