meggi09: Problem mit position:sticky und div box

Hallo 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

  1. Liebe(r) meggi09,

    Weiß jemand was hier das Problem sein könnte?

    nicht ohne online-Beispiel.

    Liebe Grüße,

    Felix Riesterer.

    1. problematische Seite

      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

      1. problematische Seite

        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 beiden nav-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.

        1. problematische Seite

          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

          1. problematische Seite

            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.
            1. problematische Seite

              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

              1. problematische Seite

                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.

          2. problematische Seite

            @@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 die h1 – davon gibt es üblicherweise nur eine; das h steht 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) im header. 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 das li in einer Liste ul sein.

            .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 in px angegeben werden, sondern im Verhältnis zur Schriftgröße (em bzw. 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 12em breit sein soll, und dazwischen jeweils 1em Abstand – fertig.

             

            Zur Nebeneinander-Positionierung der Seiten(abschnitt)navigation und der Charaktere habe ich allerdings float verwendet, 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 (@media query). Bei schmalem Viewport wird das untereinander dargestellt.

             

            Nun zu dem sticky-Dingens. Bei mir ist das main > header (nicht irgendein div) – und das nur, wenn JavaScript ausgeführt wird und damit die Klasse js-enabled gesetzt 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 Einzeiler

            const 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
            1. problematische Seite

              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

              1. problematische Seite

                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.

                1. problematische Seite

                  @@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
            2. problematische Seite

              @@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“ clickt1 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 🖖

              1. wo ich heute schon mal über Picard (un)sinniert hatte 🤣

              -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. problematische Seite

                @@Gunnar Bittersmann

                Das Zeugs sollte auch ausgeführt werden, wenn man auf einen seiteninternen Link clickt.

                Nicht „auch“, sondern „dann“. Bei hashchange nicht 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
      2. problematische Seite

        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.
  2. 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

    1. problematische Seite

      So, habs geschafft das Ding online zu stellen.