Text anordnen
Barksalot
- css
- html
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
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.
@@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 🖖
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…
Hallo Regina,
danke dir.
Bis bald!
Bernd
@@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 🖖
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
@@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?
<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.
<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.
<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 🖖
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
@@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 🖖
Hallo Gunnar,
hmm, jetzt ist die linke Spalte aber sehr sehr klein.
Bis bald!
Bernd
@@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 🖖
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
@@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 🖖
Hallo Gunnar,
ok, danke. Habe ich geändert. Wie errechnet sich eigentlich medium beim border? Oder sind das immer 3px?
Bis bald!
Bernd
@@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 🖖