Überschrift in zweispaltigen Layout von Text umfließen

[m.orange]

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

[MrMurphy1]

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

[Gunnar Bittersmann]

@@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 🖖

[Gunnar Bittersmann]

@@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 🖖

[Gunnar Bittersmann]

@@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 🖖

[Tabellenkalk]

Hallo,

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

Hä? Eine Minute vorher hattest du noch eine.

Gruß
Kalk

[Gunnar Bittersmann]

@@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 🖖

[Tabellenkalk]

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

[Gunnar Bittersmann]

@@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 🖖

[Tabellenkalk]

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

[m.orange]

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

[Gunnar Bittersmann]

@@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 🖖

[Matthias Apsel]

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

[Matthias Scharwies]

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

[Gunnar Bittersmann]

@@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 🖖

[Gunnar Bittersmann]

@@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 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

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

Und ist damit in schlechter Gesellschaft.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich hab mal einige Berichtigungen/Ergänzungen vorgenommen.

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

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

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

☑️

Bis demnächst
Matthias

[at]

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

[Henry]

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