Linien sind verschoben

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

Skyfay

Mitglied
21 März 2020
76
0
6
17
Moin,

Ich habe das Problem, dass bei mir Linien verschoben sind obwohl es eigentlich stimmen müsste.

Hier ist der Link: https://skyfay.ch/youtube/youtube.html

Oben sitzt alles in der Mitte aber unten ist es leicht verschoben.

Vielen Dank schonmal für eure Hilfe.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.102
407
83
67
Dieses Layout lässt sich viel besser mit Flex realisieren, dann stimmt es auch mit den Linien:
Code:
#video1 {
    /* grid-template-rows: 100px 1fr 100px; */
    /* grid-template-columns: 33% 33% 33%; */
    /* position: relative; */
    overflow: hidden;
    /* left: 110px; */
    /* bottom: 0px; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

hr {
    margin: 0.5em 0;
    align-self: stretch;
}
 
  • Love
Reaktionen: Skyfay

Skyfay

Mitglied
21 März 2020
76
0
6
17
Dieses Layout lässt sich viel besser mit Flex realisieren, dann stimmt es auch mit den Linien:
Code:
#video1 {
    /* grid-template-rows: 100px 1fr 100px; */
    /* grid-template-columns: 33% 33% 33%; */
    /* position: relative; */
    overflow: hidden;
    /* left: 110px; */
    /* bottom: 0px; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

hr {
    margin: 0.5em 0;
    align-self: stretch;
}
Irgendwie sieht es jetzt noch komischer aus:smile:

https://skyfay.ch/youtube/youtube.html
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.102
407
83
67
Das liegt daran, dass Du noch relative Positionierung und left: 110px; drin hast, wenn ich das deaktiviere, ist alles OK:
CSS:
#video1 {
    grid-template-rows: 100px 1fr 100px;
    grid-template-columns: 33% 33% 33%;
    /* position: relative; */
    overflow: hidden;
    /* left: 110px; */
    /* bottom: 0px; */
    display: flex;
    flex-direction: column;
    align-items: center;
}
 

Skyfay

Mitglied
21 März 2020
76
0
6
17
Ah Oke und empfhielst du es so wegen mobil bzw wenn man die Auflösung ändert oder kann ich da auch wieder 3 nebeneinander setzen?
 

Skyfay

Mitglied
21 März 2020
76
0
6
17
Ja eigentlich schon.
Und vielleicht so dass es halt auf Mobile nur 1. ist wie jetzt wenn das geht.
Meine Seite ist allgemein sehr mobile untauglich da muss ich mich irgendwie noch einlesen wie man das machen sollte...
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.102
407
83
67
Ich habe mal das Ganze etwas überarbeitet und dabei auch Fehler im HTML behoben. Ich habe es doch mit Grid gemacht, weil ich den Eindruck hatte, dass es damit einfacher ist, die Umschaltung zwischen den Varianten mit Mediaqueries zu realisieren. Und weil mein Bildschirm nicht breit genug war, habe ich nur zwei Videos nebeneinander gesetzt. Du kannst es ja mit einer weiteren Mediaquery auf drei erweitern.
Den Header könnte man auch sehr gut mit Flexlayout gestalten und damit auf absolute Positionierung verzichten, aber ich wollte nicht noch eine Baustelle aufmachen.

CSS, nur für die Videos und Überschriften:
CSS:
/* #video1 {
    grid-template-rows:100px 1fr 100px;
    grid-template-columns:33% 33% 33%;
   
    overflow: hidden;
   
    display: flex;
    flex-direction: column;
    align-items: center;
}
hr {
    margin: 0.5em 0;
    align-self: stretch;
} */

main {
    text-align: center;
}
.video-wrapper {
    display: inline-grid;
    grid-template-columns: auto auto;
}

@media (max-width: 1200px) {
    .video-wrapper {
        grid-template-columns: auto;
    }
}
HTML, ebenfalls nur für die Videos und Überschriften:
HTML:
    <main>
        <h3>New</h3>
        <div class="video-wrapper">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/t1RoBO9fuCU" frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>

            <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/LMlcTxq6tLM" frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>

            <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/BKwETmAAUVs" frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>

            <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/y_hcwNiqaBw" frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>

            <iframe width="560" height="315" src="https://www.youtube.com/embed/ZXeHdan87pI" frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>

            <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/zwPKJIGEHN8" frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
        </div>
        <h3>Fortnite</h3>
        <div class="video-wrapper">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/t1RoBO9fuCU" frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>

            <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/LMlcTxq6tLM" frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>

            <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/BKwETmAAUVs" frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>

            <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/y_hcwNiqaBw" frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>

            <iframe width="560" height="315" src="https://www.youtube.com/embed/ZXeHdan87pI" frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>

            <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/zwPKJIGEHN8" frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>

        </div>
    </main>
 

Skyfay

Mitglied
21 März 2020
76
0
6
17
Vielen Danke für dienen Aufwand es sieht super aus...
Kannst du mir ne empfehlung wie ich die anderen seiten auch gestallten sollte, dass es für Mobile besser passt?
Z.b auf der Startseite die knöpfe oben sind auf dem Handy zusammengedrückt und es steht gar nichts mehr drinnen.
Und bei z.b Music müsste ich auch noch was anpassen.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.102
407
83
67
Dass die Knöpfe zusammengequetscht sind und sich überlagern, sehe ich auch, allerdings ist die Schrift bei mir da. Welches Handy benutzt Du? Ich habe ein Samsung A50 und habe den Android-Browser benutzt.
Um das Zusammenquetschen zu vermeiden, benutzt man i. allg. ein Hamburger Menü, das sich erst beim Tipp auf das Hamburger-Symbol öffnet und wo dann die Menüpunkte untereinander stehen - hast Du sicher schon Mal gesehen. Habe so etwas gerade in einem anderen Thread gemacht, ich werde es heraus suchen.
 

Skyfay

Mitglied
21 März 2020
76
0
6
17
Ich nutze das Iphone 7+ und Safari.
 

Anhänge

  • FBA61B18-C8DA-46B3-86B8-85C93FFA8773.jpeg
    FBA61B18-C8DA-46B3-86B8-85C93FFA8773.jpeg
    247,5 KB · Aufrufe: 3
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.102
407
83
67
Ich habe das Hamburger-Menü jetzt heraus gesucht. Versuch mal, ob Du es auf dein Menü übertragen kannst. Am besten das umständliche Verfahren mit Formular und onclick durch ein einfaches a-href-Tag ersetzen:
Code:
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8" />
    <title>Menu</title>
    <style>
        ul.pop-up-menu {
            margin: 0 auto;
            padding: 2em;
            width: 60em;
            background-color: black;
            color: white;
        }

        ul {
            margin: 0px auto;
            padding: 0;
            list-style: none;
            display: flex;
            justify-content: center;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            font-size: 1.5em;
        }

        li {
            position: relative;
            padding: 15px 0;
            display: flex;
        }

        label.hamburger {
            position: relative;
            background: black;
            width: 50px;
            height: 50px;
            margin-left: 0;
            border-radius: 4px;
            transition: border-radius .5s;
            z-index: 500;
            display: none;
        }

        input.hamburger {
            display: none;
        }

        .line {
            position: absolute;
            left: 10px;
            height: 4px;
            width: 30px;
            background: whitesmoke;
            border-radius: 2px solid black;
            display: block;
            transition: 0.5s;
            transform-origin: center;
        }

        .line:nth-child(1) {
            top: 12px;
        }

        .line:nth-child(2) {
            top: 24px;
        }

        .line:nth-child(3) {
            top: 36px;
        }

        input.hamburger:checked~label.hamburger .line:nth-child(1) {
            transform: translateY(12px) rotate(-45deg);
        }

        input.hamburger:checked+label.hamburger .line:nth-child(2) {
            opacity: 0;
        }

        input.hamburger:checked+label.hamburger .line:nth-child(3) {
            transform: translateY(-12px) rotate(45deg);
        }

        input.hamburger:checked~div.pop-up-menu {
            display: block;
        }

        label.hamburger {
            display: none;
        }

        a {
            color: white;
            text-decoration: none;
            letter-spacing: 0.40em;
            display: inline-block;
            padding: 20px 20px;
        }

        a:after {
            bottom: 0;
            content: "";
            display: block;
            height: 2px;
            left: 50%;
            position: absolute;
            background: white;
            transition: width 0.3s ease 0s, left 0.3s ease 0s;
            width: 0;
            border-radius: 10px;
        }

        a:hover:after {
            width: 100%;
            left: 0;
        }

        @media screen and (max-width: 800px) {

            nav {
                background-color: black;
            }

            label.hamburger {
                display: inline-block;
            }

            nav ul.pop-up-menu {
                display: none;
                flex-direction: column;
                align-items: center;
                width: auto;
            }

            input.hamburger:checked~ul {
                display: flex;
            }
    </style>

</head>

<body>
    <nav>
        <input type="checkbox" class="hamburger" id="hamburger">
        <label for="hamburger" class="hamburger">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </label>
        <ul class="pop-up-menu">
            <li>
                <a href="#home">Home</a>
            </li>
            <li>
                <a href="#team">Teilnehmer</a>
            </li>
            <li>
                <a href="#register">Anmelden</a>
            </li>
            <li>
                <a href="#sponsoren">Partner</a>
            </li>
        </ul>
    </nav>
    <script>
        document.querySelectorAll('ul.pop-up-menu a').forEach((item, idx) => {
            item.addEventListener('click', (event) => {
                document.querySelector('input.hamburger').checked = false;
            });
        });
    </script>
</body>

</html>
 

Skyfay

Mitglied
21 März 2020
76
0
6
17
Kurz vorweg muss das unten im Body sein und nicht im Header bei mir?
Unten das Script gehört das dazu?
 

Skyfay

Mitglied
21 März 2020
76
0
6
17
Okey ich habe es gemacht wäre mal ein Anfang kann man natürlich optisch noch bisschen verbessern denke ich:
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.102
407
83
67
Sieht doch gut aus. Zwei Kleinigkeiten würde ich noch empfehlen:
  • Wenn der Viewport relativ schmal ist, verschwindet rechts ein Teil des Menüs. Das kannst Du leicht beheben, indem Du die feste Breite löschst.
  • IMO ist das Menü viel zu hoch und man verschenkt Platz. Besser das Padding löschen.
Code:
ul.pop-up-menu {
    margin: 0 auto;
    /* padding: 2em; */
    /* width: 60em; */
    background-color: black;
    color: white;
}
 

Skyfay

Mitglied
21 März 2020
76
0
6
17
Okey Danke.

Jetzt wegen der Farbe die ich hinzugefügt habe ist der effekt weg.

Dazu kann man irgendwie noch so nen Ring der nicht ganz quadratisch ist hinzufügen also von der form so wie es ganz am anfang war?

(Wahrscheinlich kommt da oben dann noch eines Hinzu aber das sollte ja kein Problem sein?)

 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.102
407
83
67
Ja, das geht mit border-radius:
CSS:
a {
    color: white;
    text-decoration: none;
    letter-spacing: 0.40em;
    display: inline-block;
    padding: 10px 20px;
    background-image: linear-gradient(90deg,blue,rgb(173, 45, 135),rgb(207, 103, 6),red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border: 2px solid orange;
    border-radius: 35px;
    margin: 0 5px;
}
 
  • Like
Reaktionen: Skyfay

Skyfay

Mitglied
21 März 2020
76
0
6
17
Vielen Dank.

Und weist du warum die Animation nicht mehr funktoniert wenn ich das mit den farben mache?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.102
407
83
67
Auf der Youtube-Seite sehe ich eine Animation der Hintergrundfarbe der Menüpunkte. Meinst Du die?