Frage Neue Ebene zum runter scrollen.

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

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
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.
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
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.
 
Werbung:

Skyfay

Mitglied
21 März 2020
111
0
16
18
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

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
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.
Code:
.items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    max-width: 800px;
    width: 90%;
}
 
  • Like
Reaktionen: Skyfay
Werbung:

Skyfay

Mitglied
21 März 2020
111
0
16
18
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.


Javascript:
            <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

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
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:
Code:
.items div {
    text-align: center;
}
 
  • Like
Reaktionen: Skyfay

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
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:
skyfay-handy.jpg
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.
 
  • Like
Reaktionen: Skyfay
Werbung:

Skyfay

Mitglied
21 März 2020
111
0
16
18
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?
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
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:
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

Mitglied
21 März 2020
111
0
16
18
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:
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?
 
Werbung:

Skyfay

Mitglied
21 März 2020
111
0
16
18
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

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
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.
 
  • Like
Reaktionen: Skyfay
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Das liegt sehr wahrscheinlich an der URL des Hintergrundbildes:
Code:
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

Mitglied
21 März 2020
111
0
16
18
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.
 
Werbung: