feststehende Navigation mit Scrollbalken bei Bedarf

[Oleander]

Hallo,

eine Webseite soll aus zwei Bereichen bestehen: eine feststehende Navigation und ein Inhaltsbereich (der ziemlich lang werden kann). Da aber auch die Navigation eine ganze Reihe von Einträgen umfassen wird, soll diese einen Scrollbalken erhalten, der erscheint sobald der Platz nicht mehr ausreicht (also bei geringer Fensterhöhe), damit die gesamte Navigation komplett zugänglich bleibt. Soweit funktioniert das auch, wie ich es mir vorstelle.

Hier ein auf das wesentliche reduziertes Demo.

Nun soll aber auch noch ein feststehender Kopfbereich hinzukommen. Dabei tritt folgendes Problem auf: beim Verkleinern des Fensters erscheint der Scrollbalken in der Navigation jetzt zu spät und lässt sich auch nicht bis zum Ende der Navigation scrollen, wodurch die unteren Menüeinträge unzugänglich bleiben.

Hier wieder ein Demo dazu.

(Die Demoseiten enthalten jeweils alle verwendeten Styles.)

Wo liegt der Fehler? Hat jemand einen Vorschlag, wie ich das gewünschte erreichen kann?

[Gunnar Bittersmann]

@@Oleander

Wo liegt der Fehler? Hat jemand einen Vorschlag, wie ich das gewünschte erreichen kann?

Mehrere.

Zu einen: #navigation { height: 100% } kann nicht passen. Wenn das Element erst 100px unter der oberen Viewportkante beginnt und dieselbe Höhe hat wie der Viewport, dann ragt es eben nach unten 100px aus diesem heraus.

Du möchtest von den 100% noch 100px abziehen: calc(100% - 100px).

Zum zweiten: Damit auch per Tastatur gescrollt werden kann, müssen die betreffenden Elemente den Fokus erhalten können:
<div id="navigation" tabindex="0">,
<div id="inhalt" tabindex="0">.

Drittens sollten das gar keine divs sein; "kopf" auch nicht. Sondern:
<header id="kopf">,
<nav id="navigation" tabindex="0">,
<main id="inhalt" tabindex="0">.

Die IDs brauchst du dann vielleicht nicht.

Viertens ist eine feste Höhenangabe wie #kopf { height: 100px } keine so gute Idee. Was, wenn der Inhalt da nicht reinpasst?

Und nicht zuletzt verbleiben, wenn 170px für die Navigation abgehen, für den Hauptbereich auf meinem Gerät nur 150px Breite. Die Boxen sollten bei schmalen Viewports untereinander angezeigt werden. Bei Verwendung von min-width und Flexbox oder float braucht man dazu nicht mal einen Media-Query.

LLAP 🖖

[Oleander]

Hallo Gunnar,

vielen Dank für deine schnelle und umfassende Hilfe.

Zu einen: #navigation { height: 100% } kann nicht passen. Wenn das Element erst 100px unter der oberen Viewportkante beginnt und dieselbe Höhe hat wie der Viewport, dann ragt es eben nach unten 100px aus diesem heraus.

Du möchtest von den 100% noch 100px abziehen: calc(100% - 100px).

Perfekt, damit funktioniert es. Dass mehr als 100% etwas zuviel sind, leuchtet schon ein.

Zum zweiten: Damit auch per Tastatur gescrollt werden kann, müssen die betreffenden Elemente den Fokus erhalten können:
<div id="navigation" tabindex="0">,
<div id="inhalt" tabindex="0">.

Habe ich eingefügt. Kann man dabei noch irgendwie verhindern, dass der aktive div in Chrome dann mit einem relativ unschönen blauen Rahmen angezeigt wird?

Drittens sollten das gar keine divs sein; "kopf" auch nicht. Sondern:
<header id="kopf">,
<nav id="navigation" tabindex="0">,
<main id="inhalt" tabindex="0">.

Hmm. Ich habe divs verwendet, da sie mir kompatibler zu älteren Browsern erschienen.

Viertens ist eine feste Höhenangabe wie #kopf { height: 100px } keine so gute Idee. Was, wenn der Inhalt da nicht reinpasst?

In den Kopf kommt entweder nur eine breitere Grafik oder eine schmälere Grafik mit etwas festem Text, der nicht umgebrochen wird. Die Höhe wird dann noch darauf optimiert (vermutlich weniger als 100px).

Und nicht zuletzt verbleiben, wenn 170px für die Navigation abgehen, für den Hauptbereich auf meinem Gerät nur 150px Breite. Die Boxen sollten bei schmalen Viewports untereinander angezeigt werden. Bei Verwendung von min-width und Flexbox oder float braucht man dazu nicht mal einen Media-Query.

Für die Navigation werden 150px ausreichen, was aber nichts prinzipielles ändert. Es ist natürlich immer die Frage, welche Bildschirm- bzw. Fenstergrößen man noch unterstützen will. In Anbetracht von Tabellen mit relativ vielen Spalten, die sich z.T. im Inhaltsbereich befinden werden, erscheint mir eine wirklich sinnvolle Nutzung bei 320px Breite ohnehin etwas illusorisch. Ich wäre schon ganz froh, wenn bei 800x400px im Querformat alles gut nutzbar wäre. Aber ich werde mir das nochmal genauer ansehen...

[Gunnar Bittersmann]

@@Oleander

Du möchtest von den 100% noch 100px abziehen: calc(100% - 100px).

Perfekt, damit funktioniert es. Dass mehr als 100% etwas zuviel sind, leuchtet schon ein.

Wo du weiter unten alte Browser ansprichst: calc() geht im IE erst ab IE 9. Für alte Browser wäre eine andere Lösung vorzusehen, z.B. den Header nicht fix zu positionieren.

Was sowieso nicht immer die beste Idee ist, da der auf kleinen Bildschirmen wertvollen Platz wegnimmt. Also die fixe Positionierung mit Media-Query für große Viewports und moderne Browser (alte verstehen Media-Queries nicht) hinzufügen.

Zum zweiten: Damit auch per Tastatur gescrollt werden kann, müssen die betreffenden Elemente den Fokus erhalten können:
<div id="navigation" tabindex="0">,
<div id="inhalt" tabindex="0">.

Habe ich eingefügt. Kann man dabei noch irgendwie verhindern, dass der aktive div in Chrome dann mit einem relativ unschönen blauen Rahmen angezeigt wird?

Auf den Fall muss dem Nutzer, der per Tastatur navigiert, deutlich gemacht werden, welches Element den Fokus hat. Du kannst nicht den blauen Rahmen wegnehmen ohne eine andere Kennzeichnung vorzusehen. Wie hättest du es denn gern?

Drittens sollten das gar keine divs sein; "kopf" auch nicht. Sondern:
<header id="kopf">,
<nav id="navigation" tabindex="0">,
<main id="inhalt" tabindex="0">.

Hmm. Ich habe divs verwendet, da sie mir kompatibler zu älteren Browsern erschienen.

Bei divs gehen Nutzern assistiver Technologien wertvolle Informationen zur Seitenstruktur verloren. Verwende die richtigen HTML-Elemente. Falls die Darstellung in alte Browser bei deiner Zielgruppe wirklich noch ein Thema sein sollte, baue per conditional comment ein HTML5-Shiv ein.

Viertens ist eine feste Höhenangabe wie #kopf { height: 100px } keine so gute Idee. Was, wenn der Inhalt da nicht reinpasst?

In den Kopf kommt entweder nur eine breitere Grafik oder eine schmälere Grafik mit etwas festem Text, der nicht umgebrochen wird. Die Höhe wird dann noch darauf optimiert (vermutlich weniger als 100px).

Die Höhe zu „optimieren“ kann bei einigen Nutzern schiefgehen: Text wird auf ihrem System anders gerendert (z.B. wegen anderer Schriftart; das kann aber selbst bei der selben auftreten), so dass das, was bei dir in eine Zeile passt (bzw. in n Zeilen), bei anderen jedoch nicht, sondern zwei Zeilen (bzw. n + 1) beansprucht.

Nun schreibst du, dass bei dir nicht umbrochen wird. (Sondern? Abgeschnitten?) Aber auch eine Zeile kann auf verschiedenen Systemen unterschiedlich hoch sein. Der Nutzer könnte eine seinen Vorstellungen entsprechende andere Schriftgröße verwenden. Selbst bei gleicher Schriftgröße kann die Zeilenhöhe auf verschiedenen Systemen unterschiedlich sein (z.B. bedingt durch verschiedene Fonts).

Und nicht zuletzt verbleiben, wenn 170px für die Navigation abgehen, für den Hauptbereich auf meinem Gerät nur 150px Breite. Die Boxen sollten bei schmalen Viewports untereinander angezeigt werden. Bei Verwendung von min-width und Flexbox oder float braucht man dazu nicht mal einen Media-Query.

Für die Navigation werden 150px ausreichen, was aber nichts prinzipielles ändert. Es ist natürlich immer die Frage, welche Bildschirm- bzw. Fenstergrößen man noch unterstützen will. In Anbetracht von Tabellen mit relativ vielen Spalten, die sich z.T. im Inhaltsbereich befinden werden, erscheint mir eine wirklich sinnvolle Nutzung bei 320px Breite ohnehin etwas illusorisch. Ich wäre schon ganz froh, wenn bei 800x400px im Querformat alles gut nutzbar wäre. Aber ich werde mir das nochmal genauer ansehen...

Darauf, mit welchen Geräten deine Seiten verwenden, hast du kaum Einfluss. Wohl aber darauf, wie deine Seiten auf den Geräten dargestellt werden.

Man kann ja Inhalte sich kleinen Viewports anpassen lassen und sie dann nicht in Tabellenform, sondern auf eine für diese Geräte geeignete Weise darstellen lassen. Responsive Tabellen im SELFHTML-Wiki und bei meinem geschätzten Kollegen.

LLAP 🖖

[Oleander]

Wo du weiter unten alte Browser ansprichst: calc() geht im IE erst ab IE 9. Für alte Browser wäre eine andere Lösung vorzusehen, z.B. den Header nicht fix zu positionieren.

Ich teste hin und wieder ganz grob mit dem IE8 und sehe, dass dort alles einigermaßen bedienbar bleibt (auch wenn vielleicht nicht unbedingt alles schön aussieht). Viel Zeit will ich in die Darstellung in alten Browsern nicht investieren. Bei Verwendung von calc erscheint im IE8 kein Scrollbalken, was aber auch keine Verschlechterung ist. Ich würde mal davon ausgehen, dass auf mobilen Geräten (und gerade dort gibt es ja die geringen Bildschirmgrößen) kaum sehr alte Browser im Einsatz sind (und besonders kein IE < 9)

[tabindex]

Auf den Fall muss dem Nutzer, der per Tastatur navigiert, deutlich gemacht werden, welches Element den Fokus hat. Du kannst nicht den blauen Rahmen wegnehmen ohne eine andere Kennzeichnung vorzusehen. Wie hättest du es denn gern?

Ich weiß auch nicht. Mir war nur aufgefallen, dass im Firefox (im Gegensatz zu Chrome) keine Auswirkung in der Darstellung zu sehen war. Wobei mir jetzt auffällt, dass im Firefox sogar schon vor dem Einfügen des tabindex alles auch per Tastatur zu bedienen war.

Drittens sollten das gar keine divs sein; "kopf" auch nicht. Sondern:
<header id="kopf">,
<nav id="navigation" tabindex="0">,
<main id="inhalt" tabindex="0">.

Bei divs gehen Nutzern assistiver Technologien wertvolle Informationen zur Seitenstruktur verloren. Verwende die richtigen HTML-Elemente.

Aber divs sind doch auch nach HTML 5 zulässig (im Gegensatz zu frames). Und was sollte ich machen, wenn ich noch mehr Bereiche benötige, die nicht alle in die vorgegebenen Kategorien fallen?

[Kopf]

Nun schreibst du, dass bei dir nicht umbrochen wird. (Sondern? Abgeschnitten?) Aber auch eine Zeile kann auf verschiedenen Systemen unterschiedlich hoch sein. Der Nutzer könnte eine seinen Vorstellungen entsprechende andere Schriftgröße verwenden. Selbst bei gleicher Schriftgröße kann die Zeilenhöhe auf verschiedenen Systemen unterschiedlich sein (z.B. bedingt durch verschiedene Fonts).

Ich verwende dort "white-space: nowrap". Der Font wird von der eigenen Website geladen (vielleicht auch von Google Fonts). In älteren Browsern, die keine Fonts nachladen können, sieht es dann halt ggf. wieder nicht so schön aus.