m.orange: Überschrift in zweispaltigen Layout von Text umfließen

Moin, ich suche eine Möglichkeit eine Überschriften von Text in einem zweispaltigen Layout umfließen zu lassen. Prinzipiell vergleichbar dem umfließen von Bildern mit Text, wie man das von Word kennt.

Hat jemand ne Idee wie sich das umsetzen ließe?

Grüße und besten Dank m.orange

  1. Hallo

    Wenn die Überschrift links und rechts umfloßen werden soll gibt es keine praktikable Lösung.

    Es kann mit viel Experimentieren getrickst werden, die Lösung funktioniert in der Regel aber nur mit einer einzigen Fentergröße bei einem bestimmten Zoomfaktor. Im Endeffekt also nur auf dem eigenen Rechner in dem eigenen Browser oder in einem starren Layout.

    Ich habe mal vor langer Zeit aus Spaß eine Lösung mit einem Bild erstellt. Das Bild kann natürlich durch eine Überschrift ersetzt werden und auch in der Höhe verschoben werden. Das ist aber mit viel rumprobieren verbunden.

    Bild in zwei Spalten

    Gruss

    MrMurphy

    1. @@MrMurphy1

      Wenn die Überschrift links und rechts umfloßen werden soll gibt es keine praktikable Lösung.

      Doch, in IE und Edge gibt es eine: Beispiel. Andere Browser unterstützen CSS Exclusions noch nicht.

      BTW, das war damals die zweite Frage, die ich jemals hier im Forum gestellt hatte.

      LLAP 🖖

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

      Ich habe mal vor langer Zeit aus Spaß eine Lösung mit einem Bild erstellt. Das Bild kann natürlich durch eine Überschrift ersetzt werden und auch in der Höhe verschoben werden. Das ist aber mit viel rumprobieren verbunden.

      Bild in zwei Spalten

      „Vor langer Zeit“ entschuldigt die Nichtverwendung automatischer Silbentrennung. Es entschuldigt aber nicht die Verwendung von Blocksatz.

      LLAP 🖖

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

    ich suche eine Möglichkeit eine Überschriften von Text in einem zweispaltigen Layout umfließen zu lassen. Prinzipiell vergleichbar dem umfließen von Bildern mit Text, wie man das von Word kennt.

    Hat jemand ne Idee wie sich das umsetzen ließe?

    Ich hab nicht mal eine Idee, was „das“ wäre.

    Wie genau sollen sich die Überschriften verhalten?

    LLAP 🖖

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

      Ich hab nicht mal eine Idee, was „das“ wäre.

      Hä? Eine Minute vorher hattest du noch eine.

      Gruß
      Kalk

      1. @@Tabellenkalk

        Ich hab nicht mal eine Idee, was „das“ wäre.

        Hä? Eine Minute vorher hattest du noch eine.

        Nein, da hatte ich mich mit MrMurphy1s Idee beschäftigt.

        Ich hab keine Lust auf Glaskugel, ob MrMurphy1 aus dem OP das herausgelesen hat, was m.orange eventuell gemeint haben könnte. Es liegt an m.orange klarzustellen, was „das“ ist.

        LLAP 🖖

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

          Nein, da hatte ich mich mit MrMurphy1s Idee beschäftigt.

          Ja, eben.

          Ich hab keine Lust auf Glaskugel, ob MrMurphy1 aus dem OP das herausgelesen hat, was m.orange eventuell gemeint haben könnte.

          und offensichtlich konntest du MrMurphys Idee, was gemeint sein könnte auch ohne Glaskugel nachvollziehen. Und hast dich sogar an dein eigenes Problem von vor 14 Jahren erinnert.

          Es liegt an m.orange klarzustellen, was „das“ ist.

          So besonders kryptisch hat sich m.orange nicht ausgedrückt, wobei Potential für Klarstellung immer gegeben ist.

          Wenn das für dich immer noch bedeutet, "keine Idee zu haben", dann haben wir zwei ein grundsätzlich unterschiedliches Verständnis dieser Redewendung.

          Gruß
          Kalk

          1. @@Tabellenkalk

            Ich hab keine Lust auf Glaskugel, ob MrMurphy1 aus dem OP das herausgelesen hat, was m.orange eventuell gemeint haben könnte.

            und offensichtlich konntest du MrMurphys Idee, was gemeint sein könnte

            Könnte.

            Ich sag ja nicht, dass MrMurphys Idee im Widerspruch zum OP stünde. Es ist eine mögliche Auslegung. Daneben wäre eine Vielzahl anderer Auslegungen möglich.

            So besonders kryptisch hat sich m.orange nicht ausgedrückt

            Vielleicht nicht kryptisch, aber klar auch nicht.

            wobei Potential für Klarstellung immer gegeben ist.

            In dem Falle großes, welches danach schreit, ausgeschöpft zu werden.

            Wenn das für dich immer noch bedeutet, "keine Idee zu haben", dann haben wir zwei ein grundsätzlich unterschiedliches Verständnis dieser Redewendung.

            „Keine Idee“ im Sinne von: nicht eine Idee (sondern viele).

            LLAP 🖖

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

              dann haben wir zwei ein grundsätzlich unterschiedliches Verständnis dieser Redewendung.

              „Keine Idee“ im Sinne von: nicht eine Idee (sondern viele).

              Ich ahnte es. Das macht es aber nicht grade einfach, mit dir zu kommunizieren.

              Gruß
              Kalk

  3. Moin allezusammen,

    besten Dank euch allen für die Infos, ich hab mal n Screenshot gemacht, um es klar zu stellen.

    Es soll die Option geben ein drei spaltiges Raster für einen Artikel anzulegen. Dieser Artikel hat eine Überschrift (h2), ein Bild links und einen zweispaltigen Text, welcher automatisch in die zweite Spalte umbricht. Die Überschrift/Auszeichnung (h3/h4) soll semantisch vor dem Text kommen, sich grafisch aber dazwischen schieben. Zumindest die Idee…

    Da muss sich der Grafiker wohl ne andere Lösung überlegen, da die Exclusions ja noch nicht funktionieren. 😉

    Soweit, Grüße und aus m.orange

    1. @@m.orange

      Es soll die Option geben ein drei spaltiges Raster für einen Artikel anzulegen. Dieser Artikel hat eine Überschrift (h2), ein Bild links und einen zweispaltigen Text, welcher automatisch in die zweite Spalte umbricht.

      Technisch gesehen sind das aber nicht 3 Spalten, sondern 2 (Bild und Text), wobei sich die Textspalte wiederun in 2 Spalten aufteilt (multi-column layout per CSS).

      Die Überschrift/Auszeichnung (h3/h4) soll semantisch vor dem Text kommen, sich grafisch aber dazwischen schieben.

      Dann ist es aber keine Überschrift. Wie soll man das Ding dem entsprechenden Abschnitt zuordnen, wenn es mittendrin steht?

      Oder soll das gar keine Überschrift sein, sondern so ein Hinkucker? (Der Fachbegriff dafür ist mir gerade entfallen.) Dann ist aber die Auszeichnung als h3 falsch. (h4 noch falscher, wenn’s keine h3 gibt.) Passend wäre div.

      Da muss sich der Grafiker wohl ne andere Lösung überlegen, da die Exclusions ja noch nicht funktionieren. 😉

      Das wäre kein Grund, es für Edge und IE nicht doch schon so umzusetzen. Man muss sich nur einen Fallback für alle anderen Browser überlegen.

      Aber wenn’s doch eine Überschrift ist, gehört sie IMHO nicht in die Mitte.

      LLAP 🖖

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

        Oder soll das gar keine Überschrift sein, sondern so ein Hinkucker? (Der Fachbegriff dafür ist mir gerade entfallen.) Dann ist aber die Auszeichnung als h3 falsch. (h4 noch falscher, wenn’s keine h3 gibt.) Passend wäre div.

        Aikätscher.

        Bis demnächst
        Matthias

        --
        Rosen sind rot.
        1. Servus!

          Hallo Gunnar Bittersmann,

          Oder soll das gar keine Überschrift sein, sondern so ein Hinkucker? (Der Fachbegriff dafür ist mir gerade entfallen.)

          Aikätscher.

          oder teaser

          Hier (CSS/Anwendung/Hängende Interpunktion) wird auch pull quotes verwendet.

          Herzliche Grüße

          Matthias Scharwies

          --
          Es gibt viel zu tun: ToDo-Liste
          1. @@Matthias Scharwies

            […] wird auch pull quotes verwendet.

            Pull quote war’s wohl, was ich meinte.

            Und wenn dort ein Satz aus dem übrigen Text drinsteht, wäre wohl nicht <div> angebracht, sondern <div aria-hidden="true">.

            Hier (CSS/Anwendung/Hängende Interpunktion)

            Aua! Bei machen Artikeln im SELFHTML-Wiki frag ich mich manchmal, warum es die Schreiber nicht schaffen, aus anderen Quellen richtig abzuschreiben.

            LLAP 🖖

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

              Hier (CSS/Anwendung/Hängende Interpunktion)

              Aua! Bei machen Artikeln im SELFHTML-Wiki frag ich mich manchmal, warum es die Schreiber nicht schaffen, aus anderen Quellen richtig abzuschreiben.

              Ich hab mal einige Berichtigungen/Ergänzungen vorgenommen.

              Ich verstehe aber den ganzen Artikel nicht. Überschrift: Hängende Interpunktion, darin als Unterpunkt Typographische Grundlagen: die Erklärung der Anführungszeichen (in verschiedenen Sprachen). Logisch wäre es doch andersrum: Überschrift Satzzeichen, Unterpunkt Hängende Interpunktion.

              Der Artikel geht auf „…“ vs. »…« ein, verschweigt aber, dass »…« nicht raushängen, weil sie die Höhe eines Kleinbuchstaben haben und keine Löcher am Zeilenanfang/-ende in den Text reißen.

              Aus demselben Grund hängen auch ! und ? nicht raus.

              Die verwendete Schriftart ist untauglich, um den Unterschied zwischen “ und ” bzw. ‘ und ’ zu vermitteln.

              LLAP 🖖

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

                Die verwendete Schriftart ist untauglich, um den Unterschied zwischen “ und ” bzw. ‘ und ’ zu vermitteln.

                Und ist damit in schlechter Gesellschaft.

                LLAP 🖖

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

                Ich hab mal einige Berichtigungen/Ergänzungen vorgenommen.

                Screenshot der Tabelle

                Warum ist »…« da eingerückt? Kann das mal jemand, der sich mit Wiki-Syntax auskennt, berichtigen?

                LLAP 🖖

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

                  Screenshot der Tabelle

                  Warum ist »…« da eingerückt? Kann das mal jemand, der sich mit Wiki-Syntax auskennt, berichtigen?

                  ☑️

                  Bis demnächst
                  Matthias

                  --
                  Rosen sind rot.
          2. Hallo Matthias.

            Oder soll das gar keine Überschrift sein, sondern so ein Hinkucker? (Der Fachbegriff dafür ist mir gerade entfallen.)

            Aikätscher.

            oder teaser

            Als Teaser bezeichnet man etwas anderes, nämlich einen Textabschnitt zwischen Überschrift und Fließtext, der entweder eine kurze Zusammenfassung oder Einleitung enthält. Im Deutschen heißt dieser Abschnitt Anreißer.

            Im Web wird der Teaser gern auch ohne den normalerweise anschließenden Fließtext verwendet, wenn etwa mehrere Nachrichtenbeiträge auf einer Portalseite nur angerissen werden sollen.

            MfG, at

    2. Hallo,

      Da muss sich der Grafiker wohl ne andere Lösung überlegen, da die Exclusions ja noch nicht funktionieren. 😉

      Nicht unbedingt… Es gibt im Netz einige Möglichkeiten, das browserübergreifend umzusetzen.

      Finde ich jetzt zwar blöd das nur zu verlinken, aber ist leider zu komplex und will mich ja auch nicht mit fremden Federn schmücken.

      Bsp. 1 (einfaches Javascript)
      http://www.donvanone.de/float_at_bottom.html

      Bsp. 2 (komplexer, dort vor allem auch den Link zu github(CSS Shapes polyfill) beachten)
      https://www.html5rocks.com/en/tutorials/shapes/getting-started/

      Gruss
      Henry