Abstände, Zentrierung, responsive

[Walter]

Hallo,

zu dem Beispiel habe ich folgende Fragen.

• Wie kann ich die vertikalen Abstände verkleinern?

• Ist die mittige von h1, h2 mit text-align so korrekt?

• Wie erreiche ich bei breiten Bildschirmen, dass die beiden Texte nebeneinander stehen?

[Gunnar Bittersmann]

@@Walter

zu dem Beispiel habe ich folgende Fragen.

Ich hab auch welche: <links>? <rechts>? Solche Elemente gibt es in HTML nicht.

Überhaupt ist HTML nicht dazu da, die Positionierung (links, rechts) anzugeben. Wähle Elementtypen jeweils passend zum Inhalt: <header>, <nav>, <main> usw. – Beispiel

• Wie kann ich die vertikalen Abstände verkleinern?

Indem du die vertikalen Abstände verkleinerst. 😆

Vertikale Abstände sind bei horizontaler Schreibrichtung die Abstände in Blockrichtung, d.h. margin-block.

• Ist die mittige von h1, h2 mit text-align so korrekt?

Ja.

Ich würde da aber noch text-wrap: balance dazugeben: vorher | nachher

• Wie erreiche ich bei breiten Bildschirmen, dass die beiden Texte nebeneinander stehen?

Am besten vermutlich mit CSS Grid. Siehe Beispiel von oben.

🖖 Live long and prosper

[Rolf B]

Hallo Walter,

Wie erreiche ich bei breiten Bildschirmen, dass die beiden Texte nebeneinander stehen?

Wenn Du möchtest, dass zwei Elemente per Grid-Layout nebeneinander stehen, muss ihr Elternelement display:grid haben, nicht die Elemente selbst.

Damit das nur bei breiten Bildschirmen passiert, schließe diejenigen Regeln, die das Grid erstellen, in einne @media-Abfrag ein:

@media (width > 50em) {
   body {
      display: grid;
      grid-template-columns: 1fr 1fr;
   }
}

Das ist jetzt auf dein links/rechts-Beispiel gemünzt, in dem die "Links" und "Rechts" Elemente (die gerne gültiges HTML sein möchten, wie Gunnar schrieb) Kindelemente des Body sind.

Vielleicht hilft Dir unser Tutorial-Satz zu Grid weiter:
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid

Rolf