Matthias Scharwies: Page Floats - Wie mit herkömmlichem CSS umsetzen?

Servus!

Ich habe die bestehenden Tutorials zum Ausrichten mal zu einem Kurs Ausrichtung mit CSS zusammengefasst.

Als Ausblick habe ich Page Floats vorgestellt:

https://figures.idea.whatwg.org/#goals

Wie würdet ihr dieses Beispiel umsetzen?

Evtl. geht das schon mit heutigem CSS:

  • Spalten mit columns
  • Unterüberschrift oben links, statt in der 2. Spalte (Warum da?)
  • Pull quote ohne Einrückung des Haupttexts

Aber wie kann man das untere Bild über 2 Spalten fließen lassen?

Oder soll ich das Beispiel erst mal zurückstellen?

Herzliche Grüße

Matthias Scharwies

--
25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
  1. Hallo Matthias Scharwies,

    Aber wie kann man das untere Bild über 2 Spalten fließen lassen?

    Vielleicht so:

    article {
      columns: 2 25em;
    }
    p {
      columns: 2 12em;
    }
    

    So kannst du Überschrift und Bild gleich behandeln (column-span: all).

    Bis demnächst
    Matthias

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    1. Servus!

      Hallo Matthias Scharwies,

      Aber wie kann man das untere Bild über 2 Spalten fließen lassen?

      Vielleicht so:

      article {
        columns: 2 25em;
      }
      p {
        columns: 2 12em;
      }
      

      So kannst du Überschrift und Bild gleich behandeln (column-span: all).

      Danke! Ich probier mal rum und berichte!

      Herzliche Grüße

      Matthias Scharwies

      --
      25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
    2. Hallo Matthias Apsel,

      Vielleicht so:

      article {
        columns: 2 25em;
      }
      p {
        columns: 2 12em;
      }
      

      So kannst du Überschrift und Bild gleich behandeln (column-span: all).

      Da du keine Überschrift als Kind von p festlegen kannst, musst du vielleicht section verwenden.

      http://selfhtml.apsel-mv.de/forum/ak.html

      Bis demnächst
      Matthias

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      1. Hallo Matthias Apsel,

        http://selfhtml.apsel-mv.de/forum/pf.html

        Schön ist anders. Es ist vielleicht insgesamt keine gute Idee, Drucklayouts ins Web übertragen zu wollen.

        Bis demnächst
        Matthias

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
        1. Hej Matthias,

          Es ist vielleicht insgesamt keine gute Idee, Drucklayouts ins Web übertragen zu wollen.

          Jein - grundsätzlich möchte man schon näher an Zeitschriften-Layouts rankommen - aber nicht so. Da Problem hier ist, dass man bei sehr engen Texten ewig lange bis unten scrollen muss, bevor man zur zweiten Spalten dann wieder ganz nach oben muss.

          Technisch geht fast alles, inhaltlich ist das unter Umständen unsinnig. Ich glaube Jen Simmons hat mal versucht mit CSS Grid ein Layout umzusetzen, ich meine auf der SmashingConf. Ich versuche das mal rauszufinden - kann man sich Ideen holen (fertig wurde sie in der vorgegebenen Zeit (45min) des Talks allerdings nicht).

          Gruß,

          Marc

          1. Hej marctrix,

            Technisch geht fast alles, inhaltlich ist das unter Umständen unsinnig. Ich glaube Jen Simmons hat mal versucht mit CSS Grid ein Layout umzusetzen, ich meine auf der SmashingConf. Ich versuche das mal rauszufinden - kann man sich Ideen holen (fertig wurde sie in der vorgegebenen Zeit (45min) des Talks allerdings nicht).

            War ja gar nicht so schwer zu finden (Achtung, englisch!!!):

            Thinking with Grid A presentation at Smashing Conference in April 2019 in San Francisco, CA, USA by Jen Simmons

            Marc

            --
            Ceterum censeo Google esse delendam
          2. Hallo,

            Es ist vielleicht insgesamt keine gute Idee, Drucklayouts ins Web übertragen zu wollen.

            jedenfalls nicht immer und nicht um jeden Preis.

            Jein - grundsätzlich möchte man schon näher an Zeitschriften-Layouts rankommen

            Möchte man dass? Ich dachte immer, gerade im fließenden Layout, das sich an die Abmessungen des Anzeigemediums anpasst, liegt die Stärke von guten Web-Layouts.

            Da Problem hier ist, dass man bei sehr engen Texten ewig lange bis unten scrollen muss, bevor man zur zweiten Spalten dann wieder ganz nach oben muss.

            Deswegen kann ich mehrspaltige Layouts im Web auch nur dann gutheißen, wenn der Container, der die Spalten enthält, eine sehr kleine Höhe hat. Eine Höhe, die mit großer Wahrscheinlichkeit auf eine Bildschirmseite passt, ohne dass man scrollen muss.

            Ciao,
             Martin

            --
            Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
            1. Servus!

              Hallo,

              Es ist vielleicht insgesamt keine gute Idee, Drucklayouts ins Web übertragen zu wollen.

              jedenfalls nicht immer und nicht um jeden Preis.

              Jein - grundsätzlich möchte man schon näher an Zeitschriften-Layouts rankommen

              Möchte man dass? Ich dachte immer, gerade im fließenden Layout, das sich an die Abmessungen des Anzeigemediums anpasst, liegt die Stärke von guten Web-Layouts.

              Und da setzt Page Floats ein: Mobile first!, dann eine Ansicht in 2 Spalten und dann 4 Spalten, wenn's breit genug ist. Und das ohne weiteres HTML-Markup und ohne viele media queries. Bis jetzt unterstützt's nur der firefox so halb.

              Im SELF-Wiki-Artikel war dieser Screenshot:

              Da Problem hier ist, dass man bei sehr engen Texten ewig lange bis unten scrollen muss, bevor man zur zweiten Spalten dann wieder ganz nach oben muss.

              Deswegen kann ich mehrspaltige Layouts im Web auch nur dann gutheißen, wenn der Container, der die Spalten enthält, eine sehr kleine Höhe hat. Eine Höhe, die mit großer Wahrscheinlichkeit auf eine Bildschirmseite passt, ohne dass man scrollen muss.

              Das ist wohl die Absicht. Bei vielen Beispielseiten geht's nicht um ellenlange Texte, sondern um eine Startseite mit nur einem Foto und dann pro Seite ein kurzen Satz oder eine Adresse. Einen langen Wikipedia-Artikel würde man so nicht gestalten können.

              Herzliche Grüße

              Matthias Scharwies

              --
              25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
            2. Hej Der Martin,

              Es ist vielleicht insgesamt keine gute Idee, Drucklayouts ins Web übertragen zu wollen.

              jedenfalls nicht immer und nicht um jeden Preis.

              Jein - grundsätzlich möchte man schon näher an Zeitschriften-Layouts rankommen

              Möchte man dass? Ich dachte immer, gerade im fließenden Layout, das sich an die Abmessungen des Anzeigemediums anpasst, liegt die Stärke von guten Web-Layouts.

              Unter dieser Prämisse möchte man es. Ich jedenfalls. Das Layout von Zeitschriften ist ein Layout das funktioniert, es ist Jahrhunderte lang erprobt, wird verstanden und ist dennoch abwechslungsreich und interessant.

              Je mehr ich davon übernehmen kann, je mehr Wahlmöglichkeiten ich bei einem Design habe, das für alle funktioniert - umso besser (finde ich).

              Insbesondere nun wo jeder Browser mit dem Lesemodus eine kinderleicht bedienbare Option hat, das vorgeschlagene Layout gegen ein simples, ablenkungsfreies einzutauschen - und das sogar (jedenfalls im Safari) als Voreinstellung je Website individuell fest zu legen.

              Was nicht heißt, dass die selbst entwickelte Darstellung Barrieren haben sollte.

              Marc

              --
              Ceterum censeo Google esse delendam
            3. @@Der Martin

              Deswegen kann ich mehrspaltige Layouts im Web auch nur dann gutheißen, wenn der Container, der die Spalten enthält, eine sehr kleine Höhe hat. Eine Höhe, die mit großer Wahrscheinlichkeit auf eine Bildschirmseite passt, ohne dass man scrollen muss.

              Wobei man sich bei „großer“ nicht mit Wahrscheinlichkeiten zufriedengeben sollte, die unter 1 liegen.

              Mit max-height: 100vh kann man da ja nachhelfen. Das sollte aber besser in einem @media (min-height: …)-Block stehen; für kleine Viewporthöhen gibt’s keine Mehrspaltigkeit.

              LLAP 🖖

              --
              „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
              „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

              —Marc-Uwe Kling
        2. Hi there,

          http://selfhtml.apsel-mv.de/forum/pf.html

          Schön ist anders. Es ist vielleicht insgesamt keine gute Idee, Drucklayouts ins Web übertragen zu wollen.

          Ja, das ist klassisches Werbeagentur-Thinking. Ich sag' immer, gehen tut alles, aber es kostet. Und damit stellt sich sofort die Frage, ob es dafür steht. Natürlich wird eine optisch ansprechende Seite lieber gelesen, aber in Wahrheit interessiert "Design" die Leser nicht, und schon gar nicht, ob ein Bild über zwei Spalten geht oder doch nur über eine, auch und besonders, wenn es nur als "Aufheller" oder "Stimmungsbild" eingesetzt wird.

          Damit lautet die Antwort imho eindeutig "nein", auch wenn ich einräume daß es natürlich immer wieder interessant und eine Herausforderung sein kann, Spinnereien von Werbeagenturen und "Designern" umzusetzen. Aber das ist dann fast schon eine andere Geschichte...