nicht angemeldet
Rolf B
Gunnar Bittersmann
Rolf B
Gunnar Bittersmann
Bertie
Bertie
Gunnar Bittersmann
Rolf B
Gunnar Bittersmann
Bertie
Hallo,
warum liegt die Fußzeile in dem
nicht immer unten am Bildschirmrand?
Schönen Gruß
Walter
Hallo Walter,
sie liegt nicht nur "nicht immer" unten, sondern konstant auf der y-Position (Höhe von div.header) plus 108px. Weil dein info-div genau 100px hoch ist. Plus 8px margin von body ergibt die 108.
Ich nehme an, du möchtest EIGENTLICH, dass das info-Grid den Viewport füllt und der footer am unteren Rand klebt? Was ist, wenn der Inhalt höher ist als der Viewport, soll dann der gesamte Body scrollen oder nur der Inhalt? Davon hängt ab, wie man die Lösung gestaltet.
Bis dahin: bitte mache dich mit den semantischen HTML Elementen für die Seitenstrukturierung vertraut.
<div class="header"> ==> <header>
<div class="info"> ==> ggf. nur ein div, ggf auch ganz überflüssig
<div class="nav"> ==> <nav>
<div class="footer"> ==> <footer>
<div class="aside"> ==> <aside> - wenn es denn eins wäre.
Dein "aside" ist der Hauptteil, und dafür nimmt man das <main> Element. Falls Du irgendwas "nebenbei" anzeigen willst, ist aside angemessen.
Immerhin hast Du kein großes wrapper-div um den Inhalt gelegt, wie es viele andere tun…
Rolf
@@Rolf B
Bis dahin: bitte mache dich mit den semantischen HTML Elementen für die Seitenstrukturierung vertraut.
Dein "aside" ist der Hauptteil, und dafür nimmt man das <main> Element.
Vor allem: „Titel“ soll die Überschrift sein, dafür nimmt man das <h1>-Element.
🖖 Live long and prosper
Hallo Rolf,
Ich nehme an, du möchtest EIGENTLICH, dass das info-Grid den Viewport füllt und der footer am unteren Rand klebt?
Ja
Was ist, wenn der Inhalt höher ist als der Viewport, soll dann der gesamte Body scrollen oder nur der Inhalt?
Der Inhalt soll scrollen, navi und header sollen bleiben.
Gruß
Walter
Hallo Walter,
dann mach aus dem Body ein Grid und gib ihm eine Höhe von 100vh (100% Viewport Height). Allerdings gibt's dann Scrollbars weil der Browser standardmäßig 8px Margin um den Body legt. Die muss man löschen oder von der Höhe abziehen.
Unser Wiki liefert dazu leider kein Beispiel (zumindest finde ich keins).
Für das Grid verwende ich benannte Rasterbereiche.
body {
margin-block: 8px;
height: calc(100vh - 16px);
display: grid;
grid: "header header" auto
"nav main " 1fr
"footer footer" auto
/ auto 1fr;
}
header {
grid-area: header;
...
}
nav {
grid-area: nav;
width: 12em; /* was auch immer sinnvoll für deine nav ist */
...
}
main {
grid-area: main;
...
}
footer {
grid-area: footer;
...
}
Eine prozentuale Breite für die Navi würde ich nicht unbedingt machen. Es sollte zumindest eine minimale Breite gegeben sein. Die Erklärung, wie man das schön macht, überlasse ich Gunnar, mir fehlt grad die Zeit.
Mit einer @media-Query kannst Du das Grid-Template für schmale und breite Bildschirme unterschiedlich aufbauen und damit schön responsiv werden.
Rolf
@@Walter
Was ist, wenn der Inhalt höher ist als der Viewport, soll dann der gesamte Body scrollen oder nur der Inhalt?
Der Inhalt soll scrollen, navi und header sollen bleiben.
Ich glaube, du hast Rolfs Frage nicht richtig verstanden. Sie war auch nicht besonders verständlich formuliert.
Ich formuliere mal um: Soll sich die Scrollbar nur über die Höhe des scrollbaren Hauptinhalts erstrecken oder über die gesamte Viewporthöhe?
Die erste Variante ist einfacher zu implementieren. Rolf sagte ja schon, wie: mit Grid. Das sieht dann bspw. so aus: main scrollable.
Die zweite Variante sieht bspw. so aus: fixed elements. position: fixed für die betreffenden Elemente ist da aber bei weitem nicht alles, was zu tun ist, denn dadurch würde der Hauptinhalt unter den fixierten Elementen verschwinden. Also muss man da padding (margin könnte auch gehen) setzen – auf die Höhen der fixierten Elemente, die man aber nicht kennt (Nutzer könnten andere Schriftgrößen in ihrem Browser angegeben haben) und die auch von der Viewportbreite abhängt (Anzahl der Zeilen).
Deshalb muss man die Höhen der fixierten Elemente mit JavaScript bestimmen und CSS zugänglich machen – über custom properties. Das passiert in meinem Beispiel in der Funktion applyHeight(), die in der Funktion applyFixedElementHeights() für die oben bzw. unten fixierten Elemente aufgerufen wird. Und das muss nicht nur initial beim Laden der Seite, sondern bei jeder Änderung der Viewportgröße gemacht werden; dafür ist der ResizeObserver da.
Die custom properties werden in der Berechnung von padding-block verwendet. Das genügt aber nicht. Damit beim Anspringen der seiteninternen Links der Inhalt nicht unter dem oben fixierten Element verschwindet, muss außerdem scroll-padding-block gesetzt werden.
Noch schnell die media queries erklärt: @media (height >= 20lh) sorgt dafür, dass die Elemente nur fixiert werden, wenn der Viewport hoch genug dafür ist. Ansonsten hätte man bei einer Smartwatch nur einen Sehschlitz für den Hauptinhalt.
Durch @media (prefers-reduced-motion: no-preference) wird berücksichtigt, dass manche Nutzer kein animiertes Scrollen beim Ansppringen der seiteninternen Links haben wollen.
Und wo wir bei UX/Barrierefreiheit sind: Hell- und Dunkelmodus gibt’s auch.
🖖 Live long and prosper
Hallo
wie das Bild unten habe ich es mir vorgestellt, natürlich ohne die verschiedenen Hintergründe.
Salü Walter
Das wäre ein sogenanntes «Holy-Grail-Layout». Hier unser Artikel dazu, Variante 2-spaltiges Layout, das ist sogar responsiv:
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Einführung#Zweispaltiges_Layout
Klicke dort beim 1. Beispiel auf «Ausprobieren» und ergänze dann im CSS-Block bei den Angaben zum body min-height: 100vh;, dadurch wird der footer ans Ende runter gestossen.
Gruss, Bertie
Hallo Bertie,
in Deinem Beispiel
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Einführung#Zweispaltiges_Layout
wird der linke Teil als aside benannt.
An anderer Stelle habe ich die Bezeichnung nav gelesen.
Was ist richtig?
Salü Walter
Die Navigation <nav> trifft man oft im <header> oder <aside>, manchmal sogar in beiden, z.B. mit Hauptnavigation oben und Unternavigation seitlich. Kommt also darauf an, wie Du Deine Navigation organisieren willst.
Hier noch ein CodePen entsprechend Deinem Bild mit Scrollbalken, die bei Bedarf im Inhalt (main) erscheinen (Gunnar schrieb ja bereits, mein erstes Beispiel ist nicht fix):
https://codepen.io/macsimum/pen/PwGOVNz
Auf kleinen Bildschirmen macht diese fixe Aufteilung jedoch wenig Sinn, drum habe ich @media eingebaut. Du siehst die daraus resultierende Responsivität, wenn Du die Fenstergrösse veränderst: Bei zu wenig hohem oder breitem Fenster wird einfach alles untereinander dargestellt.
Gruss, Bertie
Hallo Bertie, bei mir kommt der aside-Teil nie links vom main-Teil, auch nicht auf meinem PC mit 64em-Breite.
Salü Walter
Hast Du im Codepen den <div class="body-row"> gesehen?
Darin befinden sich <aside> und <main>, mittels CSS .body-row { display: flex; } werden die beiden nebeneinander platziert.
Gruss, Bertie
@@Bertie
Hast Du im Codepen den
<div class="body-row">gesehen?Darin befinden sich
<aside>und<main>, mittels CSS.body-row { display: flex; }werden die beiden nebeneinander platziert.
Das macht überhaupt keinen Sinn! Du verwendest schon Grid fürs Seitenlayout, da ist – wie ich schon sagte – „eine weitere Zelle ja schnell ins Grid eingebaut.“
Und nicht ein Mischmasch aus Grid und Flexbox, was den Kram unnötig kompliziert macht.
🖖 Live long and prosper
Salü Gunnar
Du hast natürlich recht, viel schöner ohne zusätzliches <div> und mit benannten Rasterbereichen, die mag ich wie Rolf auch.
Walter, probier's doch mal mit diesem Ansatz:
https://codepen.io/macsimum/pen/qEaVGzO
Gruss, Bertie
@@Bertie
Das sieht schon besser aus. Aber einige Dinge gibt’s da anzumerken:
aside {
/* fixe Breite: z.B. width: 10em; */
}
Nein! Das widerspricht dem Grundgedanken von Grid, der Von-außen-nach-innen-Denke.
Die Breite sollte nicht für ein Element im Grid angegeben werden, sondern für das Grid selbst, d.h. für die Gridspalte. Und Höhen für Gridzeilen.
An beides hast du nicht gedacht. Dass es zufällig so aussieht wie erwartet liegt nur daran, dass du viel Inhalt in die Gridzelle mit dem Hauptinhalt gepackt hast. Du hast den Kram aber nicht richtig getestet – d.h. auch mit wenig Inhalt. Dann hättest du gesehen, dass dir das Layout um die Ohren fliegt und der Footer nicht mehr unten im Viewport ist.
Anstatt
body {
display: grid;
grid: "header header"
"aside main "
"footer footer";
}
wolltest du
body {
display: grid;
grid: "header header" auto
"aside main " 1fr
"footer footer" auto
/auto 1fr;
}
mit Angaben zu Zeilenhöhen und Spaltenbreiten.
Bzw. mit festgelegter Breite für die linke Spalte:
body {
display: grid;
grid: "header header" auto
"aside main " 1fr
"footer footer" auto
/10em 1fr;
}
Etwas fixiert breites:
(… damit auch der horizontale Scrollbalken auftaucht)
Nein. Wie ich hier im Thread schon sagte, sollte man tunlichst dafür sorgen, dass kein horizontaler Scrollbalken auftaucht.
<aside>
<h3>Breite nach Inhalt</h3>
Nö, die Überschrift sollte h2 sein, s.a. im anderen Thread.
<ul>
<li><a href="#">Bla bla</a></li>
<li><a href="#">Bla bla</a></li>
<li><a href="#">Bla bla</a></li>
<li><a href="#">Fest</a></li>
<li><a href="#">Seite 5</a></li>
<li><a href="#">Seite 6</a></li>
</ul>
</aside>
Das sieht verdächtig nach Navigation aus, sollte also in ein nav-Element gepackt werden.
Um es vom anderen zu unterscheiden, sollten beide nav-Elemente einen Titel bekommen, bspw. per aria-label; Landmarks should have a unique role or role/label/title (accessible name) combination.
Anhand von „Bla bla“ lässt sich kaum sagen, was genau da stehen sollte. Vielleicht sowas wie <nav aria-label="auf dieser Website"> bzw. <nav aria-label="in diesem Kapitel">.
<footer>
<a href="#">Datenschutz</a>
<span>|</span>
<a href="#">Impressum</a>
</footer>
Das Trennzeichen sollte nicht von Screenreadern vorgelesen werden, also vor diesen verstecken: <span aria-hidden="true">|</span>.
🖖 Live long and prosper
Hallo Gunnar Bittersmann,
Nein! Das widerspricht dem Grundgedanken von Grid
Wenn dieser Grundgedanke unumstößlich ist, wieso haben die Götter uns dann das Keyword "auto" beschert?
Grundsätzlich hast Du natürlich recht, aber wie bei jedem Dogma gibt es Momente, wo man sich nicht dran hält. Selbst Rachel nicht (war nicht leicht zu finden, aber Onkel Claude hat's gewusst…)
Rolf
@@Rolf B
Wenn dieser Grundgedanke unumstößlich ist, wieso haben die Götter uns dann das Keyword "auto" beschert?
Einer Spalte oder Zeile zu sagen ‚mach dich mal so breit bzw. hoch, wie es der (wenige) Inhalt erfordert‘, ist etwas anderes als einer Zelle zu sagen ‚du bist 10em breit‘ (und die anderen Zellen der Spalte haben sich danach zu richten? oder auch nicht?)
Grundsätzlich hast Du natürlich recht, aber wie bei jedem Dogma gibt es Momente, wo man sich nicht dran hält. Selbst Rachel nicht (war nicht leicht zu finden, aber Onkel Claude hat's gewusst…)
Du hättest gar nicht so weit suchen müssen. In meiner Antwort waren ja auch einige Autos am Start.
🖖 Live long and prosper
@@Walter
wird der linke Teil als aside benannt.
An anderer Stelle habe ich die Bezeichnung nav gelesen.
Was ist richtig?
Das, was zum jeweiligen Inhalt passt.
HTML-Elementtypen sagen nicht, wo ein Element angeordnet ist. aside heißt nicht „an der Seite“, sondern „nicht unmittelbar zum Hauptinhalt gehörend“. footer heißt nicht „unten“, sondern sowas wie „Informationen zum Inhalt“. (Wenngleich Seite bzw. unten häufig anzutreffende Darstellungen sind.)
Auf dieser Seite findest du einen footer ziemlich weit oben. Und einen anderen unten.
🖖 Live long and prosper
Hallo Bertie,
nicht mein Minus, aber deine Empfehlung passt wirklich nicht.
Das Holy Grail Layout im Wiki ist nicht auf die Höhe des Viewports limitiert, deswegen habe ich es auch nicht vorgeschlagen. Solange der Viewport höher ist als der Inhalt, scheint es zu funktionieren, aber mach das Fenster mal so klein, dass der Inhalt nicht mehr passt, dann merkst Du, dass der gesamte Body scrollt und nicht nur der Inhalt.
Gunnars "main scrollable" Codepen sieht zwar unheiliger aus, ist aber das, was ich meinte und was Walter auch so verstanden hat.
Rolf
@@Rolf B
Gunnars "main scrollable" Codepen sieht zwar unheiliger aus
Eine weitere Zelle ist ja schnell ins Grid eingebaut.
🖖 Live long and prosper
@@Walter
wie das Bild unten habe ich es mir vorgestellt, natürlich ohne die verschiedenen Hintergründe.
Da sind Pfeile und Scrollbalken zu viel.
Der Hauptbereich (weiß) sollte nur in eine Richtung scrollbar sein: vertikal, nicht horizontal.
🖖 Live long and prosper
Salü Walter
Hier Dein Beispiel überarbeitet und aufs Wesentliche reduziert als Idee, wie ich das grundsätzlich angehen würde:
https://codepen.io/macsimum/pen/ogzoQgz
Mit der Aufteilung in die 3 Haupt-Blöcke <header> / <main> / <footer> kann man die Platz-Verteilung dafür über grid-template-rows: auto 1fr auto; steuern.
Gruss, Bertie
@@Bertie
Hier Dein Beispiel überarbeitet und aufs Wesentliche reduziert als Idee, wie ich das grundsätzlich angehen würde:
Das ist nicht aufs Wesentliche reduziert, sondern weit darunter. Wesentliches fehlt: Inhalt – genügend davon, dass er nicht in den Viewport passt und man scrollen muss. Und dann sieht man, dass Header und Footer bei dir nicht feststehen.
🖖 Live long and prosper