Vertikale Ausrichtung

[Sigrid]

Hallo,

wie kann ich in dem Beispiel erreichen, dass der Titel-Bereich nur so hoch ist wie das höchste Element darin (im vorliegenden Fall das <h1>?

[Der Martin]

n'Abend,

wie kann ich in dem Beispiel erreichen

  Titel {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100%;
    margin: 0;
    padding: 0;
    border: 1px red solid;
  }

Erstens: Bitte erfinde keine Phantasie-Elemente und erwarte dann, dass alles so läuft, wie du erwartest. Es gibt in HTML kein Titel-Element. Es gibt title, aber das hat eine ganz andere, eigene Bedeutung.

Zweitens: Was denn nun? display:grid oder display:flex? Beides zusammen ergibt keinen Sinn, und in dem Fall gewinnt die spätere Deklaration, also display:flex. Damit ist grid aus dem Rennen.

Drittens: Bedenke, dass h1 durch Defaults im Browser-Stylesheet margin und/oder padding nach oben und unten hat. Die machen sich hier im Platzbedarf bemerkbar.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

Erstens: Bitte erfinde keine Phantasie-Elemente

Das nicht.

und erwarte dann, dass alles so läuft, wie du erwartest.

Das schon. Das sollte man erwarten dürfen. Es ist nicht Aufgabe des CSS-Parsers, HTML-Fehler anzukreiden. Unbekannte Elementtypen werden behandelt wie span.

Es gibt in HTML kein Titel-Element.

Das wäre gern ein … was zur Seitenstrukturierung. Such dir was aus! Aber nicht irgendein beliebiges, sondern das passende!

Zweitens: Was denn nun? display:grid oder display:flex? Beides zusammen ergibt keinen Sinn, und in dem Fall gewinnt die spätere Deklaration, also display:flex. Damit ist grid aus dem Rennen.

Besser ist auch. Flex ist hier das richtige. (Das sieht man, wenn man nicht „links“ und „rechts“ schreibt, sondern unterschiedlich breite Begriffe wie „irgendwas“ und „was ganz anderes“.)

Drittens: Bedenke, dass h1 durch Defaults im Browser-Stylesheet margin und/oder padding nach oben und unten hat.

Padding wohl nicht.

Die machen sich hier im Platzbedarf bemerkbar.

Also auf 0 setzen.

---

Viertens: p {padding: 0 2rem;} Es gibt keinen Grund, warum die Textinhalte nicht bis zum linken bzw. rechten Rand (des Containerlements, also bis zur roten Linie) laufen sollten.

Du willst keinen Innanabstand für bestimmte Elmente, sondern den Zwischenraum zwischen den Elementen angeben. Zischenraum: mind the gap!

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Besser ist auch. Flex ist hier das richtige.

Ist es das?

(Das sieht man, wenn man nicht „links“ und „rechts“ schreibt, sondern unterschiedlich breite Begriffe wie „irgendwas“ und „was ganz anderes“.)

Wie soll es den aussehen? Alles zentriert, d.h. die Überschrift nicht in der Mitte?

Dann ist Flexbox richtig.

Wenn aber die Überschrift zentriert sein soll, also so:

dann ist Grid das Mittel der Wahl.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar Bittersmann,

Ist es das?

Okay, kommt drauf an was man will. Flex ist "eindimensional" - vom wrap abgesehen, Grid ist zweidimensional. Für ein <header>-Element, was der Titel mutmaßlich sein möchte und wo alle Elemente nebeneinander stehen sollen, kann man beides verwenden. Flex ist etwas weniger Schreibarbeit, Grid bietet mehr Optionen.

Aus meiner Sicht sollte dieses CSS hinreichen, um die Frage zu beantworten. Immer unter der Annahme, dass das gezeigte Beispiel bis auf die vertikalen Abstände zum Rahmen Sigrids Wünsche erfüllt.

Ich habe border durch outline ersetzt und in Kommentar eingeschlossen, weil ich annehme, dass es hier nur um Visualisierung der Elementbox geht und keinen dauerhauften Rand. Sigrig - outline ist hierfür geeigneter, weil border die Elementgröße beeinflusst und outline nicht.

header {
  display: flex;
  justify-content: center;
  align-items: center;
/*  outline: 1px red solid; */
  gap: 2em;
}
header > * {
  margin: 0;
/* outline: thin dashed green; */
}

Die Visualisierung kann auch der Browser mit den Entwicklerwerkzeugen übernehmen. In Chrome so:

Durch Anklicken des "flex" zeigt der Browser die Elemente der Flexbox. Und die Header-Größe wird gezeigt, weil ich im Moment des Screenshots die Maus auf dieser Zeile hatte - dann wird das Element dazu hervorgehoben und die Größe gezeigt.

Rolf

[Gunnar Bittersmann]

@@Sigrid

wie kann ich in dem Beispiel erreichen, dass der Titel-Bereich nur so hoch ist wie das höchste Element darin (im vorliegenden Fall das <h1>?

Was genau meinst du mit „so hoch ist wie das höchste Element“? Die Zeilenbox, wo die Schrift irgendwie drinsitzt, aber noch Weißraum oben und unten ist? (Darstellung)

Oder sollen die Großbuchstaben oben an die rote Linie stoßen?

Und unten die Grundlinie? Oder sollten Unterlängen mit in die rote Box passen?

🖖 Live long and prosper

[Sigrid]

Hallo,

die horizontalen Linien im Beispiel sollten (im Extremfall) von oben/unten an die Schrift anstoßen. Anders ausgedrückt, wie kann ich die Höhe des rot umrandeten Bereichs verringern, wobei dies nicht durch eine exakte Höhenangabe erfolgen soll sondern in Abhängigkeit des Inhalts in dem Bereich.

[Gunnar Bittersmann]

@@Sigrid

die horizontalen Linien im Beispiel sollten (im Extremfall) von oben/unten an die Schrift anstoßen. Anders ausgedrückt, wie kann ich die Höhe des rot umrandeten Bereichs verringern, wobei dies nicht durch eine exakte Höhenangabe erfolgen soll sondern in Abhängigkeit des Inhalts in dem Bereich.

Mit text-box (text-box-edge und text-box-trim). Interaktiver Vergleich der Werte.

Deine Box auf Versalhöhe und Grundlinie getrimmt sieht dann so aus:

Codepen

Wenn die Unterlängen (wie beim p) mit rein sollen, musst du alphabetic in text ändern. Wenn auch evtl. auftretende diaktitische Zeichen über Größbuchstaben (wie die Umlautpunkte beim Ä) mit rein sollen, musst du cap in text ändern. Aber dann kann man das auch gleich sein lassen.

Das funktioniert bislang in Safari und Chromia. In Firefox ist die Box dann halt größer, auch nicht schlimm (progressive enhancement).

🖖 Live long and prosper

[Sigrid]

Hallo Gunnar,

das scheint mir doch noch keine optimale Lösung zu sein, zumal, wenn neben dem Text in Zukunft vielleicht noch Icons stehen werden, die höher als der Text sind. Daher habe ich auch in meinem Anfangsbeitrag von Elementen (nicht Text) geschrieben.

Ich würde daher doch eher auf eine feste Höhe gehen.

Aber in meinem Beispiel ist es mir nicht gelungen, die Höhe zu variieren😞

[Bertie]

Salü Sigrid

Ich habe mir mögliche Einsatzzwecke versucht vorzustellen und ein CodePen erstellt, wie ich Deinen Code anpassen würde:

https://codepen.io/macsimum/pen/JoGbgdY

Als 2. Element habe ich eine SVG Grafik (als Stellvertreter für Deine Icons) hinzugefügt. Im CSS oben siehst Du die Höhe von 20px, damit kannst Du herumspielen - z.B. auf 200 vergrössern und sehen, wie sich der Titel-Bereich anpasst.

Grüsse, Bertie

PS: Dein h1 erhält vom Browser ein Margin, das erzeugt Abstand, ich setze das im CSS auf Null. In der Mitte habe ich den Text «Äpfel» hinzugefügt, das Gunnar in seinem Beispiel verwendet um Ober- und Unterlängen anzuzeigen.