Text anordnen

[Barksalot]

Hallo,

lässt sich so etwas mit Flexbox umsetzten?

Der Aufbau denke ich sollte so richtig sein?

<section class="info">
			<h2>Faszinieren Sie Ihre Gäste mit Fotomontagen der besonderen Art</h2>
			<h3>Der Greenscreen</h3>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
			<p><strong>Sie sind an einer Fotobox für Ihre Veranstaltung interesiert?</strong></p>
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
		</section>

Ich weiß im Voraus nie, wie viele <p> auf der rechten Seite stehen. Die Linke Seite ist immer gleich aufgebaut.

Vielen Dank für die Hilfe,
Bernd

[beatovich]

hallo

Ich weiß im Voraus nie, wie viele <p> auf der rechten Seite stehen. Die Linke Seite ist immer gleich aufgebaut.

Das wäre dann ein Fall für max-height und overflow:auto.

[Gunnar Bittersmann]

@@beatovich

Ich weiß im Voraus nie, wie viele <p> auf der rechten Seite stehen. Die Linke Seite ist immer gleich aufgebaut.

Das wäre dann ein Fall für max-height und overflow:auto.

?? Davon war keine Rede.

LLAP 🖖

[Regina Schaukrug]

article als Kind-Element von section

Du legst in die <section> den <article>, die Überschriften in den <header> des <article> und die Absätze in den Wrapper

<section …>
    <article …>
          <header>
              <h2>Überschrift 2</h2>
              <h3>Überschrift 3</h3>
          </header>
          <div class="articleContentWrapper">
              <p>Lorem Yspum…</p>
              <p>Dolor sit amed…</p>
          </div>
    </article>
</section>

Mit dem CSS hilft Dir sicher jemand andere…

[Barksalot]

Hallo Regina,

danke dir.

Bis bald!
Bernd

[Gunnar Bittersmann]

@@Regina Schaukrug

article als Kind-Element von section

Du legst in die <section> den <article>

Warum soll das article-Element hier semantisch sinnvoll sein?

die Überschriften in den <header>

Aber nicht so, wie du es gatan hast.

und die Absätze in den Wrapper

Wozu sollte ein zusätzliches Element hier nötig sein?

LLAP 🖖

[beatovich]

hallo

Der Aufbau denke ich sollte so richtig sein?

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

Denke an ein Outline.

Ich würde da

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

vorziehen

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

[Rolf B]

Hallo Gunnar,

kann man ohne riesigen Umstand im Breit-Modus der linken Spalte eine maximale Breite geben? Ich habe den Eindruck, dass es nicht so gut aussieht wenn sie bei breiteren Viewports gleich breit sind.

Rolf

[Gunnar Bittersmann]

@@Rolf B

kann man ohne riesigen Umstand im Breit-Modus der linken Spalte eine maximale Breite geben?

Hm …

Ich habe den Eindruck, dass es nicht so gut aussieht wenn sie bei breiteren Viewports gleich breit sind.

Den Eindruck hatte ich auch. Ich hab des Verhältnis jetzt mal auf 3 : 5 geändert.

Dazu noch automatische Silbentrennung bei .info header p und ein bedingter Trennstrich bei Foto­montagen.

LLAP 🖖

[Barksalot]

Hallo Gunnar,

hmm, jetzt ist die linke Spalte aber sehr sehr klein.

Bis bald!
Bernd

[Gunnar Bittersmann]

@@Barksalot

hmm, jetzt ist die linke Spalte aber sehr sehr klein.

Oops, ich hatte im Pen auch 2 : 3 gesetzt. Jetzt ist es 3 : 5. Kannste ja einstellen, wie es zu deinem Inhalt am besten passt.

LLAP 🖖

[Barksalot]

Hallo Gunnar,

danke für deine Hilfe. Genau so habe ich es mir vorgestellt. Hab jetzt noch den Strich auf der linken Seite eingefügt:

https://codepen.io/anon/pen/QVBRXj?editors=1100

Passt das so oder würdest du dieses anderes machen?

Bis bald!
Bernd

[Gunnar Bittersmann]

@@Barksalot

Passt das so oder würdest du dieses anderes machen?

Passt. Ich würde das Pseudoelement aber auf display: block setzen, nicht flex.

Und die Breite nicht in Prozent angeben, sondern in em. Bei 2em ist der Strich ziemlich genau so breit wie das Wort „Art“ (in Futura).

Statt 3px kannst du für border-width auch medium angeben – und schon ist das Stylesheet px-frei.

LLAP 🖖

[Barksalot]

Hallo Gunnar,

ok, danke. Habe ich geändert. Wie errechnet sich eigentlich medium beim border? Oder sind das immer 3px?

Bis bald!
Bernd

[Gunnar Bittersmann]

@@Barksalot

Wie errechnet sich eigentlich medium beim border? Oder sind das immer 3px?

Das ist schnell herausgefunden. DuckDuckGo bietet den Vorteil der Bangs: Die Suche nach !mdn border-width führt direkt zu den Treffern im MDN.

Die deutsche Seite zu border-width gibt tatsächlich 1px, 3px bzw. 5px für thin, medium und thick an. Vermutlich ist es so in den meisten Browsern implementiert.

Die englische Seite ist da vorsichtiger: “the specification doesn’t define the exact thickness denoted by each keyword”. Die Spezifikation ist dort verlinkt. Click auf <line-width> …

LLAP 🖖