Responsive design

[Siegfried M.]

Moin,

Ich habe jetzt einfach mehrere zusammengehörige Texte untereinander geschrieben. Im Augenblick umrahmt durch <p> und </p>.

Durch was soll ich das p-tag ersetzen?

Am Smartphone kommt jetzt alles schön untereinander.

Nun sollen aber bei breiterem Display zwei Spalten entstehen mit den Textblöcken 3 und 5 im linken und dem Rest im rechten Teil.

Wie kann ich dies erreichen?

Das Einzige, was ich weiß, dass hierzu media queries dienen.

Habt Ihr vielleicht ein einfaches Beispiel?

Nette Sonntagsgrüße

Siggi

[Matthias Scharwies]

Servus!

Ich habe jetzt einfach mehrere zusammengehörige Texte untereinander geschrieben. Im Augenblick umrahmt durch <p> und </p>.

Durch was soll ich das p-tag ersetzen?

Nicht ersetzen, sondern evtl. durch Gruppierungselemente wie div, article etc ergänzen.

Am Smartphone kommt jetzt alles schön untereinander.

Nun sollen aber bei breiterem Display zwei Spalten entstehen mit den Textblöcken 3 und 5 im linken und dem Rest im rechten Teil.

Wie kann ich dies erreichen?

Es gibt da mehrere Möglichkeiten:

1. Media Queries

Das Einzige, was ich weiß, dass hierzu media queries dienen.

Im Holy-Grail-Layout gibt es ab 45em Breite mehrere Spalten:

body {
	display: grid;
}

/* 3-spaltiges Layout für breitere Viewports */
@media (min-width: 45em) {
	body {
		grid-template-columns: 1fr 3fr 1fr;
		grid-template-rows: auto 1fr min-content;
	}
}

2. responsive_Raster_ohne_Media_Queries

Keine Zauberei, sondern nur eine flexible Festlegung der Rasterfelder:

main {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
  color: black;
  font: 1em/1.3 Cambria, serif;
}

Das würde man eher bei Bildergalerien machen.

3. Spalten mit CSS

Typografie/Spalten#columns

.mehrspaltig {
  column-width: 12em;
  max-width: 40em; 
}

Unten sieht man, wie man Überschriften über mehrere Spalten verteilen kann.
Das sollte man aber nur in Ausnahmefällen tun.

Herzliche Grüße
Matthias Scharwies

[Siegfried M.]

Hallo Matthias,

mein Problem im Ausgangsbeitrag war, wie ordne ich die untereinander stehenden Blöcke den linken und rechten Spalten zu.

Schönen Sruß

Siggi

[Matthias Scharwies]

Servus!

Hallo Matthias,

mein Problem im Ausgangsbeitrag war, wie ordne ich die untereinander stehenden Blöcke den linken und rechten Spalten zu.

Du hast drei Absätze. Damit nicht deine ganze Seite drei Spalten kriegt, packe ich ein wrapper drum:

<div class="wrapper">
  <p>1. Absatz</p>

  <p>2. Absatz</p>

  <p>3. Absatz</p>
</div>

Die sind im Lesefluss untereinander, wie in einem Buch.

Jetzt kommt das CSS ins Spiel; z.B. das im 1. Beispiel erwähnte Grid:

	.wrapper {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto 1fr min-content;
	}

(Ich lass die media querie mal weg. Die brauchst du aber!)

Jetzt sind die drei Absätze automatisch nebeneinander

| 1. Absatz | 2. Absatz | 3. Absatz |

Da musst/willst du nix zuordnen; der erste Absatz kommt links, der zweite in der Mitte, der dritte rechts.

Auch bei columns verteilt der Browser die Absätze automatisch.

Bitte lies die verlinkten Tutorials.

Herzliche Grüße
Matthias Scharwies

[Rolf B]

Hallo Matthias,

mich deucht, du diskutierst an Siegfrieds Frage vorbei.

Hallo Siegfried,

ich spiegele zunächst mein Verständnis der Sache und lasse die Technik erstmal weg. Denn mir scheint, als wäre dein Ansinnen ganz durchdacht – aber das kann ein Irrtum sein, ich kenne deine Seite nicht.

Du hast vereinfacht gesagt dieses HTML:

<p>1111111</p>
<p>2222222<br>2222222</p>
<p>3333333<br>3333333<br>3333333</p>
<p>4444444</p>
<p>5555555<br>5555555</p>

Schmal soll das alles untereinander, so weit, so einfach. Aber in der Breitdarstellung willst Du in etwa so etwas?

3333333  1111111
3333333  
3333333  2222222
         2222222
5555555  
5555555  4444444

Ich wüsste tatsächlich erstmal nicht, wie man das mit CSS lösen könnte, vor allem, wenn die Spaltenverteilung natürlich aussehen soll. Dafür ist eigentlich die columns-Eigenschaft vorgesehen, die hier aber nicht verwendbar ist, weil man damit die Inhalte nicht umsortieren kann.

Umsortieren geht bei Flexbox mit order, ABER bei Flexbox gibt's keinen von Browsern implementierten Weg, einen Wrap-Umbruch zu erzwingen. Dafür bräuchte es wrap-before/wrap-after, die zwar in der CSS Text 4 Spezifikation stehen, aber nirgends implementiert sind.

Grid-Layout erlaubt eine bessere Steuerung der Anordnung, hat aber das Problem, dass alle Paragraphen Absätze in Grid-Zellen einsortiert werden und keine natürliche Spaltenanordnung erfolgt. Mit Grid wäre dies möglich:

3333333  1111111
3333333  
3333333

5555555  2222222
5555555  2222222
 
         4444444

und ich nehme an, dass Du DAS nicht willst. Mit Masonry-Layout könnte man das verbessern, jedoch ist das ebenfalls nur in Safari und Firefox experimentell enthalten, in Chromia gar nicht.

Aber was ist der Grund für deine Wunschanordnung? Das müsstest Du erklären, denn außer "Siegfried WILL diesen Drachen unbedingt erlegen" gibt es für uns keine Notwendigkeit dafür. Spaltenlayout mit columns, wie Matthias schon angerissen hat, würde Dir dies hier ermöglichen:

1111111  3333333
         
2222222  4444444
2222222  
         5555555
3333333  5555555
3333333  

Ja, mir ist bewusst, dass hier eine Witwe hinterlassen wurde (früher auch Hurenkind genannt), aber wenn die Absätze länger sind, ist die Chance dafür geringer und man kann das mit den CSS-Eigenschaften widows und orphans auch steuern.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Problem, dass alle Paragraphen

Alle was? Dieses Posting hattest du gelesen?

Ja, mir ist bewusst, dass hier eine Witwe hinterlassen wurde (früher auch Hurenkind genannt), aber wenn die Absätze länger sind, ist die Chance dafür geringer und man kann das mit den CSS-Eigenschaften widows und orphans auch steuern.

„Ich bin es, Robin Hood, der Rächer der Enterbten, der Beschützer von Witwen und Waisen.“

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar Bittersmann,

Dieses Posting hattest du gelesen?

Mutmaßlich schon. Es ist aber ein p Element und kein a Element. Lass mir doch meine falschen Freunde 😛

Aber da ich weiß, dass Du nach dem Prinzip "Nicht zusammengeschissen ist genug gelobt" handelst, bin ich zumindest froh, dass Du keine relevanten Einwände gegen meinen Beitrag hast 😅.

Rolf

[Matthias Scharwies]

Servus!

Nun sollen aber bei breiterem Display zwei Spalten entstehen mit den Textblöcken 3 und 5 im linken und dem Rest im rechten Teil.

mich deucht, du diskutierst an Siegfrieds Frage vorbei.

ja, warum auch nicht.

Ich lese von links nach rechts und von oben nach unten.
Viele andere machen das auch so.

Welchen Grund sollte es geben, zuerst links die 3 und rechts dann die 1 und 2 zu lesen?

Falls es doch einen Grund gibt: In den verlinkten Tutorials kam auch der Begriff order vor.
Davon rate ich aber ab und erstelle auch kein Beispiel!

Herzliche Grüße
Matthias Scharwies

[Rolf B]

Hallo Matthias Scharwies,

Welchen Grund sollte es geben, zuerst links die 3 und rechts dann die 1 und 2 zu lesen?

Ja, das ist eine sehr gute Frage. Weshalb ich sie explizit gestellt habe und die Probleme benannt habe.

Allerdings habe ich aus akademischem Interesse auch geprüft, ob sich dieser Wunsch mit CSS überhaupt lösen lässt, ohne sich die Finger zu brechen, und dabei wrap-before/wrap-after entdeckt habe, die irgendwann kommen werden 😀

Rolf

[Gunnar Bittersmann]

@@Matthias Scharwies

Welchen Grund sollte es geben, zuerst links die 3 und rechts dann die 1 und 2 zu lesen?

Falls es doch einen Grund gibt: In den verlinkten Tutorials kam auch der Begriff order vor.
Davon rate ich aber ab

Wegen der unterschiedlichen Reihenfolge im DOM und in der visuellen Darstellung, nicht wahr? Wodurch die Seite in Screenreadern nicht so vorgelesen wird, wie sie dargestellt wird, was für sehende Screenreader-Nutzer sehr verwirrend ist.

Was sich aber mit reading-flow beheben ließe – bislang allerdings ausschließlich in Chromium-Browsern.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

1985 lernte ich in der Ausbildung: Schalter bekommen Junge, wenn man nicht aufpasst.

Und wieder ist es wahr. Order war toll, für einen gewissen Wert von toll, und nun erfindet man weitere Eigenschaften, um die Probleme zu lösen und trotzdem kompatibel zu bleiben. Da Web ersäuft noch in seiner Legacy…

Rolf

[Siegfried M.]

@@Alle Helfer,

Ihr habt mich überzeugt, die gewünschte Einsortierung ist Quatsch.

Es kommt also der Vorschlag von Matthias in Frage.

Mal sehen, was ich daraus machen kann!

Danke