Ist nachfolgendes layout realisierbar

[Karl-Heinz]

Hallo,

ist dieses Layout realisierbar? Gibt es ein ähnliches Beispiel als Vorlage?

Das heißt Logo, Menu, AAAAA...BBB und ... Inhaltsteil ... sollen fest bleiben, der Rest kann jeweils gescrollt werden.

[Rolf B]

Hallo Karl-Heinz,

ist dieses Layout realisierbar?

Ja. Mit display:grid. Auf einem genügend großen Bildschirm. Denk an die Variante für kleine Bildschirme, gestalte dein HTML mit Blick darauf und aktiviere die Grid-Darstellung per @media (min-width...) nur, wenn genug Platz ist. Vermutlich brauchst Du dann ein Ausklappmenü.

Gibt es ein ähnliches Beispiel als Vorlage?

Keine Ahnung. "Inhaltsteil" und "Titel, bla bla" müssen wohl in eine gemeinsame Gridzelle, damit der Viertelkreis durch einen border-radius realisiert werden kann, d.h. da brauchst Du ein subgrid oder ein Grid im Grid (alternativ Flexbox mit vertikaler Ausrichtung). Ähnliches dürfte für Logo und AAAA BBBB gelten. Oder mir fehlt gerade die clevere Idee...

Den Container, der grid-Layout hat, setzt auf Du auf height: 100vh;. Dann müssen Margin und Padding allerdings 0 sein, sonst erzeugst Du Scrollbars. Falls Du Margins möchtest, um etwas Abstand vom Fensterrand zu halten, musst Du die mit calc von der Höhe abziehen. Falls Du padding einsetzt, denk an box-sizing:border-box, damit das Padding nicht die Höhe vergrößert.

Grundsätzlich brauchst Du kein eigenes div oder so, um das Grid-Layout zu realisieren, du kannst auch den body zum Grid machen.

Reicht das als Anschub?

Rolf

[Karl-Heinz]

Hallo Rolf,
noch sagen mir die Begriffe grid und flexbox nichts.
Daher wäre mir ein Beispiel lieb gewesen.
Aber ich werde mich nun zunächst mit den obigen Begriffen befassen müssen.

[Gunnar Bittersmann]

@@Rolf B

Keine Ahnung. "Inhaltsteil" und "Titel, bla bla" müssen wohl in eine gemeinsame Gridzelle

Hängt auch davon ab, was $Inhaltsteil ist. Deshalb meine Nachfrage.

damit der Viertelkreis durch einen border-radius realisiert werden kann,

Der könnte in seine Einzelzelle eingesperrt werden. Gridzellen können sich überlappen.

$Inhaltsteil und „Menü“ möglicherweise position: sticky.

Wobei: Die Überschrift „Menü“ ist für Screenreader nicht verkehrt. Aber warum soll die visuell dargestellt werden?

😷 LLAP

[Der Martin]

Hallo,

Gridzellen können sich überlappen.

huh? Wie cool ist das denn!
Und wie stellt man das an? Gibt's da auch was von ratio... ähm, etwa mit negativen gap-Werten?

Wobei: Die Überschrift „Menü“ ist für Screenreader nicht verkehrt. Aber warum soll die visuell dargestellt werden?

Ich interpretiere das so, dass "Menü" und "Inhaltsteil" nur eine Art Beschriftung des Bereichs in der Skizze sind und nicht für wirkliche Überschriften stehen sollen.

Live long and pros healthy,
 Martin

[Matthias Scharwies]

Servus!

Hallo,

Gridzellen können sich überlappen.

huh? Wie cool ist das denn!
Und wie stellt man das an? Gibt's da auch was von ratio... ähm, etwa mit negativen gap-Werten?

Du gibst einfach mehreren Elementen die gleiche Angabe. Das geht auch mit Pseudoelementen:

element,
element::before {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

das hatte ich im Hinterkopf für ausgeschlossen gehalten. Zumindest bei Flexbox war es meiner Erinnerung nach so, dass die Pseudoelemente keine Flexitems sind. Aber das kann auch eine kaputte Erinnerung sein.

Damit kann man die Überlapperei auf das ::before-Element beschränken, top! Passend zu meinem Beispiel unten:

body::before {
  content: " ";
  grid-area: cont-start / cont / main-end; /* row-start, column, row-end */
  background-color: #fed;
  border-radius: calc(var(--main-left) * 3) 0 0 0;
}

Rolf

[Gunnar Bittersmann]

@@Der Martin

Gridzellen können sich überlappen.

huh? Wie cool ist das denn!
Und wie stellt man das an?

Cool and warm. Die blauen und roten Flächen sind Quadrate – überlappt von weißen Quadraten.

ähm, etwa mit negativen gap-Werten?

Nein, negative Werte sind ungültig.

Wobei: Die Überschrift „Menü“ ist für Screenreader nicht verkehrt. Aber warum soll die visuell dargestellt werden?

Ich interpretiere das so, dass "Menü" und "Inhaltsteil" nur eine Art Beschriftung des Bereichs in der Skizze sind und nicht für wirkliche Überschriften stehen sollen.

Ich interpretiere da nicht, sondern warte die Antwort ab. Ohne Antwort kein Markup; ohne Markup kein Styling.

Und wenn ich doch interpretiere, dann halte ich „Menü“ als Überschrift schon für real. Deshalb die Frage, ob man das wirklich visuell braucht.

Es sei denn, man erstellt eine Webseite für ein Restaurant und nimmt das als Sprachwitz mal so mit.

😷 LLAP

[Rolf B]

Hallo Gunnar,

Der könnte in seine Einzelzelle eingesperrt werden. Gridzellen können sich überlappen.

Hatte ich auch schon überlegt, aber dann hätte man ein div im HTML das nur für die Darstellung des Viertelkreises da ist. Gefällt mir nicht.

Aber ich verfolge gerade eine andere Idee:

body {
  display: grid;
  grid: "logo head" auto
        "logo cont" 3em
        "logo main" 3em
        "nav  main" 1fr
       / 10em 1fr;
  gap: 0 2em;
  /* rem, nicht em, die Umsetzung erfolgt mit der font-size der Stelle wo
     die Variable benutzt wird! */
  --main-left: 3rem;
}
/* Eingefügt nach Matthias' Hinweis */
body::before {
  content: " ";
  grid-area: cont-start / cont / main-end; /* row-start, column, row-end */
  background-color: #fed;
  border-radius: calc(var(--main-left) * 3) 0 0 0;
}

#inhalt {
  grid-area: cont;
  border-radius: calc(var(--main-left) * 3) 0 0 0 ;
}

main {
  grid-area: main;
  overflow-y: scroll;
  padding-left: var(--main-left);
}

Auf diese Weise geht der Inhaltsteil bis ganz unten und spendiert auch die Hintergrundfarbe für den main-Teil. Man muss dann nur mit den dort platzierten Wörtern aufpassen, dass sie nicht in den Textteil hineinragen.

Matthias hatte die bessere Idee: Das ::before-Element erzeugt Hintergrundfarbe und Rundung, die Inhalte kümmern sich nur um sich selbst.

Guckst Du: https://jsfiddle.net/Rolf_b/6h9vuwkg/

Womit ich gerade streite, ist die Zentrierung von "...Inhaltsteil..." und "Titel" mit exakt gleicher Mitte. Das ist schwierig, weil der Titel aus meiner Sicht zum blablabla Inhalt gehört, d.h. im scrollbaren Bereich liegt. Damit ist es um eine Scrollbarbreite schmaler als der Inhaltsbereich, der nicht im Scrollbar-Bereich liegt. Eine Scrollbarbreite in Default-Windows sind 17px, deswegen habe ich experimentell mal 6px bei der Padding-Berechnung abgezogen, aber das ist garantiert kein fixierter Wert. Hinzu kommt, dass bei kurzem Text der Scrollbar gar nicht da ist (wenn ich overflow-y auf auto statt auf scroll setze).

Die Rechnerei ist eh schon nicht trivial. Ich möchte "...Inhaltsteil..." mittig haben, und die "..." Bereiche rechts davon. Dafür mache ich ein Grid, und setze ein Padding für's erste Drittel. Die 33.3% beziehen sich aber auf die gesamte Breite des Main, incl. Padding, darum muss ich ein Drittel von (100% - var(--main-left)) bestimmen. Ausmultiplizieren führt dann zu dieser 2/3 Rechnung im Fiddle.

Es ist vermutlich für die Verständlichkeit des CSS am besten, auf diese genaue Positionierung zu verzichten. Oder den "Inhaltsteil" tatsächlich ins main zu legen und mit sticky oben anzukleben. Ich hätt's ja schöner gefunden, wenn der separat ist und der Scrollbar tatsächlich nur neben dem scrollbaren Teil ist.

Rolf

[Gunnar Bittersmann]

@@Karl-Heinz

Das heißt Logo, Menu, AAAAA...BBB und ... Inhaltsteil ...

Was genau heißt „AAAAA...BBB“ und „... Inhaltsteil ...“?

😷 LLAP

[Karl-Heinz]

@@Karl-Heinz

Das heißt Logo, Menu, AAAAA...BBB und ... Inhaltsteil ...

Was genau heißt „AAAAA...BBB“ und „... Inhaltsteil ...“?

😷 LLAP

Das ist jeweils eine Textzeile.