nicht angemeldet
Problem mit position:sticky und div box
Matthias Apsel
Gunnar Bittersmann
JürgenBHallo alle zusammen,
ich habe auf meiner Seite den Navigationspart mit dem Befehl Position:sticky fixiert, damit er an Ort und Stelle bleibt, sobald er den oberen Bildrand beim scrollen erreicht hat. Das funktioniert super, bis kurz vor Ende der Seite, da dort der Navigationspart plötzlich auch mit nach oben geht.
Ich habe den Text, der scrollbar sein soll, in einer div box zusammengefasst, damit ich den Abstand zum Rand definieren konnte. Der Rand ist auch bis zum Ende richtig, falls ich meiner box allerdings eine Farbe gebe, wird der letzte Teil der Seite nicht mit Farbig, als ob er nicht in der box drinne wäre, aber der Abstand stimmt ja. Ich bin etwas ratlos. Ich weiß nicht ob die beiden Probleme überhaupt zusammen hängen, aber da sie zusammen an der gleichen stelle auftreten gehe ich davon aus.
Weiß jemand was hier das Problem sein könnte?
Liebe Grüße Meggi
-
Liebe(r) meggi09,
Weiß jemand was hier das Problem sein könnte?
nicht ohne online-Beispiel.
Liebe Grüße,
Felix Riesterer.
-
so, ich habs geschafft und meine Webseite online gestellt, ich hoffe es funktioniert so. Leider kann ich mich im Forum nicht mehr anmelden, keine Ahnung warum. Ich hoffe, man kann mir so helfen
-
Liebe(r) Meggi092,
so, ich habs geschafft und meine Webseite online gestellt,
sehr gut. Jetzt sieht man, was da los ist: Du hast echte Fehler in Deinem Markup (HTML-Code)! Validator-Ergebnis: 57 Beanstandungen
Unter den Fehlern sind welche, die für Dich im Moment nicht wichtig sind, wie z.B.
- unmaskierte Leerzeichen bei Internet-Adressen (z.B. Fehler Nr. 3, 4, 6, 7, 9, 11 usw.),
- fehlendes Encoding für Dein Dokument (Fehler Nr. 2 - Nimm
<meta charset="windows-1252">oder noch besser: Ändere die Kodierung Deines Quelltextes auf UTF-8 und benenne es dann entsprechend), - fehlerhafte Rechtschreibung beim
height-Attribut für Bilder (Fehler Nr. 8, 10, 12 usw.).
Der erste Eintrag ist eine Warnung, dass Du keine Sprachangabe für die im Dokument verwendete Sprache des Inhalts gemacht hast (notiere
<html lang="de">und gut is).Hier wird es jetzt aber interessant:
Du verwendest ein Element mit dem Namen
nav2, welches es nicht gibt (Fehler Nr. 5). Das solltest Du unbedingt zu einem<nav>ändern. Das bedeutet auch, dass Du Deine Selektoren in Deinem CSS-Code anpasst, damit sie zwischen den beidennav-Elementen unterscheiden können.Leider kann ich mich im Forum nicht mehr anmelden, keine Ahnung warum.
Hast Du Dein Passwort vergessen? Das könntest Du mit den entsprechenden Tools hier im Forum wieder ändern (lassen).
Ich hoffe, man kann mir so helfen
Natürlich!
Liebe Grüße,
Felix Riesterer.
-
Lieber Felix Riesterer,
danke für die Hinweise, zu meinen Fehlern. Ich bin noch ein ziemlicher Anfänger, was vermutlich nicht zu übersehen ist, weshalb ich für jeden Hinweis dankbar bin. Ich werde auf jeden Fall versuchen, diese Fehler zu beheben. Allerdings sehe ich immer noch nicht, wo das Problem liegt, dass mein linker Navigationspart am ende der Seite doch mit nach oben verschwindet.
Grüße Meggi
-
Hallo meggi09,
danke für die Hinweise, zu meinen Fehlern. Ich bin noch ein ziemlicher Anfänger, was vermutlich nicht zu übersehen ist, weshalb ich für jeden Hinweis dankbar bin. Ich werde auf jeden Fall versuchen, diese Fehler zu beheben. Allerdings sehe ich immer noch nicht, wo das Problem liegt, dass mein linker Navigationspart am ende der Seite doch mit nach oben verschwindet.
Ich seh das auch nicht auf die Schnelle. Allerdings solltest du die genannten Fehler beheben, dann findet sich sicher schneller eine Lösung für die sticky-Problematik.
"Bild" ist meistens kein sinnvoller alt-Text für ein Bild.
Und du hast noch ein sehr großes Problem: Sowohl die Namen als auch die Fotos der Charaktere aus dem Harry-Potter-Universum sind mMn. urheberrechtlich geschützt. Du darfst sie also nicht so ohne weiteres verwenden.
Bis demnächst
Matthias--
Pantoffeltierchen haben keine Hobbys.-
Hallo Matthias,
der Alternativtext "Bild" rührt daher, dass Es sich um ein Bild der Peron handelt, deren Name eh schon in der Überschrift steht, deshalb dachte ich, ich müsste als Alternativtext ja nicht noch einmal den Namen nehmen. Des Problems mit den Urheberrechtsfragen der Bilder bin ich mir auch durchaus bewusst. Da es sich aber nur um ein Schulprojekt handelt und wir diese Seite nicht online stellen wollen, haben wir die Bilder trotzdem verwendet, aber vielen dank für den Hinweis.
Gruß
Meggi
-
Liebe(r) Meggi092,
der Alternativtext "Bild" rührt daher, dass Es sich um ein Bild der Peron handelt, deren Name eh schon in der Überschrift steht, deshalb dachte ich, ich müsste als Alternativtext ja nicht noch einmal den Namen nehmen.
das kannst Du aber besser! Warum nicht "Portrait von Harry" oder "Ron auf seinem Besen beim Quidditch"?
Liebe Grüße,
Felix Riesterer.
-
-
-
@@meggi09
Allerdings sehe ich immer noch nicht, wo das Problem liegt, dass mein linker Navigationspart am ende der Seite doch mit nach oben verschwindet.
Den Übeltäter hab ich auch nicht erspäht; aber da noch so einiges verbesserungwürdig ist, hab ich das mal in einem Paralleluniversum nachgebaut.
danke für die Hinweise, zu meinen Fehlern. Ich bin noch ein ziemlicher Anfänger, was vermutlich nicht zu übersehen ist, weshalb ich für jeden Hinweis dankbar bin. Ich werde auf jeden Fall versuchen, diese Fehler zu beheben.
Da wären die Überschriften: Du darfst
h1,h2,h3, … nicht willkürlich vergeben, sondern schön der Reihe nach. Die Seitenüberschrift ist dieh1– davon gibt es üblicherweise nur eine; dashsteht hier für Highlander.Die Seitenüberschrift ist in deinem Fall nicht „Das HARRY POTTER Universum“ (das wäre die Bezeichnung der Website), sondern „Die Charaktere“. (In meinem Beispiel ist es „Cast“, nicht „The Star Trek Universe“.)
„Die Hogwarts-Schüler“, „Die Hogwarts-Lehrer“ usw. sind
h2. Aber bitte nicht mit Deppenleerzeichen! Und die einzelnen Abschnitte dürfen gern als solche ausgezeichnet sein (section).„Das Harry-Potter-Universum“ ist einfach Text (
p) imheader. Auch hier mit Bindestrichen durchgekoppelt, und die Großbuchstaben gehören nicht ins Markup – ein Screenreader würde sonst womöglich „Ha A Er Er Ypsilon Pe O Te Te E Er“ vorlesen. Wenn du da was hervorheben willst, dann so:<p>Das <em>Harry-Potter</em>-Universum</p>Großbuchstaben sind Sache des Stylesheets:
header em { font-style: inherit; text-transform: uppercase; }Du zählst die Charaktere auf – auch das sollte sich im Markup wiederspiegeln. Statt
<div class="charakterbox1">sollten dasliin einer Listeulsein..charakterbox1 { height: 900px }ist ganz übel! Nicht machen! Du kannst nicht wissen, ob der Inhalt bei allen Nutzern (wo evtl. andere Schriftarten und -größen verwendet werden) da reinpasst. Außerdem sollten Längen nicht inpxangegeben werden, sondern im Verhältnis zur Schriftgröße (embzw.rem) oder zur Größe anderer Elemente (%,vw,vh)..charakterbox1 { float: left }– nein, auch das nicht! Floats sind kein geeignetes Mittel, um Elemente in ein Raster zu packen. Sie wurden in der Vergangenheit dazu missbraucht, als es noch nichts anderes gab. Die Zeiten sind glücklicherweise vorbei: es gibt CSS Grid – nicht nur das beste, sondern auch das einfachste Werkzeug für diesen Zweck.Im meinem Beispiel ist es einfach:
section ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)); gap: 1em; }Mache ein Raster mit so vielen Spalten wie Platz haben, wobei jede mindestens
12embreit sein soll, und dazwischen jeweils1emAbstand – fertig.Zur Nebeneinander-Positionierung der Seiten(abschnitt)navigation und der Charaktere habe ich allerdings
floatverwendet, weil das keine Geschwisterelemente sind und das mit Grid oder Flexbox ziemlich fricklig werden würde – wenn denn überhaupt möglich.Das floatet aber nur bei genügend breitem Viewport (
@mediaquery). Bei schmalem Viewport wird das untereinander dargestellt.Nun zu dem
sticky-Dingens. Bei mir ist dasmain > header(nicht irgendeindiv) – und das nur, wenn JavaScript ausgeführt wird und damit die Klassejs-enabledgesetzt ist.Wenn ein seiteninterner Anker (
section) angesprungen wird, landet der ja oben am Seitenanfang und wird durch den sticky header verdeckt. Da wir dessen Höhe nicht kennen (Schriftart, -größe; s.o.), muss diese mit JavaScript ausgelesen werden und ermittelt werden, ob und um wieviel da noch zu scrollen ist. Das erledigt bei mir der Einzeilerconst offset = window.scrollY - currentSectionElement.offsetTop + mainHeaderElement.offsetHeight;der kaum in eine Zeile passt. Aber lieber sprechende Variablennamen als gar kein Schimmer, was das Script tut.
Und dann läuft das auch bis zum Seitenende durch. Bei mir ist da nichts, was den Header aus dem Viewport rausschiebt.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Hallo Gunnar,
vielen Dank für deine sehr ausführliche Antwort. Ich werde versuchen, alle Tipps umzusetzen, was aber vermutlich nicht ganz einfach wird. Vor allem das CSS grid werde ich mir mal ansehen, das hat unser Lehrer nie erwähnt, er setzt voll und ganz auf den float Befehl.
Gruß
Meggi
-
Liebe(r) Meggi092,
das hat unser Lehrer nie erwähnt, er setzt voll und ganz auf den float Befehl.
kicher - Schule und Webtechniken... der Vergleich mit Hase und Igel ist einfach unfair, weil Schulen kaum mit dem Hasen Schritt halten können.
Liebe Grüße,
Felix Riesterer.
-
@@Felix Riesterer
der Vergleich mit Hase und Igel ist einfach unfair, weil Schulen kaum mit dem Hasen Schritt halten können.
Was weitaus weniger schlimm wäre, wenn sie denn nicht ständig „Ick bin schon hier!“ rufen würden.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
-
@@Gunnar Bittersmann
Wenn ein seiteninterner Anker (
section) angesprungen wird, landet der ja oben am Seitenanfang und wird durch den sticky header verdeckt. Da wir dessen Höhe nicht kennen (Schriftart, -größe; s.o.), muss diese mit JavaScript ausgelesen werden und ermittelt werden, ob und um wieviel da noch zu scrollen ist.Das hatte ich im Paralleluniversum beim
hashchange-Event gemacht. Das reicht aber nicht.Wenn man auf „Next Generation“ clickt[1] und dann noch mal, springt der Abschnitt nach oben, d.h. hinter den sticky header. Da das
hashchange-Event nicht erneut feuert, wird das nicht korrigiert.Das Zeugs sollte auch ausgeführt werden, wenn man auf einen seiteninternen Link clickt. Sowie initial beim Laden der Seite, wenn diese schon mit fragment identifier im URL aufgerufen wird.
Mal sehen, vielleicht passe ich das im Pen noch an.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
wo ich heute schon mal über Picard (un)sinniert hatte 🤣 ↩︎
-
@@Gunnar Bittersmann
Das Zeugs sollte auch ausgeführt werden, wenn man auf einen seiteninternen Link clickt.
Nicht „auch“, sondern „dann“. Bei
hashchangenicht mehr, ansonsten würde das ja unnötigerweise doppelt ausgeführt werden.Mal sehen, vielleicht passe ich das im Pen noch an.
✔︎ done
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
-
Hallo Meggi092,
Leider kann ich mich im Forum nicht mehr anmelden, keine Ahnung warum.
Schau mal in deinen Spamordner, ob da eine Mail zur Bestätigung des Accounts eingelaufen ist.
Bis demnächst
Matthias--
Pantoffeltierchen haben keine Hobbys.
-
-
-
Hallo Meggi,
Weiß jemand was hier das Problem sein könnte?
statistisch steckt der Fehler in Zeile 42 😀
Aber wenn du deine Seite irgendwo online stellst, kann man sich das mal genauer ansehen.
Gruß
Jürgen-
So, habs geschafft das Ding online zu stellen.
-