Linien sind verschoben

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

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.102
407
83
67
Was den Back-Button betrifft, das ist relativ einfach: Ändere das HTML so, dass es genau dem auf den anderen Seiten entspricht, also so:
Code:
<header>
    
    <ul class="pop-up-menu">
        <li>
            <a href="/seiten/music/music.html">Back</a>
        </li>
    </ul>
        
    <h1>Skyfay Playlist</h1>
    <hr>
    <h2>Es werden nur die ersten 100 Titel angezeigt. Für die ganze Playlist muss die Liste in Spotify geöffnet werden.</h2>
    <hr>
Dann kannst Du das CSS von der Startseite für die Nav direkt übernehmen.
Und dieses CSS:
Code:
ul.pop-up-menu {
    display: flex;
    justify-content: flex-start;
}
schiebt den Button dann nach links.

Im HTML-Inspektor getestet und funktioniert.
 
  • Like
Reaktionen: Skyfay

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.102
407
83
67
Tut mir leid, das war bei mir in Vergessenheit geraten. aber nichts leichter als das.Da sehe ich nur drei kleinere Boxen und es würde sich anbieten, diese nebeneinander anzuordnen:
Code:
.music-wrapper {
    display: -moz-inline-grid;
    grid-template-columns: auto auto auto;
    display: grid;
    justify-items: center;
}
soweit im HTML-Inspektor getestet.
Und mit einer Mediaquery umschalten:
Code:
    @media (max-width: 1200px) {
        .music-wrapper {
            grid-template-columns: auto;
        }
    }
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.102
407
83
67
Das lässt sich relativ leicht richten. Versuche dieses CSS:
Code:
html, body {
    min-height: 100%;
}
Code:
body {
    background-color: black;
    background-image: linear-gradient(black, rgba(161, 159, 159, 0.377));
    display: flex;
    flex-direction: column;
}
Code:
header {
    flex: 0 0 auto;
}
Code:
.music-wrapper {
    display: -moz-inline-grid;
    grid-template-columns: auto auto auto;
    display: grid;
    justify-items: center;
    flex: 1;
}
Hoffe, ich habe nichts vergessen :smile: Im HTML-Inspektor hat es funktioniert.
 
  • Like
Reaktionen: Skyfay

Skyfay

Mitglied
21 März 2020
76
0
6
17
Also bei mir hat es funktioniert aber als ich es hochgeladen hab und da ausprobiert habe hat es noch immer nicht funkioniert.
Ich muss mal schauen ob dich das richtige genommen habe...
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.102
407
83
67
Vielleicht ein Problem durch den Browser-Cache? Lade mal die Seite mit Strg+F5 neu.
 

Skyfay

Mitglied
21 März 2020
76
0
6
17
Mir ist noch ein kleiner Fehler aufgefallen.
Bei Youtube wird das ganze nicht zu einem Menu wenn man es klein macht...
Was müsste ich da anpassen?
 

Skyfay

Mitglied
21 März 2020
76
0
6
17
Ach und noch ne frage:
Ich möchte noch Radio hinzufügen und habe ja schon spotify.
Allerdings macht es einem die Ohren kaputt wenn das angeht weil es so laut ist...
Kann man das irgendwie regulieren?
Ich habe es schon versucht allerdings nichts hat funkioniert.


Code:
<input type="range" min="0.0" max="1.0" step="0.01"
     onchange="document.getElementById('audioplayer').volume = this.value;"
     oninput="document.getElementById('audioplayer').volume = this.value;">
<audio id="audioplayer" src="http://stream02.iloveradio.de/iloveradio2.mp3" autoplay controls></audio>

Das habe ich auch schon versucht.
Geht zwar mit dem link der angegeben ist allerdings nicht mit dem radio link z.b.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.102
407
83
67
Zu #73:
Allerdings macht es einem die Ohren kaputt wenn das angeht
Die Lautstärkeregelung funktioniert mit dem Code, den Du gepostet hast, bei mir in Opera einwandfrei. Allerdings vermute ich, dass Du die Lautstärke gleich beim Start herunter setzen willst. Das geht, wenn Du folgenden Code hinzu fügst:
Code:
    <input type="range" min="0.0" max="1.0" step="0.01" value"0.2"
        onchange="document.getElementById('audioplayer').volume = this.value;"
        oninput="document.getElementById('audioplayer').volume = this.value;">
    <audio id="audioplayer" src="http://stream02.iloveradio.de/iloveradio2.mp3" autoplay controls></audio>
    <script>
        document.getElementById('audioplayer').volume = 0.2;
    </script>
 

Skyfay

Mitglied
21 März 2020
76
0
6
17
Also ich möchte das eben dann mit Spotify und einem Radio Player machen und da geht es bei mir nicht:

Ich habe dir hier die Seite mal hochgeladen: https://tunageda.myhostpoint.ch
(Ich nutze gerade chrome)


Code:
<!DOCTYPE html>
<html lang="de-CH">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>playlist</title>
    <link rel="stylesheet" href="radio.css">
    <link rel="icon" type="image/png" sizes="32x32" href="/seiten/bilder/Icon.png">
    <style>
    
    </style>
</head>
<header>
  
    <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="/seiten/music/rm.html">Back</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>
      
    <h1>Radio</h1>
  
    <iframe src="https://tunein.com/embed/player/s2773/" style="width:100%; height:100px;" scrolling="no" frameborder="no"></iframe>

    <input type="range" min="0.0" max="1.0" step="0.01" value"0.2"
        onchange="document.getElementById('audioplayer').volume = this.value;"
        oninput="document.getElementById('audioplayer').volume = this.value;">
    <audio id="audioplayer" src="https://tunein.com/embed/player/s2773/" autoplay controls></audio>
    <script>
        document.getElementById('audioplayer').volume = 0.2;
    </script>
</header>

<body>
  
</body>
</html>