Spaltenumbruch und Bindung von Überschrift und Paragraph

[TS]

Hallo und guten Abend,

ich habe Probleme mit dem Spaltenumbruch per CSS.

Es gibt ein mehrspaltiges Layout. Im Textfluss befinden sich im wesentlichen Überschriften (h3) und Paragraphen. Ein paar Listen und ein paar Bilder könnten auch noch vorkommen.

Nun bekomme ich zwei Dinge einfach nicht hin:

1. Obere Bündigkeit der Spalten, wenn mit einer Überschrift begonnen wird.
2. Zusammenhalten von Überschrift und nachfolgendem Paragraph (oder Liste|Bild), wenn in der Spalte unten für beides kein Platz mehr ist. Die Überschrift verbleibt immer in der Vorgängerspalte. Sieht ziemlich doof aus, wenn da unten noch eine Überschrift alleine rumgammelt und der eigentliche Text erst in der nächsten Spalte beginnt.

Ich habe schon versucht, mit <article> zu binden, aber das geht auch wieder nicht, da bei längerem Artikel sehr wohl innerhalb eines Artikels umgebrochen werden darf/muss.

Gibt es eine schlaue Lösung?

Grüße
TS

[Gunnar Bittersmann]

@@TS

1. Obere Bündigkeit der Spalten, wenn mit einer Überschrift begonnen wird.

margin-top: 0 für die Überschrift und den Abstand zwischen den Abschnitten (sections?) anders erzeugen.

2. Zusammenhalten von Überschrift und nachfolgendem Paragraph (oder Liste|Bild), wenn in der Spalte unten für beides kein Platz mehr ist. Die Überschrift verbleibt immer in der Vorgängerspalte. Sieht ziemlich doof aus, wenn da unten noch eine Überschrift alleine rumgammelt und der eigentliche Text erst in der nächsten Spalte beginnt.

Wenn ich mir die Unterstützung von (page-)break-after so ansehe, hast du da wohl (noch) schlechte Karten.

Gibt es eine schlaue Lösung?

Bugtracker der Browser mit Bugs füllen, auf dass das endlich mal ordentlich implementiert wird.

Aber vielleicht ist es noch schlauer, auf mehrspaltigen Text im Web zu verzichten. Soll die Nutzerin ständig hoch- und runterscrollen?

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Wenn ich mir die Unterstützung von (page-)break-after so ansehe, hast du da wohl (noch) schlechte Karten.

Wenn ich mir die Unterstützung von break-after so ansehe, hast du wohl bessere Karten. IrgendEin Browser sollte es können.

Es ist mir allerdings nicht geglückt, den IE 11 dazu zu bewegen: CodePen. Ist bei euch in IE/Edge ein Spaltenumbruch zwischen der Überschrift „Article 4“ und dem nachfolgenden Text?

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Es ist mir allerdings nicht geglückt, den IE 11 dazu zu bewegen: CodePen. Ist bei euch in IE/Edge ein Spaltenumbruch zwischen der Überschrift „Article 4“ und dem nachfolgenden Text?

Der Edge macht es richtig („Article 4“ steht in der neuen Spalte), IE11 nicht.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Der Edge macht es richtig („Article 4“ steht in der neuen Spalte), IE11 nicht.

Seltsam. Sogar Microsoft macht einen glauben, es ginge ab IE 10.

LLAP 🖖

[TS]

Hallo und guten Morgen Gunnar,

Wenn ich mir die Unterstützung von break-after so ansehe, hast du wohl bessere Karten. IrgendEin Browser sollte es können.

Es ist mir allerdings nicht geglückt, den IE 11 dazu zu bewegen: CodePen. Ist bei euch in IE/Edge ein Spaltenumbruch zwischen der Überschrift „Article 4“ und dem nachfolgenden Text?

Ich habe hier einen FF 43.0.1 und der macht noch einen Spaltenumbruch zwischen der Überschrift "Article 4" und dem Textblock dazu.

Grüße
TS

[Gunnar Bittersmann]

@@TS

Ich habe hier einen FF 43.0.1

Kannst du den mal bitte rückstandslos entsorgen? Aktuell ist 50.0.2.

und der macht noch einen Spaltenumbruch zwischen der Überschrift "Article 4" und dem Textblock dazu.

Das ist auch laut Can I Use nicht anders zu erwarten: “Firefox does not support break-*.”

LLAP 🖖

[TS]

Hallo und guten Morgen,

Ich habe hier einen FF 43.0.1

Kannst du den mal bitte rückstandslos entsorgen? Aktuell ist 50.0.2.

Dann muss ich auch die Rechner entsorgen, auf denen das noch läuft. 43.0.1 ist der letzte, der da noch ohne Abstürze läuft.

Grüße
TS

[Gunnar Bittersmann]

@@TS

Ich habe hier einen FF 43.0.1

Kannst du den mal bitte rückstandslos entsorgen? Aktuell ist 50.0.2.

Dann muss ich auch die Rechner entsorgen, auf denen das noch läuft. 43.0.1 ist der letzte, der da noch ohne Abstürze läuft.

Jedenfalls solltest du die Rechner vom Internet trennen, wenn da noch 43.0.1 drauf läuft.

LLAP 🖖

[TS]

Hallo und guten Morgen,

Ich habe hier einen FF 43.0.1

Kannst du den mal bitte rückstandslos entsorgen? Aktuell ist 50.0.2.

Dann muss ich auch die Rechner entsorgen, auf denen das noch läuft. 43.0.1 ist der letzte, der da noch ohne Abstürze läuft.

Jedenfalls solltest du die Rechner vom Internet trennen, wenn da noch 43.0.1 drauf läuft.

Was machen die sonst, was sie ohne Browser nicht machen würden?

Grüße
TS

[MrMurphy1]

Hallo

Ich gehe mal davon aus, dass du mit deiner Frage Multicolumn meinst, obwohl du es mit keinem Wort erwähnst.

Gibt es eine schlaue Lösung?

Wenn du damit eine Lösung meinst die browserübergreifend funktioniert - ja.

Allerdings muss das CSS den Eigenheiten von Multicolumn angepasst werden.

Obere Bündigkeit der Spalten, wenn mit einer Überschrift begonnen wird.

Offensichtlich hat multicolumn etwas eigenartige Ansichten wie es mit den Collapsing Margins umgehen soll.

Als einfachste Lösung habe ich für mich herausgefunden, allen Blockelementen (zu denen auch die Überschriften gehören) einen margin-top von 0 zu geben und die gewollten Abstände über margin-bottom festzulegen.

Da es sich in der Regel nur um einige wenige Elemente handelt, kannst du dafür einmal die CSS-Anweisungen einrichten und dann für Multicolumn immer wieder verwenden.

Zusammenhalten von Überschrift und nachfolgendem Paragraph (oder Liste|Bild)

Das funktioniert browserübergreifend über die Anweisung display: inline-block.

Wenn zum Beispiel einzelne Absätze (p-Elemente) nicht auf zwei Spalten verteilt werden sollen kann ihnen die Anweisung direkt zugewiesen werden. Auf meiner Testseite zum Beispiel die einzelnen Ali-Sprüche, die sich jeweils in einem Absatz befinden.

Wenn, wie in deinem Fall, eine Überschrift und der nachfolgende Absatz immer in einer Spalte stehen sollen, können die mit einem div umgeben werden, dem dann inline-block zugewiesen wird.

Bei ul-Listen kann dem ul-Element inline-block zugewiesen werden. Oder dem figure-Element um img und figcaption zusammenzuhalten. Und so weiter.

Ich stelle mal zum direkten Ausprobieren, auch in verschiedenen Browsern und Geräten, meine Multicolumn-Testseite temporär zur Verfügung:

Multicolumn-Testseite (temporär)

Die orangenen Ränder dienen nur der optischen Verdeutlichung von Informationen, die nicht auf mehrere Spalten verteilt werden sollen und entfallen in der Praxis.

Falls die Ränder doch in der Praxis angezeigt werden sollen, sollten die oberen und unteren Abstände noch etwas angepasst werden.

In dem Flaggen-Text kann auch schön nachvollzogen werden, dass Fließtext und Blockelemente im Multicolumn-Container auf einer Höhe beginnen.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Gibt es eine schlaue Lösung?

Wenn du damit eine Lösung meinst die browserübergreifend funktioniert - ja.

Nicht so schnell, junger Freund.

Allerdings muss das CSS den Eigenheiten von Multicolumn angepasst werden. […]
Wenn, wie in deinem Fall, eine Überschrift und der nachfolgende Absatz immer in einer Spalte stehen sollen, können die mit einem div umgeben werden

Iiiihh!!!

Was soll’s, sei’s drum. (No pun intended.)

Das funktioniert browserübergreifend über die Anweisung display: inline-block.

Wenn zum Beispiel einzelne Absätze (p-Elemente) nicht auf zwei Spalten verteilt werden sollen […]

Das ist aber sehr „um die Ecke gedacht“. Wenn innerhalb eines Absatzes kein Spaltenumbruch erfolgen soll – dafür gibt es eine spezielle Eigenschaft: (page-)break-inside: avoid; und die funktioniert browserübergreifend.

[…] kann ihnen die Anweisung direkt zugewiesen werden.

BTW, es gibt in CSS keine „Anweisungen“.

Aber jetzt kommt’s: Weder dein display: inline-block noch (page-)break-inside: avoid erfüllt die gewünschten Anforderungen:

Wenn, wie in deinem Fall, eine Überschrift und der nachfolgende Absatz immer in einer Spalte stehen sollen […]

Nein, Spaltenumbrüche sollen innerhalb von Absätzen ja durchaus erlaubt sein. Sie sollen nicht zwischen Überschrift und dem Absatz danach stattfinden.

Der ersten Absatz nach einer Überschrift darf durchaus auf zwei Spalten verteilt werden. Inbesondere wenn dieser länger ist, macht sich das störend bemerkbar, wenn man das unterbinden würde.

Da bleibt wohl doch nur, auf die Unterstützung der für den Umbruch zwischen Überschrift und Absatz zuständigen CSS-Eigenschaft zu warten: (page-)break-after ((page-)break-before).

LLAP 🖖

[TS]

Hallo und guten Morgen,

Nein, Spaltenumbrüche sollen innerhalb von Absätzen ja durchaus erlaubt sein. Sie sollen nicht zwischen Überschrift und dem Absatz danach stattfinden.

Der ersten Absatz nach einer Überschrift darf durchaus auf zwei Spalten verteilt werden. Inbesondere wenn dieser länger ist, macht sich das störend bemerkbar, wenn man das unterbinden würde.

Da bleibt wohl doch nur, auf die Unterstützung der für den Umbruch zwischen Überschrift und Absatz zuständigen CSS-Eigenschaft zu warten: (page-)break-after ((page-)break-before).

Ich hatte sowas wildes, wie

h3 + p {
    margin-top: 5pt;
    break-before: avoid;
    break-before: avoid-column;

    -webkit-column-break-before: avoid-column;
    -moz-column-break-before: avoid-column;

    -webkit-column-break-before: avoid;
    -moz-column-break-before: avoid;
}

ausprobiert.

Und auch anders herum wntsprechend mit break-after.

Scheint wohl noch zu dauern...

Grüße
TS

[TS]

Hallo und guten Morgen,

Ich gehe mal davon aus, dass du mit deiner Frage Multicolumn meinst, obwohl du es mit keinem Wort erwähnst.

Ja. Das ist gemeint.

Obere Bündigkeit der Spalten, wenn mit einer Überschrift begonnen wird.

Offensichtlich hat multicolumn etwas eigenartige Ansichten wie es mit den Collapsing Margins umgehen soll.

Das genau empfinde ich auch so...

Als einfachste Lösung habe ich für mich herausgefunden, allen Blockelementen (zu denen auch die Überschriften gehören) einen margin-top von 0 zu geben und die gewollten Abstände über margin-bottom festzulegen.

Da es sich in der Regel nur um einige wenige Elemente handelt, kannst du dafür einmal die CSS-Anweisungen einrichten und dann für Multicolumn immer wieder verwenden.

Die Margins habe ich hier überall noch nicht verstanden, welcher nun gilt: der kleinste, der größte, beide zufällig abwechselnd? Scheint mir fast so, als wäre es letzteres...

Zusammenhalten von Überschrift und nachfolgendem Paragraph (oder Liste|Bild)

Das funktioniert browserübergreifend über die Anweisung display: inline-block.

Wenn, wie in deinem Fall, eine Überschrift und der nachfolgende Absatz immer in einer Spalte stehen sollen, können die mit einem div umgeben werden, dem dann inline-block zugewiesen wird.

Das ist eben nicht so einfach, weil die Textblöcke aus der Datenbank einfließen und das CSS ja nicht wissen kann, was kommt.

Aber ich werde mal mit inline-block experimentieren. Ist schon mal eine Möglichkeit, die ich bisher nicht berücksichtigt hatte.

Grüße
TS

[Gunnar Bittersmann]

@@TS

Aber ich werde mal mit inline-block experimentieren. Ist schon mal eine Möglichkeit, die ich bisher nicht berücksichtigt hatte.

Das sollte auch so bleiben. Wenn schon, dann bitteschön (page-)break-inside: avoid.

Und was dann passiert siehst du, wenn du im CodePen die Auskommentierung bei

section
{
	/*page-break-inside: avoid;/**/
}

wegnimmst.

LLAP 🖖

[TS]

Hallo und guten Tag,

ich verzweifele hier gleich am CSS:

p + h3 {
    color: red;
    margin-top: 15pt;
}

Das "red" habe ich nur zum Test reingenommen. Aber es wirkt sich aus!
Aber das "margin-top" hat keinerlei Auswirkung auf die h3-Überschrift. Die klebt am p, als wäre sie gar nicht vorhanden.

Nachtrag

padding-top wird eigenwilligerweise berücksichtigt.

Grüße
TS

[Matthias Apsel]

Hallo TS,

CSS ist ohne das HTML, auf das es wirken soll, ohne Aussagekraft. Schau in die Entwicklerkonsole oder zeig die komplette Seite, damit jemand anders schauen kann.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@TS

ich verzweifele hier gleich am CSS:

p + h3 {

Ein äußerst zweifelhafter Selektor, zweifelsohne.

Aber das "margin-top" hat keinerlei Auswirkung auf die h3-Überschrift. Die klebt am p, als wäre sie gar nicht vorhanden.

Und da fällt dein Weltbild zusammen‽

Blick in die Glaskugel: Es sind die Außenabstände, die zusammenfallen.

LLAP 🖖

[Nomo der Ator]

Betreff: h3 + p, ...

CSS-Code: p + h3 { ... }

Weißt du was du tust?

[TS]

Hallo und guten Tag,

Betreff: h3 + p, ...

CSS-Code: p + h3 { ... }

Weißt du was du tust?

Wenn Du die Reihenfolge meinst: im Subject des Postings ist sie falsch... Da hat mein Man-in-the-middle mal wieder stumpf alphabetisch sortiert ;-P

Aber sonst dachte ich schon, dass ich mich an die Doku /das Wiki halten könnte...

Grüße
TS