Text anordnen

[Gunnar Bittersmann]

@@Barksalot

lässt sich so etwas mit Flexbox umsetzten?

Das ist mir ohne zusätzliche Elemente im Markup nicht geglückt. Was nicht heißt, dass zusätzliche Elemente notwendig wären, sondern dass Flexbox nicht das Mittel der Wahl ist – das wäre Grid.

Der Aufbau denke ich sollte so richtig sein?

Nein. „Der Greenscreen“ ist keine Unterüberschrift. Beat sprach es bereits an: die Outline (alle Überschriften auf der Seite). Was soll ein Nutzer, der sich die Outline ausgeben lässt (wozu auch Screenreader-Nutzer gehören, die von Überschrift zu Überschrift navigieren), als Überschrift präsentiert bekommen?

Variante 1: beides

<h2>
	<span>Der Greenscreen</span>
	<span class="separator visually-hidden">–</span>
	<span class="description">Faszinieren Sie Ihre Gäste mit Fotomontagen der besonderen Art</span>
</h2>

Das Trennzeichen visuell verstecken.

Variante 2: „Faszinieren Sie Ihre Gäste mit Fotomontagen der besonderen Art“

<header>
	<h2>Faszinieren Sie Ihre Gäste mit Fotomontagen der besonderen Art</h2>
	<p>Der Greenscreen</p>
</header>

Scheint mir nicht besonders sinnvoll zu sein.

Variante 3: „Der Greenscreen“

<header>
	<h2>Der Greenscreen</h2>
	<p>Faszinieren Sie Ihre Gäste mit Fotomontagen der besonderen Art</p>
</header>

Die Auszeichnung als h2 und p hat nichts damit zu tun, was davon in größerer Schrift dargestellt wird.

Ich gehe im Folgenden von dieser Variante aus.

Nun wird der Bereich von .info (bei genügent breitem Viewport und Browserunterstützung von grid) in 2 Spalten geteilt, ich nenne sie man info-header und info-body:

@supports (display: grid)
{
	@media (min-width: 40em)
	{
		.info
		{
			display: grid;
			grid-template-columns:
				[info-header-start] 1fr
				[info-header-end info-body-start] 1fr
				[info-body-end];
			grid-template-rows: 1fr 1fr;
		}
	}
}

header kommt in die Spalte info-header; der Rest in info-body:

.info header
{
	grid-column: info-header;
	grid-row: 1 / -1;
}

.info > *
{
	grid-column: info-body;
}

(grid-template-rows/grid-row ist nötig, damit header die ganze Höhe füllen kann und nicht die Höhe der ersten Zelle in der Nachbarspalte bestimmt.)

Noch etwas gap zwischen die Spalten, noch etwas hübsch machen (dabei ist zu beachten, dass die Außenabstände von Grid-Zellen nicht zusammenfallen), und schon sieht’s so aus.

LLAP 🖖