Probleme mit der Ausrichtung auf der Seite

[Walter P.]

Hallo Rolf, danke für die ausführlichen Erläuterungen

Ihr habt für das main-Element ein display:flex mit flex-flow:wrap gemacht. Die Tabelle hat eine bestimmte vorgegebene Breite (90vw), und wenn der nav-Bereich zu breit wird, bricht die Flexbox das um und die Tabelle steht unter der Navigation.

Bei schmalen Viewports soll die Navigation unter den Header und darunter das main. Da dachten wir an Deine Vorschlag "summary-Element".

Mir scheint, ihr wollt folgendes:

Reihe 1:

• Höhe nach Bedarf.
• Ein Headerbereich über die ganze Fensterbreite, mit einem Logo, einem Link zur englischen Version und einer Überschrift.

Ja

Reihe 2:

• Höhe: ???

Welche Höhe? Höhe abhängig von der Anzahl der Tabellenzeilen? Unten sollte bei schmalen displays der Scrollbalken sichtbar sein.

• Eine Navigation, linksbündig, so breit wie die darin enthalten Navigationspunkte. Eventuell: Limitiert auf eine bestimmte Maximalbreite

Ja Maximalbreite müssten wir noch festlegen und auch wann die breie Version umkippt zur schmalen Version. Wichtig ist, dass ein möglichst großer Teil der Tabelle sichtbar ist.

• Der Hauptteil, schließt sich an die Navi an und füllt die Fensterbreite auf. Enthält eine Tabelle. Ist der Hauptteil breite als die Tabelle, soll die Tabelle darin zentriert sein.

Ja

• Navi und Hauptteil sollen nebeneinander stehen. Frage: IMMER? Was ist bei schmalen Viewports?

siehe oben

Reihe 3:

• Höhe: nach Bedarf?

ja

• Sichtbarkeit: Ständig? Oder soll man bei langen Inhalten die Seite scrollen, um zum Footer zu gelangen?

Ursprünglicher Gedanke: Ja, über scrollen oder über einen Link im Nav-Bereich.
Nach Deinen Bedenken aber untenstehende Variante.

• Ein Footer-Bereich mit Links zu Impressum und Kontaktseite. Links linksbündig, mit etwas Abstand

Möglicherweise auch in der Mitte mit etwas Abstand. Möglicherweise noch ein dritter Punkt "Datenschutzhinweise" o.ä. Aber das gelangt uns jetzt dann wohl😉

Unklar ist das gewünschte Höhenverhalten von Hauptteil und Gesamtseite. Eure Beispiele zeigen oft genug zwei Scrollbars, einen für die Seite und einen für die Tabelle. Vor allem, wenn man das Fenster verkleinert. Wollt ihr das? Ich finde es falsch.

Das hat uns auch schon gestört!

Entweder ist die Gesamtseite höhenlimitiert, so dass der Footer ständig sichtbar ist und man nur den Hauptteil scrollt, oder man scrollt die gesamte Seite (was die sticky-Überschrift der Tabelle unsinnig macht).

Demnach korrigieren wir unsere ursprüngliche Vorstellung, dass die Fußeile ganz am Ende steht.

Diese "Reihen" sind eigentlich ein klarer Hinweis darauf, dass Flexbox das falsche Werkzeug ist. Ich habe schon vor ein paar Tagen (äh, hier) empfohlen, das Layout per Grid zu erstellen. Wäre das eher eure Vorstellung?

Ja

Die Flexbox im Header ist vermutlich suboptimal.

War für uns einfacher. Das grid hat ja so viele Möglichkeiten, die uns noch verwirren. Allein schon Deine body-Angabe ist für uns noch gewöhnungsbedürftig:

   body {
  --body-margin: 8px;
  margin: var(--body-margin);
  height: calc(100vh - 2*var(--body-margin));
  display: grid;
  grid: "head head" auto
        "nav main" 1fr
        "foot foot" auto / minmax(auto,12em) 1fr;
  gap: 0.5em 1em;
}

An solchen Beispielen blieben wir immer wieder hängen. Die Form --body-margin mussten wir verstehen, wohl wegen der Wartungsfreundlichkeit, die Funktion calc u.a. Vergeblich haben wir gesucht nach der Syntax von grid u.a. Daher mussten wir die Beispiele hernehmen und alles mögliche verändern, um die Wirkung zu sehen.

In Deinem Beispiel habe ich jetzt aber keinen Unterschied bemerkt, wenn ich auto oder 1fr entfernt habe.

Schönen Gruß

Walter