mein Lernmodus CSS

  • Hallo,
    ich habe mich hier angemeldet um etwas Hilfe zu erbitten.
    Kurz zu mir: Ich gehe auf die 60 zu und habe bisher HTML mit Frames und Tabellenlayout betrieben. Auch etwas PHP-Kenntnisse sind vorhanden. Im Augenblick bin ich dabei für mich völlig neu anzufangen was CSS bzw. Webseitengestaltung betrifft. Ich lese mich gerade in responsivem Design etwas ein. Mir gehts in erster Linie um den Lerneffekt. Und da habe ich glatt schon Fragen dazu.

    Meine Testumgebung ist ein RaspberryPi 2B mit Apache2 und PHP 5. Geschrieben und angezeigt wird alles während des programmierens mit Phase5² vom Windows-PC aus.

    Im Augenblick arbeite ich die Anleitung http://www.html-seminar.de/toggle-menue-ohne-javascript.htm durch. Schon beim probieren entstehen Ungereimtheiten in der Ansicht. Mit dem Firefox kann man ja unter Extras/Webentwickler/Bildschirmgröße testen, Ansichten für Handy oder Tablet simulieren. Aber auch auf meinem Androidhandy kann ich mir alles anzeigen lassen.

    Beim Firefox scheint etwas nicht mit dem Zeilenumbruch in dieser Ansicht zu stimmen. Liegt dies am Firefox selber?
    Zwei Bilder sollen das veranschaulichen:

    Links die Firefoxansicht, rechts Android.
    Eine zweite Ungereimtheit ist der Button "Menü zu". Im Firefox ist er wie zu erwarten blau, im Handy orange. Nicht weiter schlimm, nur warum ist das so?

    Damit man das nachvollziehen kann, habe ich Webspace und auf diesem den Quellcode abgelegt.
    Link Seite: http://eumel.bplaced.net
    Link zur CSS: http://eumel.bplaced.net/definitionen.css

    Wer gerne helfen möchte, bitte gerne.
    MfG
    Eumel

  • Hallo

    Zitat

    Beim Firefox scheint etwas nicht mit dem Zeilenumbruch in dieser Ansicht zu stimmen. Liegt dies am Firefox selber?

    Die Fehlerbeschreibung ist leider nicht eindeutig.

    Deshalb rate ich mal: Das section-Element hat eine Breite von 100%. Dazu kommen noch links und rechts ein padding von 0.5em.

    Deshalb ist das section-Element breiter als das Browserfenster.

    Dafür gibt es verschiedene Lösungen. Zum Beispiel:

    Die Breite kann mit Hilfe von calc auf 100% begrenzt werden, indem padding (und gegebenenfalls border) von der Breite abgezogen werden.

    Oder du benutzt das Border-Box-Modell, bei dem padding und border von der Breite des Containers abgezogen anstatt hinzugefügt zu werden. Das bevorzuge ich.

    Gruss

    MrMurphy