Toggle Menü ohne JavaScript für mobile Navigation

  • Hallo zusammen,


    ich bin neu hier und habe auch die Seite HTML-Seminare.de erst vor kurzem kennen gelernt. Ich befasse mich bisher mit einfacher Webseitengestaltung und wollte jetzt erstmals eine responsive Seite erstellen. Mein Werkzeug ist Dreamweaver (CS-Version weiß ich grad nicht weil an einem anderen Rechner - aber die Version noch ohne Möglichkeiten für responsives Design).


    Vor ein paar Tagen habe ich dann das Seminar "Toggle Menü ohne JavaScript für mobile Navigation" gefunden und ausprobiert. Grundsätzlich gefällt mir das schon gut für den ersten Schritt. Allerdings ist mir beim erstellen via erläuterter Einzelschritte und später auch bei Übernahme des kompletten Codes eines aufgefallen, was mir nicht gefällt. Selbst auf der bereit gestellten Seite unter http://www.html-seminar.de/rwd…onsive-design-ohne-js.htm fällt es auf:


    Die Breite der Seite scheint über 100% zu sein und hat einen horizontalen Scrollbalken. Dieses gefällt mir weder auf dem Desktop noch auf dem Mobilgerät (Smartphone). Kann es sein, dass hier eine winzige Optimierung notwendig ist? Meine Kenntnisse reichen hier jetzt nicht mehr aus. Ich habe verschiedene Ansätze gesucht, aber kein zufriedenstellendes Ergebnis erhalten.


    Was mir aufgefallen ist, mit dem setzen des folgenden CSS-Befehls - weit unten - wird die Über-Breite ausgelöst:


    #bereichlogo
    {
    width: 100%;
    }


    Kennt jemand von hier das Problem?
    Wurde es gelöst?
    Oder MUSS das so sein?
    :-(


    Über eine aussagefähige Antwort würde ich mich freuen. Vielen Dank im Voraus.


    Viele Grüße,
    RalfE

  • Hallo


    Zitat

    Oder MUSS das so sein?


    Nein.


    Zitat

    Kennt jemand von hier das Problem?


    Darüber gab es meiner Erinnerung nach bereits eine Diskussion. Das Problem wurde erkannt, aber die Lösung nicht in das Beispiel eingebaut.


    Zitat

    Wurde es gelöst?


    Ja.


    Zitat


    Was mir aufgefallen ist, mit dem setzen des folgenden CSS-Befehls - weit unten - wird die Über-Breite ausgelöst:


    Code
    1. #bereichlogo
    2. {
    3. width: 100%;
    4. }


    Nicht so ganz. header und section sind beide für sich zu breit. Das liegt in beiden Fällen an der Ignorierung des Box-Modells.


    Die einfachste Lösung ist das Box-Modell zu ändern. Dazu kann die Anweisung


    Code
    1. * {
    2. margin: 0;
    3. padding: 0;
    4. font-family: Arial, sans-serif;
    5. }


    ergänzt werden zu


    Code
    1. * {
    2. margin: 0;
    3. padding: 0;
    4. font-family: Arial, sans-serif;
    5. box-sizing: border-box;
    6. }


    Nebeninformation:


    margin, padding und font-family haben im *-Selektor eigentlich nichts verloren. Das war vor 15 Jahren mal Up-to-Date, gilt aber bereits seit mehreren Jahren als veraltet.


    Gruss


    MrMurphy

  • Danke, MrMurphy,


    ich werd's mal ausprobieren.


    Zu deiner Info, ich hatte den kompletten Code stumpf übernommen. Den Hinweis mit dem *-Sektor nehme ich dankend zur Kenntnis.


    Viele Grüße,
    RalfE

  • margin, padding und font-family haben im *-Selektor eigentlich nichts verloren. Das war vor 15 Jahren mal Up-to-Date, gilt aber bereits seit mehreren Jahren als veraltet.


    Woher hast du diese Information?

  • Eigentlich passt es zum Thema ;-)


    Würd mich jetzt auch mal interessieren, warum *-Angaben für font-family veraltet sind.


    Gibt meines Wissens keine besseren Angaben für globale Definitionen... Wo man halt aufpassen muss, ist, dass man kein !important dort verwendet.