Barksalot: Text anordnen

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

akzeptierte Antworten

  1. 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.

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

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. 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…

    1. Hallo Regina,

      danke dir.

      Bis bald!
      Bernd

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

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  3. 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

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

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. 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

      --
      sumpsi - posui - clusi
      1. @@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&shy;montagen.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Hallo Gunnar,

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

          Bis bald!
          Bernd

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

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    2. 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

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

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Hallo Gunnar,

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

          Bis bald!
          Bernd

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

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann