Responsive Design Tutorial fehler/BUG?!

  • Im Tutorial für das responsive design hier hat die von mir erstellte Seite wie auch die Bespielseite in der Mobilansicht rechts oben ein kleines, grünes kästchen, das da m.E. nicht sein sollte.
    Die Linie unten geht auch nicht bis ganz an den rand, ebenso der Hintergrund unter den ausklappbaren Balken.
    [Blockierte Grafik: http://img5.fotos-hochladen.net/uploads/bildschirmfotor830bgkhnv.png]



    Beispielseite: http://www.html-seminar.de/rwd…onsive-design-ohne-js.htm
    Tutorial: http://www.html-seminar.de/toggle-menue-ohne-javascript.htm



    Dadurch ist auch die Webseite breiter als 100% Wie mache ich das weg? Bzw. stelle das Richtig?

  • Hallo


    Zitat

    Dadurch ist auch die Webseite breiter als 100%


    Das sehe ich auch so. An mindestens zwei Stellen ist der Inhalt breiter als die Fensterbreite.


    Zitat

    Wie mache ich das weg? Bzw. stelle das Richtig?


    Füge im CSS hier


    CSS
    * {
       margin: 0;
       padding: 0;
       font-family: Arial, sans-serif;
    }


    folgendes hinzu


    CSS
    box-sizing: border-box;


    also im Endeffekt sollte dort stehen


    CSS
    * {
       margin: 0;
       padding: 0;
       font-family: Arial, sans-serif;
       box-sizing: border-box;
    }


    Nebenbei: Die beiden Einträge margin:0 und paddin:0 machen an dieser Stelle mehr Probleme als sie lösen. Deshalb wird bereits seit Jahren empfohlen, sie nicht zu verwenden und nur dort einzutragen, wo sie benötigt werden.


    Gruss


    MrMurphy

  • Hallo


    Nein, dafür gibt es kein Beispiel.


    Es geht


    1. um den Arbeitsprozeß eine Webseite zu erstellen und


    2. um die Performance, mit der die Webseite von Browsern aufgebaut und angezeigt wird. Speziell bei langsamen Rechnern wie zum Beispiel Smartphones.


    Ich könnte höchstens versuchen die Nachteile zu beschreiben. Wobei es für viele Webseitenersteller eher um Theorie geht, die sie in der Praxis nicht nachvollziehen können. Wer sich nicht mit den Hintergründen von HTML / CSS beschäftigt, grade mal so eine Webseite erstellen kann und hauptsächlich mit einem Desktop-Rechner im Internet surft wird die Beschreibung zudem eher nicht nachvollziehen können.


    Erst recht nicht, wenn Webseitenersteller fest an die beiden Einträge glauben und sich diesen Glauben nicht zerstören lassen wollen. Meine Erfahrung ist, dass es leider viele Webseitenersteller gibt, die ihr Wissen über HTML / CSS für unveränderlich halten und deshalb keine Argumente akzeptieren, die dem nicht entsprechen.


    Gruss


    MrMurphy

  • Also.. das * blokiert durchaus länger das Rendering einer Website, zumindest im vergrlich mit einer ID, aber sorry, über was für Dimensionen es sich hier handelt, ist ne andere Geschichte.
    Ein soches reset vereinfacht sehr vieles, also mach es wohl weniger Probleme als es hervorruft?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!