Seiteninhalt richtig positionieren
ReinerG
Seiteninhalt richtig positionieren
ReinerG
Matthias Scharwies
JürgenB
Der Martin
Gunnar BittersmannHallo,
ich befasse mich schon etwas länger mit HTML und CSS, aber erst die letzten zwei Wochen mit php. Bin nun dabei, meine Seite komplett selbst und ohne ein CMS als Unterbau aufzubauen.
Jetzt bin ich auf mein erstes Problem gestoßen, das sicher mit CSS behoben werden muss:
Navigation und Header sind fixiert. Wenn ich jetzt eine Sprungmarke einsetzte, wird der Anker unter Navigation und Header geschoben. Schuld daran ist wahrscheinlich, dass beim scrollen, der Seiteninhalt <main>, 100 % des Browserfensters nutzt. Ohne Einsatz von Sprungmarken ist meine Positionierung mittels 5em Padding natürlich kein Problem.
Wie könnte ich dieses Problem beheben?
MfG Reiner
akzeptierte Antworten
Seiteninhalt richtig positionieren
Rolf B
Bewertung: keine Bewertung
-
Hallo ReinerG,
ja, das ist das Grundsatzproblem von position:fixed, weshalb ich es nicht verwende, wenn ich auf der Seite einen Anker anspringen können möchte.
Eine „Billiglösung“ besteht darin, den Anker nicht auf die Überschrift zu setzen, sondern auf ein span-Element im Anker. Dieses Span-Element macht man visuell unauffällig und verschiebt es geeignet nach oben:
<h2><span class="anchor" id="artikel1"></span>Dies ist die Überschrift</h2>span.anchor { transform: translate(0,-5em); }Aber das ist nicht zu empfehlen.
- Du musst dieses Pattern in jeder Überschrift einbauen
- Du musst die Höhe der Überschrift JavaScript ermitteln und das Body-Padding sowie den Transform darauf anpassen. Die Annahme, dass Du die Höhe der Überschrift kennst, ist ein Irrtum.
Meine Lösung sieht so aus, dass ich die Seite so gestalte, dass der Body 100% Viewporthöhe hat (ggf. korrigiert um Margins). Der fixierte Teil steht oben, der scrollbare Teil befindet sich in einem Scrollcontainer darunter, der den Rest des Viewports ausfüllt. Der Scrollbar gilt dann nur für den Inhaltsteil und der Header bleibt stehen.
Das kann man mit Rechnerei umsetzen, mit Flexbox oder mit Grid. Nimm Grid…
<body> <header> <div class="logo">...</div> <nav> <input type="radio"...> <!-- Radiobuttonhack = Sanierungsalarm! --> <ul>...</ul> </nav> </header> <button id="myBtn">Go to top</button> <main> </main> <div>lightbox-geraffel</div> </body>body { margin: 8px; /* Browserunterschiede ausschließen */ height: calc(100vh - 16px); /* Body+Margins = 100% Viewporthöhe */ display: grid; grid: "logo nav" auto "main main " 1fr / auto 1fr; gap: 0.5em; /* Beispielsweise */ } header { display: contents; /* Die Kindelemente des Headers sind Grid-Items */ } div.logo { grid-area: logo; } nav { grid-area: nav; } main { grid-area: main; overflow: scroll; } button#myBtn { /* Dieser Button möchte eine klarere ID haben! */ grid-area: main; place-self: bottom right; }Der header hat display:contents, damit er im Layout durch seine Kinder ersetzt wird, also Logo und Navigation. Diese werden mit grid-area in die Grid-Zellen logo und nav gesetzt und stehen damit nebeneinander. Durch die Spaltenangaben "auto 1fr" (hinter dem Schrägstrich) wird die Logospalte so breit wie nötig und für nav ist der Rest verfügbar.
Das main-Element füllt den unteren Teil in ganzer Breite. Der Button wird ebenfalls in den unteren Teil gesetzt, aber über place-self positioniert er sich in die untere rechte Ecke dieses Bereichs.
Infos zum Grid-Layout findest Du im Selfhtml-Wiki.
Den Radiobutton-Hack für das Menü im "Schmal" Modus solltest Du entfernen, das ist unzeitgemäß und nicht zugänglich. Ich habe das Thema mit Jürgen im Thread "Popover" diskutiert, schau mal dort. Das Wiki hat auch was zu Popover, aber die anchor-Diskussion ist dort noch zurückgestellt und ist bisher auch nur in Chromium-Browsern gegeben. Ob der Polyfill überall funktioniert, kann ich nicht sagen.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
danke für die ausführliche Antwort.Eine „Billiglösung“ besteht darin, den Anker nicht auf die Überschrift zu setzen, sondern auf ein span-Element im Anker. Dieses Span-Element macht man visuell unauffällig und verschiebt es geeignet nach oben:
Das hatte ich mir auch schon überlegt, aber schon deshalb verworfen, weil ja dann ein Screenreader nicht das sieht, was er sehen sollte.
Billiglösungen waren ja noch nie die besten.
Meine Lösung sieht so aus, dass ich die Seite so gestalte, dass der Body 100% Viewporthöhe hat (ggf. korrigiert um Margins). Der fixierte Teil steht oben, der scrollbare Teil befindet sich in einem Scrollcontainer darunter, der den Rest des Viewports ausfüllt. Der Scrollbar gilt dann nur für den Inhaltsteil und der Header bleibt stehen.
Das kann man mit Rechnerei umsetzen, mit Flexbox oder mit Grid. Nimm Grid…
Mit Grid hatte ich bisher nie was gemacht. Muss ich mich jetzt eben mit befassen.
Den Radiobutton-Hack für das Menü im "Schmal" Modus solltest Du entfernen, das ist unzeitgemäß und nicht zugänglich. Ich habe das Thema mit Jürgen im Thread "Popover" diskutiert, schau mal dort. Das Wiki hat auch was zu Popover, aber die anchor-Diskussion ist dort noch zurückgestellt und ist bisher auch nur in Chromium-Browsern gegeben. Ob der Polyfill überall funktioniert, kann ich nicht sagen.
Das mit dem Radiobutton-Hack und Popover verstehe ich gerade nicht.
Das Menu habe ich übernommen (kopiert) und etwas angepasst. Ergo werde ich auch hier meinen Wissensstand erweitern müssen.Meinst du diesen Thread: Popover abgetrennt aus....?
Gruß Reiner
-
Hallo ReinerG,
Ja, den Thread meinte ich.
Das Menu habe ich übernommen (kopiert) und etwas angepasst.
Es ist nicht unbedingt gut, was früher mal Stand der Technik war. Checkbox- oder Radiobutton-Hacks hat man früher oft verwendet, weil sie das Einblenden von Inhalten ohne JavaScript ermöglichen. Und dabei einen Teil der Seitenbesucher vielleicht nicht ganz ausgeschlossen, aber vor eine Hürde gestellt. Zugänglichkeit wird immer wichtiger und die Gesetze ändern sich. Irgendwann wird das Online stellen einer nicht barrierefreien Seite mit Gefängnis oder 3 Jahren Screenreader-Zwang vor unzugänglichen Webseiten bedroht sein…
<nav> <input type="checkbox" id="menuHack"> <label for="menuHack"><!-- Menübutton-symbol --></label> <ul> <!-- Menü-Items </ul> </nav>nav ul { display: none; } nav input[type="checkbox"]:checked ~ ul { display: block; }Bei Dir ist es eine Radiogruppe, aber die Idee ist die Gleiche.
Problem ist: Assistenztechniken erkennen so keinen Zusammenhang zwischen Pseudo-Button und Menüliste, weshalb ein Nutzer von Assistenztechniken dadurch unnötig verwirrt wird. Eine Lösung mit echtem Button sowie aria-Attributen ist besser, braucht aber JavaScript. Die Popover-Lösung verspricht eine zugängliche Lösung rein mit HTML+CSS, ist aber in Safari und Firefox noch nicht fertig.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
Irgendwann wird das Online stellen einer nicht barrierefreien Seite mit Gefängnis oder 3 Jahren Screenreader-Zwang vor unzugänglichen Webseiten bedroht sein…
Fehlende Barrierefreiheit ist natürlich nicht gut, die Strafandrohung aber schon 😅
Ich hab mich mal umgeschaut und bei W3Shools ein Beispiel gefunden, das ich als Vorlage nehmen würde. Bei so Fieseldingern brauche ich dann doch ein Anschauungsobjekt, welches zumindest ansatzweise in die Richtung geht, welche mir vorschwebt.
Grid muss ich mir natürlich noch voll reinziehen.
-
Hallo ReinerG,
Ich hab mich mal umgeschaut und bei W3Shools ein Beispiel gefunden, das ich als Vorlage nehmen würde.
Ach du grundgütiger Geier - das Ding ist kompletter Müll und nicht bedienbar (heißt: nicht für jeden bedienbar). Versuch mal, in diesem Menü ohne Maus irgendwas zu erreichen. Man sieht ja nicht mal, wo der Tastaturfocus ist.
@Matthias Scharwies - ich finde im Wiki kein Beispiel für diesen einfachen Fall: Im Breitwandformat eine Liste von Menüpunkten nebeneinander, bei schmalem Bildschirm wird ein Button draus. Wir haben das hier, da fehlt aber der responsive Aspekt.
Rolf
--
sumpsi - posui - obstruxi-
Servus!
Hallo ReinerG,
Ich hab mich mal umgeschaut und bei W3Shools ein Beispiel gefunden, das ich als Vorlage nehmen würde.
Ach du grundgütiger Geier - das Ding ist kompletter Müll und nicht bedienbar (heißt: nicht für jeden bedienbar). Versuch mal, in diesem Menü ohne Maus irgendwas zu erreichen. Man sieht ja nicht mal, wo der Tastaturfocus ist.
@Matthias Scharwies - ich finde im Wiki kein Beispiel für diesen einfachen Fall: Im Breitwandformat eine Liste von Menüpunkten nebeneinander, bei schmalem Bildschirm wird ein Button draus. Wir haben das hier, da fehlt aber der responsive Aspekt.
Ja, das müssten wir da noch hinzufügen.
Im Kapitel vorher gibt es diese Dropdown-Navigation, die sich von
untereinander bei schmalen Bildschirmen
auf
nebeneinander bei breiten Bildschirmen
ändert.
Evtl. sollten wir eins der fertigen Layouts so umarbeiten.
Herzliche Grüße
Matthias Scharwies
-
Hallo Matthias Scharwies,
jaaa - "diese Navigation" im Kapitel davor sieht so scheußlich aus, dass ich bisher nie Lust hatte, sie mir auf technische Meriten anzuschauen.
Ich finde sie auch unnötig kompliziert; eins der größten Handling-Probleme, die ich mit diesem Ding habe, entsteht aus der Möglichkeit, dass ein Menu-Item mit Unteritems gleichzeitig ein Link sein kann - das ist aus MEINER Sicht ein UI-Gau. Entweder Gruppe oder Link, nicht beides.
Aber das zu überarbeiten hab ich derzeit keine Luft.
Rolf
--
sumpsi - posui - obstruxi-
Servus!
Aber das zu überarbeiten hab ich derzeit keine Luft.
Da wartet ja auch noch ein Makeover - duckundwech
Bis dahin können wir auf das Wiki verweisen und in Mannheim eine ToDo-Liste mit wichtigen Baustellen erstellen.
Herzliche Grüße
Matthias Scharwies
-
Hallo Alle, danke erst einmal für die vielen Antworten. Für mich sind sie natürlich nicht wirklich der Hit. Was aber nicht an euch liegt.
Es stellt sich für mich jetzt schon die Frage: Das jetzige, veraltete, nicht barrierefreie Menu nutzen und mich aber gleichzeitig mit Popover als zukünftige Lösung auseinandersetzen. Ich denke, letzteres macht einfach mehr Sinn. Ich gehe kaum davon aus, dass ich mit bald 70 Jahren noch viele Seiten für mich schreiben werde 😀Gruß
Reiner
-
-
Hallo Matthias, hallo Rolf,
ich habe eine auf popover und anchor basierende Navigation in Arbeit:
https://wiki.selfhtml.org/wiki/Benutzer:JürgenB#Zug.C3.A4ngliche_Navigation_mit_popover_und_anchor
Aber ich warte jetzt erst mal, bis der Polyfill
position-anchor: auto;unterstützt bzw. Safari und Firefox bei anchor nachziehen.Gruß
Jürgen-
Servus!
Hallo Matthias, hallo Rolf,
ich habe eine auf popover und anchor basierende Navigation in Arbeit:
https://wiki.selfhtml.org/wiki/Benutzer:JürgenB#Zug.C3.A4ngliche_Navigation_mit_popover_und_anchor
Vielen Dank!
Aber ich warte jetzt erst mal, bis der Polyfill
position-anchor: auto;unterstützt bzw. Safari und Firefox bei anchor nachziehen.Ja, das ist der richtige Ansatz! Forschen, bis etwas funktioniert; das im Wiki für alle verfügbar halten und erst, wenn die Browser-Unterstützung da ist, in den Tutorials vorstellen.
Bei Popover war ich noch erstaunt, wie schnell das in allen Browsern implementiert wurde. Auch der Polyfill funktionierte gut.
Bei anchor positioning war wohl zu viel im Fluss, sodass der Polyfill nicht Schritt halten konnte.
Herzliche Grüße
Matthias Scharwies
-
Guten Morgen 😆
ich habe eine auf popover und anchor basierende Navigation in Arbeit:
https://wiki.selfhtml.org/wiki/Benutzer:JürgenB#Zug.C3.A4ngliche_Navigation_mit_popover_und_anchor
Aber ich warte jetzt erst mal, bis der Polyfill
position-anchor: auto;unterstützt bzw. Safari und Firefox bei anchor nachziehen.Gruß
JürgenDanke für dein Wiki Jürgen 👍
Nach genügend Schlaf, ein paar Runden mit dem Fahrrad, der Arbeit dazwischen, damit das Geld zum Leben reicht und immer wieder etwas Freizeit .... Hab ich mich mir dein Beispiel genauer umgeschaut und bei Mozilla über die Verwendung der Popover - API gelesen. Macht ja letztendlich keinen Sinn, nur mit frischer Luft durch den Tag zu kommen. Ein wenig Hirnakrobatik ist auch nicht schlecht.Mal schauen, ob ich noch mehr dazu, in verständlicher Sprache und auf Deutsch finde.
-
Hallo Reiner,
Die Basics hat Matthiashier aufgeschrieben.
Popover ist eigentlich einfach, Ankerpositionierung mal wieder irrsinnig kompliziert bzw. bei MDN gruselig umständlich erklärt. In der Spec ist es ganz aus mit Verstehen...
Rolf
--
sumpsi - posui - obstruxi-
Servus!
Hallo Reiner,
Die Basics hat Matthias hier aufgeschrieben.
Popover ist eigentlich einfach, Ankerpositionierung mal wieder irrsinnig kompliziert
Als ich das im April 2024 geschrieben hatte, war Anchor Positioning für FF126 angekündigt.
Mittlerweile haben wir FF138 und es wurde noch nicht implementiert.
TP (Technology Preview) heißt ja auch nur, dass es in ferner Zukunft läuft, nicht in den nächsten 1,2 oder 3 Versionen.
bzw. bei MDN gruselig umständlich erklärt.
Automatische Übersetzung, bzw. wohl auch Content Creation durch LLM.
In der Spec ist es ganz aus mit Verstehen...
Rolf
Herzliche Grüße
Matthias Scharwies
-
Moin,
Popover ist eigentlich einfach
Popo... wer? 🤭
*scnr*
Einen schönen Tag noch
Martin--
Manchmal kann man gar nicht so viel fühlen, wie man denkt.
Und manchmal fühlt man so viel, dass man gar nicht denken kann.-
@@Der Martin
Popover ist eigentlich einfach
Popo... wer? 🤭
Popover hat mit Popo genauso viel zu tun wie JavaScript mit Java. 😜
Jolan tru
PS. Matthias Apsel wäre stolz auf mich.
--
Wenn der Faschismus wiederkehrt, wird er nicht sagen „Hallo, ich bin der Faschismus.“ Er wird sagen: „Ich suche in diesem Deutschen Bundestag keine anderen Mehrheiten als die in der demokratischen Mitte. Wenn es heute eine solche Mehrheit gegeben hat, bedauere ich das.“ (Friedrich Merz)
-
-
Hallo Rolf,
Popover ist eigentlich einfach, Ankerpositionierung mal wieder irrsinnig kompliziert bzw. bei MDN gruselig umständlich erklärt. In der Spec ist es ganz aus mit Verstehen...
ich habe noch mal eine weitere Testseite gebaut: https://wiki.selfhtml.org/wiki/Benutzer:JürgenB#Test_verschachtelte_Popover_mit_Anchor_positioniert
Eine Popover-Navigation mit dem aktuellen Polyfill sollte machbar sein. Unschön ist nur die enge Verknüpfung zwischen html und css für die Verbindung zwischen Anker und Popover.
Gruß
Jürgen
-
-
-
-
-
-
-
Hallo,
Irgendwann wird das Online stellen einer nicht barrierefreien Seite mit Gefängnis oder 3 Jahren Screenreader-Zwang vor unzugänglichen Webseiten bedroht sein…
Fehlende Barrierefreiheit ist natürlich nicht gut, die Strafandrohung aber schon 😅
ich wäre froh, wenn der Gedanke auch mal bei Leuten ankäme, die Verpackungen für Consumer-Produkte designen. Die sollten eigentlich dazu verpflichtet werden, mindestens 100 Stück aus den von ihnen entworfenen Verpackungen auch wieder auszupacken. Dann würden sie vielleicht merken, was sie sich da für'n Sch...rott ausgedacht haben.
Oder Designer von Kleinelektronik-Geräten, etwa TV-Fernbedienungen, Rasierapparate, teils auch Handys. Was nützt es mir, wenn das Teil "cool" aussieht, aber in der Hand liegt wie ein flutschiges Stück Seife?
Einen schönen Tag noch
Martin--
Manchmal kann man gar nicht so viel fühlen, wie man denkt.
Und manchmal fühlt man so viel, dass man gar nicht denken kann.
-
-
-