TS: Elementbreite im Browser

Hello,

noch eine letzte ganz prophane Frage für heute, die mir aber keine Ruhe lässt:

In der Organistionshierarchie der Webseite habe ich bisher immer

  1. body
  2. header, main, footer
  3. section
  4. article [section [article [...]]]
  5. div, ...
  6. p

oder zumindest so ähnlich benutzt.
Nun begibt es sich desöfteren, dass die erstellten Seiten auch mal optisch ange[f|p]asst werden sollen. Es gibt da also einige, bei denen sich die Sections besonders gut anbieten würden ( != 'besonders gut dafür geeignet sind'), um die Gestaltung zu unterstützen und die Bereiche optisch voneinander zu trennen.

Leider bekomme ich es nicht hin, die Breite der Bereiche mit CSS dynamisch zu steuern. Die Bereiche sollen nur so breit hinterlegt, mit Rahmen versehen, usw. werden, wie ihr Inhalt das erfordert. Der ist aber meistens schmaler.

Und schön wäre es, wenn sich dann alle Bereiche der Seite nach dem breitesten richten würden, denn sonst sieht es wieder unruhig aus. Und wenn man das weiterdenkt, dann müsste sich der breiteste vorher nach dem Ausgabemedium richten, aber das möchte ich erst einmal zurückstellen.

Wie macht man es richtig™️?
Kann man dioe Sections überhaupt hierfür verwenden?

Liebe Grüße
Tom S.

--
Es gibt nichts Gutes, außer man tut es
Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.

akzeptierte Antworten

  1. @@TS

    In der Organistionshierarchie der Webseite habe ich bisher immer

    1. body
    2. header, main, footer

    Du hast vergessen:
    0. html

    3. section
    4. article [section [article [...]]]
    5. div, ...

    Nein, das kann man so nicht sagen. Ob section, article oder div das passende Element zum Gruppieren ist, richtet sich nach dem Inhalt, nicht nach der Verschachtelungstiefe.

    Die Bereiche sollen nur so breit hinterlegt, mit Rahmen versehen, usw. werden, wie ihr Inhalt das erfordert.

    min-content.

    Und schön wäre es, wenn sich dann alle Bereiche der Seite nach dem breitesten richten würden

    min-content.

    LLAP 🖖

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

      Das ging ja schnell! Danke.

      In der Organistionshierarchie der Webseite habe ich bisher immer

      1. body
      2. header, main, footer, nav (edited)

      Du hast vergessen:
      0. html

      Habe ich nicht vergessen, habe ich absichtlich weggelassen, um zu sehen, ob Du schon wach bist ;-P

      3. section
      4. article [section [article [...]]]
      5. div, ...

      Nein, das kann man so nicht sagen. Ob section, article oder div das passende Element zum Gruppieren ist, richtet sich nach dem Inhalt, nicht nach der Verschachtelungstiefe.

      Das war jetzt auch nur ein Beispiel dafür, wie die betroffenen Seiten ungefähr organisiert sind. Ich habe aber weder Zeit noch Geld, da großartig ins HTML einzugreifen. Die beziehen aber alle ein gemeinsames übergeordnetes CSS von mir. Das klappt bisher ganz gut. Die Inhaber wundern sich nur manchmal, wieso ihre Seite mal wieder "etwas hübscher" geworden ist.

      Die Bereiche sollen nur so breit hinterlegt, mit Rahmen versehen, usw. werden, wie ihr Inhalt das erfordert.

      min-content.

      Das war jetzt zwar nicht ganz die Lösung, aber der Weg dorthin. Darum gibt's eigentlch nur einen halben Punkt. Weil Du es bist und heute der 1. Mai, bekommst Du aber trotzdem einen ganzen ;-)

      Und schön wäre es, wenn sich dann alle Bereiche der Seite nach dem breitesten richten würden

      min-content.

      main {
          width: -webkit-max-content;  
          width: -moz-max-content;  
          width: max-content;  
      }
      
      section {
          witdh: 100%;
      }
      

      Funktioniert bisher in den getesteten Browsern

      • Firefox 47.02 (letzter auf WinXP)
      • Firefox 52. (auf Win 8.1)
      • Iceweasle 38.4.0 (letzter auf meienm Linux-7-Rasenmäher)
      • Android-Browser APP (Android 5.2 auf Samsung-Tablet) so lala
      • Crome APP (auf Android 5.2 auf Samsung-Tablet), gut!
      • Firefox APP (auf Android 5.2 auf Samsung-Tablet), gut!

      Klappt nicht (wie von Dir schon erwähnt)

      • IE 11 (auf Win 8.1)

      Nur die genaue Breite passt noch nicht, vermutlich wegen der Margins und Paddings.
      Aber da gibt's bestimmt auch was von Ratio-Gunnar; ich denke da so an display: box oder so ähnlich :-)

      Liebe Grüße
      Tom S.

      --
      Es gibt nichts Gutes, außer man tut es
      Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
      1. @@TS

        Nur die genaue Breite passt noch nicht, vermutlich wegen der Margins und Paddings.
        Aber da gibt's bestimmt auch was von Ratio-Gunnar; ich denke da so an display: box oder so ähnlich :-)

        Ich denke da eher an box-sizing: border-box.

        Aber steht das nicht für *, ::before, ::after sowieso schon in jedem™ Stylesheet?

        LLAP 🖖

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

          Nur die genaue Breite passt noch nicht, vermutlich wegen der Margins und Paddings.
          Aber da gibt's bestimmt auch was von Ratio-Gunnar; ich denke da so an display: box oder so ähnlich :-)

          Ich denke da eher an box-sizing: border-box.

          Aber steht das nicht für *, ::before, ::after sowieso schon in jedem™ Stylesheet?

          Das hilft in diesem Falle leider nicht :-(
          Dann lasse ich erst einmal calc() die Margins wieder abziehen von den 100%. Das tut's, auch wenn es der große Hammer ist.

          Liebe Grüße
          Tom S.

          --
          Es gibt nichts Gutes, außer man tut es
          Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
          1. Hallo TS,

            Aber steht das nicht für *, ::before, ::after sowieso schon in jedem™ Stylesheet?

            Das hilft in diesem Falle leider nicht :-(

            Warum nicht? Wenn schon nicht für alle, dann aber doch für die konkreten Elemente?

            Bis demnächst
            Matthias

            --
            Rosen sind rot.
            1. Hej Matthias,

              box-sizing: border-box;

              Aber steht das nicht für *, ::before, ::after sowieso schon in jedem™ Stylesheet?

              Das hilft in diesem Falle leider nicht :-(

              Warum nicht? Wenn schon nicht für alle, dann aber doch für die konkreten Elemente?

              Weil „border-box“ nur von der Außenkante des Rahmens auf der einen Seite bis zur Außenkante des Rahmens auf der gegenüberliegenden Seite reicht. „margin“ (den entscheidenden Teil hast du nciht zitiert) befidnet sich außerhalb der Box ;-)

              Marc

      2. Hallo Tom,

        • Firefox 47.02 (letzter auf WinXP)

        52 ist der letzte, bekommt auch noch bis mindestens September diesen Jahres Sicherheitsupdates.

        Gruß
        Julius

        1. Hello,

          • Firefox 47.02 (letzter auf WinXP)

          52 ist der letzte, bekommt auch noch bis mindestens September diesen Jahres Sicherheitsupdates.

          Auf dem Museums-Host mit WinXP Pro 32 bekomme ich keinen > 47.02 zum Laufen. Das ist auch der letzte, den die Updatefunktion mir für XP Pro 32 anbietet.

          Liebe Grüße
          Tom S.

          --
          Es gibt nichts Gutes, außer man tut es
          Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
          1. Hallo Tom,

            • Firefox 47.02 (letzter auf WinXP)

            52 ist der letzte, bekommt auch noch bis mindestens September diesen Jahres Sicherheitsupdates.

            Auf dem Museums-Host mit WinXP Pro 32 bekomme ich keinen > 47.02 zum Laufen. Das ist auch der letzte, den die Updatefunktion mir für XP Pro 32 anbietet.

            Ähnliche Konfiguration bei mir in der VM, allerdings kam das Update auf 52 automatisch. Ggf. 52 mal drüber installieren?

            Gruß
            Julius

            1. Hello Julius,

              • Firefox 47.02 (letzter auf WinXP)

              52 ist der letzte, bekommt auch noch bis mindestens September diesen Jahres Sicherheitsupdates.

              Auf dem Museums-Host mit WinXP Pro 32 bekomme ich keinen > 47.02 zum Laufen. Das ist auch der letzte, den die Updatefunktion mir für XP Pro 32 anbietet.

              Ähnliche Konfiguration bei mir in der VM, allerdings kam das Update auf 52 automatisch. Ggf. 52 mal drüber installieren?

              Die hatten sich doch strikt geweigert, nach der 43 noch eine Version für WinXP-Pro-32 zu liefern. Dank deines Tipps finde ich jetzt eine V 53.0 für WinXP-Pro-32 bei Computer-Bild

              Dann wird es die ja wohl hoffentlich auch bei Mozilla direkt geben?

              Was hat die Füchse denn wohl dazu veranlasst, noch eine Version passend für WinXP-Pro zu produzieren?

              Zum einfach überbügeln fehlt mir aber im Moment der Mut, weil das Museumsgerät mit WinXP-Pro im Moment das einzige ist, das stabil läuft (außer einem noch viel, viel älteren Lappi mit Debian 7, der aber mehr Strom nimmt, als ein Desktop). Mein normaler Linux-Lappi klingt leider wie ein Rasenmäher, der HP-Lappi stürzt dauernd ab.

              Liebe Grüße
              Tom S.

              --
              Es gibt nichts Gutes, außer man tut es
              Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
              1. Hallo Tom,

                Die hatten sich doch strikt geweigert, nach der 43 noch eine Version für WinXP-Pro-32 zu liefern.

                Nein, Firefox lief bis einschließlich 52 immer unter XP. Es gab keine Unterbrechung. Es kann sein, dass das Updaten nicht geklappt hat, das kommt seltenst vor. Vielleicht setzt Firefox ab V43 etwas voraus, das dein Rechner nicht hat, was ich aber nicht glaube, das würde in den Release-Notes stehen.

                Dank deines Tipps finde ich jetzt eine V 53.0 für WinXP-Pro-32 bei Computer-Bild

                Dann wird es die ja wohl hoffentlich auch bei Mozilla direkt geben?

                Unwahrscheinlich, das der auch funktioniert. Ich glaube, die bei Computerbild haben einfach die Systemanforderungen der Vorgängerversion kopiert und die Änderungen übersehen...

                Was hat die Füchse denn wohl dazu veranlasst, noch eine Version passend für WinXP-Pro zu produzieren?

                Die liefen bisher alle unter XP.

                Zum einfach überbügeln fehlt mir aber im Moment der Mut, weil das Museumsgerät mit WinXP-Pro im Moment das einzige ist, das stabil läuft (außer einem noch viel, viel älteren Lappi mit Debian 7, der aber mehr Strom nimmt, als ein Desktop).

                Kannst ja vorher mittels dd ein Plattenimage ziehen-

                Mein normaler Linux-Lappi klingt leider wie ein Rasenmäher, der HP-Lappi stürzt dauernd ab.

                Hitze-Probleme könnten für beides eine Ursache sein. Falls du es noch nicht bereits getan hast: Lüfter und den Kühlkörper reinigen und neue Wäremleitpaste auftragen wirkt oft Wunder.

                Gruß
                Julius

                1. Hallo

                  Die hatten sich doch strikt geweigert, nach der 43 noch eine Version für WinXP-Pro-32 zu liefern.

                  Nein, Firefox lief bis einschließlich 52 immer unter XP. Es gab keine Unterbrechung. Es kann sein, dass das Updaten nicht geklappt hat, das kommt seltenst vor. Vielleicht setzt Firefox ab V43 etwas voraus, das dein Rechner nicht hat …

                  Soweit ich mich erinnere, hatte ich das gleiche Problem mit dem Firefox unter Windows 7. Als mir das zwei versionen später auffiel, stellte sich heraus, dass ein Update zurückgezogen wurde, woraufhin weder autmatisch, noch manuell ein Update mit der eingebauten Funktion möglich war. Das drüberbügeln eines heruntergeladenen Installationsfiles hat dann geholfen.

                  Das war kein Win-XP-spezifisches Problem, sondern betraf die konkrete Firefox-Version. Auf den Support meines Betriebssystems durch Firefox musste ich bei Windows 7 natürlich nicht achten.

                  Tschö, Auge

                  --
                  Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
                  Toller Dampf voraus von Terry Pratchett
                  1. Hello,

                    Die hatten sich doch strikt geweigert, nach der 43 noch eine Version für WinXP-Pro-32 zu liefern.

                    Nein, Firefox lief bis einschließlich 52 immer unter XP. Es gab keine Unterbrechung. Es kann sein, dass das Updaten nicht geklappt hat, das kommt seltenst vor. Vielleicht setzt Firefox ab V43 etwas voraus, das dein Rechner nicht hat …

                    Soweit ich mich erinnere, hatte ich das gleiche Problem mit dem Firefox unter Windows 7. Als mir das zwei versionen später auffiel, stellte sich heraus, dass ein Update zurückgezogen wurde, woraufhin weder autmatisch, noch manuell ein Update mit der eingebauten Funktion möglich war. Das drüberbügeln eines heruntergeladenen Installationsfiles hat dann geholfen.

                    Das war kein Win-XP-spezifisches Problem, sondern betraf die konkrete Firefox-Version. Auf den Support meines Betriebssystems durch Firefox musste ich bei Windows 7 natürlich nicht achten.

                    Danke für die Info. Bei 42.x hat die automatsiche Updateversion auch schon mal gehangen und neulich dann doch erst auf 45.? und nun doch auf 47.0.2 updated.

                    Ich wage das nachher mal mit der 53.0, wenn ich sie noch aus einer anderen verlässlichen Quelle beziehen kann. Bei Computer-Bild weiß ich leider (noch) nicht, was da noch an Werbung und ggf. deren eigenen AddOns dranhängt.

                    Liebe Grüße
                    Tom S.

                    --
                    Es gibt nichts Gutes, außer man tut es
                    Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
                    1. Hallo Tom,

                      Ich wage das nachher mal mit der 53.0,

                      Das kannste knicken, steht nicht umsonst in den Release-Notes, dass XP und Vista nicht mehr unterstützt werden:
                      Diese Version von Firefox benötigt Windows XP oder neuer.

                      Fun Fact: Bei Computerbild meint man bereits 53.0.1 zu haben, aber die Hashwerte stimmen mit denen von der offiziellen Version überein, die sich als 53.0 ausgibt. Außerdem gibt es noch keine 53.0.1 (URL, unter der die Releasenotes erreichbar sein sollte, führt ins Leere).

                      wenn ich sie noch aus einer anderen verlässlichen Quelle beziehen kann. Bei Computer-Bild weiß ich leider (noch) nicht, was da noch an Werbung und ggf. deren eigenen AddOns dranhängt.

                      Haben sie nicht, die Hashes sind identisch. (Abseits davon kann man sich über die auf der Seite eingebundenen Werbung sicher einiges einfangen, da ist die offizielle Download-Seite klar vorzuziehen.)

                      Gruß
                      Julius

                      1. Hello,

                        Ok, danke.
                        War gerade noch rechtzeitig! :-O

                        Liebe Grüße
                        Tom S.

                        --
                        Es gibt nichts Gutes, außer man tut es
                        Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.