LeoZauberfloh: Mobile Website css Darstellung

problematische Seite

Guten Tag,

ich habe Probleme mit der mobilen Darstellung meiner Webseite. Ich habe mein css mit der Abfrage der Screenbreite für die Darstellung auf Mobiltelefonen geteilt.

Leider passiert es immer wieder, dass die Slideshow im header über den Inhalt und das Navigationsmenü rutscht. Nach ein paar Aktualisierungen klappt es dann unregelmäßig, aber ich kann kein System dahinter entdecken. Das passiert allerdings nur auf meinem Smartphone.

Dann funktionieren die audio-Elemente auf der News.html auch nicht mobil.

Die Webseite heißt www.wizzard-music.de Der Benutzername ist admin Das Passwort Piazzolla

Hat jemand eine Lösung für meine Probleme?

  1. problematische Seite

    Hallo LeoZauberfloh,

    ob das die Ursache der fehlerhaften Darstellung ist, weiß ich nicht, aber einen Versuch ist es sicher wert:

    Dein Slider ist seit vier Jahren nicht mehr aktualisiert worden, aber dein jQuery ist noch wesentlich älter. Der Hersteller des Slider-Plugins schreibt:

    What versions of jQuery is the Cycle Plugin compatible with?

    The Cycle Plugin is supported on jQuery v1.7.1 and later.

    In deiner jquery.min.js steht:

    jQuery JavaScript Library v1.5.2

    Darüber hinaus habe ich einige generelle Hinweise für dich:

    • max-device-width erschwert im Vergleich zu max-width das Testen.
    • Dank korrekter Angabe der Zeichencodierung entfällt die Notwendigkeit, Umlaute als HTML-Entities zu schreiben.
    • document.layers und Conditional Comments sind obsolet.
    • Es ist sinnvoll, innerhalb des Media-Query-Blockes nicht das gesamte CSS zu wiederholen, sondern nur die anders darzustellenden.
    • Einige CSS-Angaben ergeben keinen Sinn, etwa Außenabstände bei Tabellenzellen.
    • Klassen durchzunummerieren ist hinsichtlich der Pflege des Designs nicht zweckmäßig.
    • Statt align="center" sollte man CSS verwenden.
    • Absolute Positionierung ist häufig zickig, dank Techniken wie Grid und Flexbox hier unnötig und verlangt bei den zugehörigen Zahlenwerten nach Maßeinheiten.
    • Punkt (pt) ist für das Anzeigen von Websites auf Bildschirmen keine sonderlich geeignete Maßeinheit – wenngleich zumindest besser als gar keine.
    • width="auto" und height="auto" sind keine gültigen Angaben in einem <img /> und durch CSS zu ersetzen, allerdings in dieser Kombination nicht sinnvoll.
    • target="_self" ist außerhalb von Framesets keine sinnvolle Angabe.
    • Statt class="initial" kann man besser ::first-letter verwenden.
    • Angaben wie margin-top: 20; fehlt die Maßeinheit, Angaben wie border-left: 50; fehlt der Sinn.

    MfG, at

    1. problematische Seite

      Vielen Dank für Deine und Eure Anregungen. Ich werde versuchen, sie umzusetzen.

  2. problematische Seite

    Hallo LeoZauberfloh,

    ein kleiner Nachtrag:

    Dann funktionieren die audio-Elemente auf der News.html auch nicht mobil.

    HTML5-Elemente wie <audio> sollten in HTML5 verwendet werden, nicht in HTML 4.0 Transitional.

    MfG, at

    1. problematische Seite

      @@at

      HTML5-Elemente wie <audio> sollten in HTML5 verwendet werden, nicht in HTML 4.0 Transitional.

      Besser gesagt: Es sollte grundsätzlich <!DOCTYPE html> verwendet werden, nichts anderes. (Außer für Framesets.)

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. problematische Seite

        Hallo Gunnar,

        besser gesagt: Es sollte grundsätzlich HTML5 mit korrektem Dokumententyp verwendet werden. Irgendwelchen HTML-Dokumenten wahllos das Label HTML5 zu verpassen, ist schlecht.

        MfG, at

        1. problematische Seite

          @@at

          Irgendwelchen HTML-Dokumenten wahllos das Label HTML5 zu verpassen, ist schlecht.

          Sagen wir so: In HTML irgendwas zu verwenden, was nicht HTML5 ist, ist schlecht.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        2. problematische Seite

          @@at

          Irgendwelchen HTML-Dokumenten wahllos das Label HTML5 zu verpassen, ist schlecht.

          Was genau wäre so schlecht daran? Die DOCTYPE-Angabe hat in Browsern genau eine Funktion: den Browser in den Standard-Modus zu schalten. Das erfüllt <!DOCTYPE html> besser als alles andere.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. problematische Seite

            Hallo Gunnar,

            Irgendwelchen HTML-Dokumenten wahllos das Label HTML5 zu verpassen, ist schlecht.

            Was genau wäre so schlecht daran?

            Dass ein vorher valides HTML-Dokument womöglich plötzlich nicht mehr valide wäre.

            MfG, at

            1. problematische Seite

              @@at

              Irgendwelchen HTML-Dokumenten wahllos das Label HTML5 zu verpassen, ist schlecht.

              Was genau wäre so schlecht daran?

              Dass ein vorher valides HTML-Dokument womöglich plötzlich nicht mehr valide wäre.

              Was genau wäre so schlecht daran?

              Validität zum Selbstzweck?

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. problematische Seite

                Hallo Gunnar,

                @@at

                Irgendwelchen HTML-Dokumenten wahllos das Label HTML5 zu verpassen, ist schlecht.

                Was genau wäre so schlecht daran?

                Dass ein vorher valides HTML-Dokument womöglich plötzlich nicht mehr valide wäre.

                Was genau wäre so schlecht daran?

                Validität zum Selbstzweck?

                Nein, zum Zweck. Könnte hier im Forum schon mal behandelt worden sein. Wenn es dich interessiert, verwende die Suchfunktion.

                MfG, at

                1. problematische Seite

                  @@at

                  Irgendwelchen HTML-Dokumenten wahllos das Label HTML5 zu verpassen, ist schlecht.

                  Was genau wäre so schlecht daran?

                  Dass ein vorher valides HTML-Dokument womöglich plötzlich nicht mehr valide wäre.

                  Was genau wäre so schlecht daran?

                  Validität zum Selbstzweck?

                  Nein, zum Zweck.

                  Welchen Zweck sollte es haben, grünes Licht zu bekommen, dass eine Seite valides HTML 4.01 Transitional sei?

                  Wenn dasselbe Dokument auch valides HTML5 ist, fein. Dann kann man auch bedenkenlos <!DOCTYPE html> drüberschreiben.

                  Wenn nicht, ist das Markup schlecht. Grünes Licht für HTML 4.01 Transitional ist irrelevant.

                  LLAP 🖖

                  --
                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                  1. problematische Seite

                    Hallo Gunnar.

                    Welchen Zweck sollte es haben, grünes Licht zu bekommen, dass eine Seite valides HTML 4.01 Transitional sei?

                    Den- beziehungsweise dieselben, die vor HTML5 Gültigkeit hatten. Am grundsätzlichen Sinn valider Dokumente hat sich nichts Wesentliches geändert.

                    Wenn dasselbe Dokument auch valides HTML5 ist, fein. Dann kann man auch bedenkenlos <!DOCTYPE html> drüberschreiben.

                    Natürlich kann man das, aber man sollte es nicht, da sich mit dem Versionssprung auch die Semantik einiger Elemente geändert hat. So konnte vor HTML5 etwa <dl> explizit für Dialoge verwendet werden, was sich mit HTML5 geändert hat.

                    Wenn nicht, ist das Markup schlecht. Grünes Licht für HTML 4.01 Transitional ist irrelevant.

                    Dieses Argument kontere ich mit einem ebenso sachlichen Gegenargument: Quatsch!

                    MfG, at

                    1. problematische Seite

                      @@at

                      Am grundsätzlichen Sinn valider Dokumente hat sich nichts Wesentliches geändert.

                      Es gibt HTML-Dokumente, die sind valide, aber nicht sinnvoll.

                      Und es mag HTML-Dokumente, die sinnvoll sind, aber nicht valide.

                      da sich mit dem Versionssprung auch die Semantik einiger Elemente geändert hat.

                      Dann sollte man die Elemente nur noch in ihrer Bedeutung gemäß HTML5 einsetzen.

                      Browser haben nur einen HTML-Parser; der schert sich nicht darum, was für eine DOCTYPE-Angabe oben steht. Er versteht die Elemente gemäß ihrer Bedeutung in HTML5 (wenn es sich nicht um ein Exponat aus dem Museum handelt) und gibt diese an etwaige assistive Technik weiter.

                      TL;DR: Es gibt nur ein HTML. Es gibt nur eine noch sinnvolle DOCTYPE-Angabe: <!DOCTYPE html>

                      LLAP 🖖

                      --
                      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                      1. problematische Seite

                        Hallo Gunnar,

                        Am grundsätzlichen Sinn valider Dokumente hat sich nichts Wesentliches geändert.

                        Es gibt HTML-Dokumente, die sind valide, aber nicht sinnvoll.

                        Und es mag HTML-Dokumente, die sinnvoll sind, aber nicht valide.

                        Und dann gibt es noch zwei weitere Kombinationen, und jede kann alle möglichen Dokumententyp-Deklarationen haben. Soweit klar. Und?

                        da sich mit dem Versionssprung auch die Semantik einiger Elemente geändert hat.

                        Dann sollte man die Elemente nur noch in ihrer Bedeutung gemäß HTML5 einsetzen.

                        Und worin soll der Sinn liegen, valide, sinnvolle alte Dokumente zu überarbeiten, nur um ihnen ein für sie völlig nutzloses Label zu geben?

                        Browser haben nur einen HTML-Parser; der schert sich nicht darum, was für eine DOCTYPE-Angabe oben steht. Er versteht die Elemente gemäß ihrer Bedeutung in HTML5 (wenn es sich nicht um ein Exponat aus dem Museum handelt) und gibt diese an etwaige assistive Technik weiter.

                        Der Browser versteht die Bedeutung gar nicht (sofern damit keine bestimmte Funktionaität verbunden ist), aber der Standard schreibt sie vor.

                        TL;DR: Es gibt nur ein HTML. Es gibt nur eine noch sinnvolle DOCTYPE-Angabe: <!DOCTYPE html>

                        Diese Aussage wird auch durch Wiederholung nicht besser.

                        MfG, at

                        1. problematische Seite

                          Hallo at,

                          Und worin soll der Sinn liegen, valide, sinnvolle alte Dokumente zu überarbeiten, nur um ihnen ein für sie völlig nutzloses Label zu geben?

                          Da gibt es keinen Sinn. Aber es geht ja um neu zu erstellende Dokumente. Niiiemand hat die Absicht, alte Dokumente zu überarbeiten.

                          Bis demnächst
                          Matthias

                          --
                          Rosen sind rot.
                          1. problematische Seite

                            Hallo Matthias,

                            Da gibt es keinen Sinn.

                            Yep.

                            Aber es geht ja um neu zu erstellende Dokumente. Niiiemand hat die Absicht, alte Dokumente zu überarbeiten.

                            Gunnar schon: „Wir waren beim Überarbeiten von Seiten.“

                            Und der Ausgangspunkt war meine Aussage: „Es sollte grundsätzlich HTML5 mit korrektem Dokumententyp verwendet werden. Irgendwelchen HTML-Dokumenten wahllos das Label HTML5 zu verpassen, ist schlecht.“

                            Die verleitete Gunnar zu der Frage und anschließenden Behauptung: „Was genau wäre so schlecht daran? Die DOCTYPE-Angabe hat in Browsern genau eine Funktion: den Browser in den Standard-Modus zu schalten.“

                            Aber die Dokumententyp-Deklaration ist eben genau das, eine Deklaration des Inhaltes, kein bloßer Schalter für irgendeinen Modus.

                            MfG, at

                        2. problematische Seite

                          @@at

                          Und dann gibt es noch zwei weitere Kombinationen, und jede kann alle möglichen Dokumententyp-Deklarationen haben.

                          Wo wir gerade bei allen möglichen Dokumententyp-Deklarationen sind: Kannst du mir sagen (ohne irgendwo nachzuschlagen), welche Dokumententyp-Deklarationen (mit/ohne public identifier) Browser in den Standard-Modus versetzen? Und nein, Almost-Standard-Modus ist da nicht mit gemeit. Welche schalten in den Almost-Standard-Modus; welche in den Quirks-Modus?

                          Ich könnte es dir nicht sagen. Das wäre auch unnützes Wissen. Ich weiß, dass <!DOCTYPE html> in den Standard-Modus schaltet; das genügt.

                          Und worin soll der Sinn liegen, valide, sinnvolle alte Dokumente zu überarbeiten

                          Keiner. Davon war nicht die Rede. Wir waren beim Überarbeiten von Seiten.

                          [Der Browser] versteht die Elemente gemäß ihrer Bedeutung in HTML5 (wenn es sich nicht um ein Exponat aus dem Museum handelt) und gibt diese an etwaige assistive Technik weiter.

                          Der Browser versteht die Bedeutung gar nicht

                          Assistive Technik aber womöglich. Ansonsten bräuchte man ja nur ein HTML-Element: div. Oh, wait…

                          LLAP 🖖

                          --
                          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                          1. problematische Seite

                            Hallo Gunnar.

                            Und worin soll der Sinn liegen, valide, sinnvolle alte Dokumente zu überarbeiten

                            Keiner.

                            Dann sind wir uns ja einig.

                            Davon war nicht die Rede.

                            Das fällt dir aber spät ein.

                            Wir waren beim Überarbeiten von Seiten.

                            Eben.

                            [Der Browser] versteht die Elemente gemäß ihrer Bedeutung in HTML5 (wenn es sich nicht um ein Exponat aus dem Museum handelt) und gibt diese an etwaige assistive Technik weiter.

                            Der Browser versteht die Bedeutung gar nicht

                            Assistive Technik aber womöglich. Ansonsten bräuchte man ja nur ein HTML-Element: div. Oh, wait…

                            Dann kämen diese assistiven Techniken nicht mit validen, sinnvollen alten Dokumenten klar und wären in dieser Hinsicht nicht assistiv, sondern hinderlich. Aber wir sind ja hier unter uns; du darfst also gern Beispiele nennen.

                            MfG, at

  3. problematische Seite

    @@LeoZauberfloh

    Die Webseite heißt www.wizzard-music.de Der Benutzername ist admin Das Passwort Piazzolla

    Wenn du das Passwort hier veröffentlichst, kannst du den Passwortschutz gleich rausnehmen. Warum machst du denen, von denen du Hilfe erwartest, unnötigen Aufwand?

    Außerdem kann man die Ergebnisse des Markup Checkers nicht verlinken. Da kommt einiges zusammen:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <html lang="de">
    

    Es darf nur ein öffnendes <html>-Tag geben: das zweite. Den Namensraum brauchst du nicht.

    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    

    IE 7, wirklich?

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    

    Nutzern das Zoomen unmöglich zu machen ist sehr mies. Weg mit user-scalable=no!

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  4. problematische Seite

    So ich habe den code jetzt mal ein wenig aufgeräumt und den Doctype Konsequenz auf html5 gesetzt.

    Leider bleibt das Problem nach wie vor bestehen. Auf meinem PC klappt's wunderbar, nur auf meinem Android scheint die Slideshow nachträglich geladen zu werden und einfach über den nachfolgenden Inhalt gelegt zu werden.

    Die Höhe des Headers soll eigentlich automatisch an die Größe der Bilder angepasst werden. Klappt das nicht, wenn auf ein Javascript Element verwiesen wird?

    Ich habe das Problem vorübergehend so gelöst, dass ich eine feste Höhe in Pixeln für den Header angegeben habe. Aber so habe ich natürlich nicht jede Bildschirmgröße abgedeckt.

    1. problematische Seite

      Hallo LeoZauberfloh.

      So ich habe den code jetzt mal ein wenig aufgeräumt und den Doctype Konsequenz auf html5 gesetzt.

      Gute Entscheidung! Du hast aber so konsequent aufgeräumt, dass nun zum Beispiel gar kein öffnendes <html>-Tag mehr vorhanden ist. Das ist einer von einer ganzen Reihe von Fehlern, die dir der im Fuß deiner Seite verlinkte Validator nennt. Unter anderem moniert der Validator nicht korrekt maskierte Leerzeichen in Dateinamen und mehrfach vergebene ids. Das oder die falschen Attribute in den <audio>-Elemente könnten auch der Grund sein, weshalb die nicht funktionieren.

      Leider bleibt das Problem nach wie vor bestehen. Auf meinem PC klappt's wunderbar, nur auf meinem Android scheint die Slideshow nachträglich geladen zu werden und einfach über den nachfolgenden Inhalt gelegt zu werden.

      Ob dein vier Jahre alter Slider mit der allerneuesten Version von jQuery funktioniert, ist fraglich. Wenn in der Dokumentation des Sliders auf die Version 1.7 verwiesen wird, würde ich die letzte Unterversion von Version 1.7 verwenden. Wenn es damit auch nicht funktioniert, hast du zumindest weitestgehend ausgeschlossen, dass jQuery und der Slider nicht richtig harmonieren.

      Die Höhe des Headers soll eigentlich automatisch an die Größe der Bilder angepasst werden. Klappt das nicht, wenn auf ein Javascript Element verwiesen wird?

      Doch, grundsätzlich kann das funktionieren. Aber hast du mal nach ausschließlich CSS-basierten Slidern gesucht? Eigentlich brauchst du dafür nämlich gar kein Javascript.

      Ich habe das Problem vorübergehend so gelöst, dass ich eine feste Höhe in Pixeln für den Header angegeben habe. Aber so habe ich natürlich nicht jede Bildschirmgröße abgedeckt.

      Sieh dir vielleicht mal an, wie man Bilder responsiv macht.

      MfG, at