Grid: Ausrichtung

[Gerrit]

Hallo, wie kann ich in dem Beispiel
den Block "text1 img text2" so in der Horizontalen verschieben, dass sie mittig stehen in dem Bereich vom Anfang Text1 bis zum Zeilenende, also so wie etwa dies
ohne Punkte.

[Christian Kruse]

Hallo Gerrit,

setze als Eigenschaften:

  grid-template-columns: 20px 20px repeat(3, 1fr);
  max-width:80%;

Durch das repeat(3, 1fr) verteilst du den freien Raum gleichmäßig auf die drei Elemente und durch das max-width: 80% sorgst du dafür, dass header genau so breit wird wie article.

Freundliche Grüße,
Christian Kruse

[Mr.Murphy]

Ich biete:

header {
  display: grid;
  grid-template-columns: auto auto 1fr auto 1fr;
  align-items: center;
  grid-gap: 1em;
}

header p {
  font-size: 2em;
  margin: 0;
}

header p:nth-of-type(2) {
  text-align: right
}

...

[Rolf B]

Hallo Gerrit,

das braucht mehr Informationen, um ein Seitenlayout korrekt empfehlen zu können.

Zusammen mit den Vorschlägen, die für den Header gemacht wurden (Breite auf 80% begrenzen) sehe ich bei Dir eine Seitenaufteilung in dieser Art:

Wird der Header auf eine Breite von 80% gesetzt, um den 80% im main-Teil zu entsprechen, bleibt der rosa Bereich frei.

Bereits in deinem Layout ist der blaue Bereich frei.

Mein grundsätzlicher Vorschlag wäre, all diese Bereiche in einem Grid darzustellen, was mit Hilfe benannter Gridbereiche sehr schön in einem Template darstellbar wäre. Ich würde dann auch die nav aus dem header herausnehmen und in eigenen eigenen Gridbereich setzen, und den eigentlichen Header (x, text1, img und text2) durch ein eigenes Grid unterteilen (mit Subgrid wäre das eleganter machbar, aber das ist bislang Firefox-only).

Aber damit da was draus wird, müsste man wissen, was mit dem rosa und dem blauen Bereich passieren soll? Kommt da was hin? Bleiben die leer? Und wie entwickelt sich das Ganze, wenn das Fenster schmaler wird - gibt es da ein anderes Layout, um besser auf - beispielsweise - ein Smartphone zu passen?

Frage wäre auch, ob es spezielle Anforderungen an die Platzierung der x, text1, img und text2 Elemente gibt. Das hat starke Auswirkungen auf die Grid-Definition. Wenn Du das offen lässt, bilden wir alle irgendwelche Hypothesen und du bekommst Teillösungen, die zum Rest deiner Ideen vielleicht nicht passen.

Einen möglichen Ansatz - keine Ahnung ob der für Dich passt - habe ich mal gemacht. Ich habe dafür die Breitendefinition umgedreht: statt zwei Spalten mit 80% und 1fr nehme ich drei Spalten mit 2em + 1fr + 20%. Ansonsten integriert er die Ideen von Christian und McMurphy.

https://jsfiddle.net/Rolf_b/r30tj2ms/

Entscheidend ist dies hier:

body {
  display: grid;
  grid-template: "nav header rest" auto
                 "main main rest" auto
                 / 2em 1fr 20%;
  grid-gap: 1em;
}
nav {
  grid-area: nav;
}
header {
  grid-area: header;
  display: grid; 
  grid-template-columns: 2em 1fr auto 1fr;
  gap: 1em;
}
main {
  grid-area: main;
}

Durch die grid-area Angabe wird das Element dorthin platziert, wo der entsprechende Name im grid-template steht. Das body-grid hat 3 Spalten. Und das main-Element erstreckt sich von Spalte 1 bis 2. Das kann man auch mit grid-row und grid-column Angaben machen, aber grid-area ist wesentlich besser lesbar. Was Du mit dem "rest" Bereich machst - keine Ahnung, hast Du uns nichts zu erzählt.

Rolf

[Gerrir]

Hallo,
der rosa Bereich soll zu dem weißen hinzugeschlagen werden. Warum existiert dieser überhaupt?
Ich dachte, dass die grid-Definition in main nicht zurück nach oben wirkt.
Der blaue Bereich entält i.d.R. ebenfalls Text.

[Gerrit]

Ergänzung:
Also etwa so:

[Rolf B]

Hallo Gerrit,

der rosa Bereich soll zu dem weißen hinzugeschlagen werden. Warum existiert dieser überhaupt?

Du hast doch geschrieben, dass "text1 img text2" über dem main Bereich zentriert werden sollen. Das kriegt man an am einfachsten hin, wenn man den Kopfbereich genauso breit wie diesen 80% Bereich von main macht. Und dann bleibt der rosa Bereich übrig.

Allerdings bringst Du die Zähne nicht auseinander (bzw. die Finger nicht auf die Tasten), um genau festzulegen, wie die Platzierung von text1/img/text2 erfolgen soll. Da rate ich weiterhin herum.

• soll "img" immer an der gleichen Stelle stehen, egal, wie lang der Inhalt von "x", "text1" und "text2" ist?
• Oder soll der Block "text1 img text2" im Weißraum rechts von "x" zentriert werden?
• Darf der Inhalt des "text2" Elements dabei auch über den 80% Bereich von main hinausragen, wenn die Inhalte länger sind?

Das sind alles Detailfragen, aber die müssen geklärt sein, sonst kann man kein Layout bauen.

Du kannst in meinem Grid-Vorschlag das Template so ändern:

  grid-template: "nav header header" auto
                 "main main rest" auto
                 / 2em 1fr 20%;

Dann würde der Header die Grid-Spalten 2 und 3 überdenken, also den rosa Bereich mit einnehmen. Der Block, der in den blauen Bereich hineinkommt, musst Du mit grid-area: rest dorthin bringen.

Und dann kannst Du experimentieren. Du kannst dem Header einen margin-right geben, du kannst auch für das Grid im Header die Breitenverhältnisse ändern. Im Moment ist text1 und text2 1:1, aber du könntest das grid-template im Header auch als grid-template-columns: 2em 3fr auto 5fr; angeben, dann würden sich die Breiten von text1 und text2 wie 3:5 verhalten, was das Ganze nach links schiebt.

Ich kann Dir nicht sagen, was "am besten" oder "richtig" ist. Jede Variante hat ihre Berechtigung, es hängt nur davon ab, was Du eigentlich willst. Siehe meinen Fragenkatalog am Anfang. Du hast deine Absichten mit "Also etwa so" nur sehr allgemein formuliert.

Rolf

[Gerrit]

Hallo Rolf,

der rosa Bereich soll zu dem weißen hinzugeschlagen werden. Warum existiert dieser überhaupt?

Du hast doch geschrieben, dass "text1 img text2" über dem main Bereich zentriert werden sollen. Das kriegt man an am einfachsten hin, wenn man den Kopfbereich genauso breit wie diesen 80% Bereich von main macht. Und dann bleibt der rosa Bereich übrig.

Ich habe nichts von einer Zentrierung über dem main-Bereich geschrieben.

Im ersten Beitrag hatte ich geschrieben:

Hallo, wie kann ich in dem Beispiel den Block "text1 img text2" so in der Horizontalen verschieben, dass sie mittig stehen in dem Bereich vom Anfang Text1 bis zum Zeilenende, also so wie etwa dies ohne Punkte.

Also hier ist schon vom Zeilenende die Rede.

• soll "img" immer an der gleichen Stelle stehen, egal, wie lang der Inhalt von "x", "text1" und "text2" ist?

Nein

• Oder soll der Block "text1 img text2" im Weißraum rechts von "x" zentriert werden?

Ja

• Darf der Inhalt des "text2" Elements dabei auch über den 80% Bereich von main hinausragen, wenn die Inhalte länger sind?

Ja, dies ist auch in meinem ersten Beitrag schon der Fall. In einem Satz: "text1 img text2" sollen in der angegebenen Reihenfolge in dem Bereich zentriert werden, der hinter dem x beginnt und am Ende der Zeile (am rechten Viewportrand) endet, unabhängig davon wie main aufgeteilt wird.

[Rolf B]

Hallo Gerrit,

gut. Dann wäre das geklärt. Einen margin-right am Header-Element brauchst Du dann nicht, und Spielereien mit den fr-Verhältnissen von text1 und text2 auch nicht.

Du müsstest mit dem, was ich Dir vorgeschlagen habe, experimentieren und zum Erfolg kommen können.

Oder soll der Block "text1 img text2" im Weißraum rechts von "x" zentriert werden?

Ja

Für diesen Fall solltest Du das 2em im Grid-Template des header Elements noch durch auto ersetzen, damit ein unterschiedlich langes "x" berücksichtigt wird:

  grid-template-columns: auto 1fr auto 1fr;

...

Bitte. Gern geschehen.

Viele Grüße
Rolf

[Gerrit]

Hallo,
mit Hilfe von Rolfs Vorschlag und geduldiger Unterstützung habe ich jetzt die schmale Version meiner Seite fertig.
Wie empfohlen, habe ich das Nav-Icon von der Kopfzeile entfernt.
Jetzt möchte ich den Aufbau für die breiteren Viewports realisieren.
Da sollen die Punkte der Navigation in einer linken Spalte erscheinen.
Die notwendige Grid-Definitiion in dem @media-Anweisung ist klar.

Ist folgende Vorgehensweise richtig?

• Bisheriges nav unsichtbar machen.
• Zweites nav definieren in dem main-Bereich (unsichtbar bei schmalen Geräten.
  Schönen Gruß
  Gerrit

[Rolf B]

Hallo Gerrit,

• Bisheriges nav unsichtbar machen.
• Zweites nav definieren in dem main-Bereich

Tjaaa - ich hätte Dir ja gerne einen Trick verraten, die Liste der Menüpunkte nicht zu duplizieren. Aber es scheint (noch) keinen Weg zu geben, um ein geschlossenes details-Element mit CSS Mitteln zum öffnen zu bringen. Die Frage findet sich im Netz öfter, und die Antwort zeigt jedesmal, dass die Leute unfähig sind, eine Frage zu lesen. Sie fragen zurück: "Warum setzt Du nicht das open Attribut?"

Weil das JavaScript braucht und einen Resize-Handler und nervig ist.

Ich hätte einen Trick gefunden, analog zum Checkbox-Hack, aber der müsste erstmal von Accessibility-Experten begutachtet werden. Man stelle das ul Element hinter das Details-Element, und verwende CSS, um es bei Existenz des open-Attributes am details-Element anzuzeigen.

Man kann dann eine Media-Query benutzen, um bei breitem Bildschirm das Grid-Template zu ändern, die Liste einzublenden und das Details-Element zu verstecken.

  <details aria-controls="navigation-list">
    <summary>☰</summary>
  </details>
  <ul id="navigation-list">
    <li><a href="/">Startseite (Home)></a></li>
    <li><a href="#">Seite 1></a>
    <li><a href="#">Seite 2></a>
    <li><a href="#">Seite 3></a>
  </ul>

nav ul { display: none; }
nav details[open] + ul { display: block; }

@media (min-width: 40em) {
  main { border-color: blue;}

  body {
    grid-template: "header header header" auto
                   "nav main rest" auto
                   / 10em 1fr 20%;
  }
  nav details {
    display: none;
  }
  nav ul {
    display: block;
    border:none;
  }

Aber keine Ahnung was der IE dazu sagt, oder ein Screenreader.

Rolf

[JürgenB]

Hallo Rolf,

Weil das JavaScript braucht und einen Resize-Handler und nervig ist.

warum ist das nervig?

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

weil man JavaScript einfügen muss, um Layout zu steuern.

Rolf

[JürgenB]

Hallo Rolf,

weil man JavaScript einfügen muss, um Layout zu steuern.

und ist das ein Problem, wenn man fehlende Funktionalität aus html und css in Javascript nachbildet? Es geht hier doch nur darum, den Platz zu ermitteln und ein „open“ und evtl. eine Klasse zu setzen.

Gruß
Jürgen

[Gästin]

Hi,

wenn ich es richtig verstehe, liegt das Problem bei dem "Details/Summary".

Warum verwendet man dann nicht andere Möglichkeiten der POPUP-Menus wie z.B. die Beispiele hier.

[Rolf B]

Hallo Gästin,

weil CSS Dropdowns nicht bedienbar sind. Hovere mal mit einer Tastatur, oder eine Braille-Zeile.

Entweder braucht man JavaScript, oder bei einfachen Menüs details/summary. Leider hat Gerrit - wie jeder reale Auftraggeber - seine Wünsche nicht auf Anhieb vollständig geäußert.

Ich habe jetzt eine unschöne details/summary Lösung gefunden, aber vermutlich wird es, um bedienbar und zugänglich zu bleiben, auf ein Duplikat des Menüs oder auf eine JavaScript-Lösung hinauslaufen müssen.

Hätten und die Götter der Spec das menu-Element gegeben, sähe es vielleicht besser aus. Hamseabanich.

Rolf