Fußnotennutzer: JavaScript AutoFootnoter und fester Header am Seitenkopf

Hallo,

ich hoffe, ich bin hier im richtigen Forum mit meiner Frage.

Ich nutze auf meiner Internetseite den Auto Footnoter auf JavaScript-Basis, der hier beschrieben wird. Der funktioniert soweit auch so, wie er soll.

Nun habe ich aber auf allen Seiten einen per CSS als position:fixed am Seitenkopf. Dies führt nun dazu, dass beim Zurückspringen von der Fußnotenerläuterung am Seitenfuß in den Text die Fußnote standardmäßig hinter dem Header verschwindet. Normalerweise würde ich das per CSS so lösen, dass ich dem Anker im Text folgende Merkmale zuweise:

a.anchor { display:block; position:relative; top:-100px; visibility:hidden; }

Die -100px sind dabei dann der (hier exemplarische) Offset, der beim Zurückspringen von der Fußnotenerläuterung in den Text auf den oberen Seitenrand angewendet wird. Für die Fußnotenanker im Text funktioniert diese Lösung allerdings nicht so wie gewünscht. Die Fußnoten werden statt im Text in einer Reihe untereinander am linken Seitenrand angezeigt. Also habe ich das JS-Fußnotenskript so modifiziert, dass ich den Fußnotenankern einen leeren Hyperlink beigebe (...<a class="fnheader"></a>... ), dem ich dann folgende CSS-Merkmale zuweise:

a.fnheader { position:relative; margin-top:-150px; padding-top:150px; visibility:none; }

Das funktioniert dahingehend, dass ich nun ohne Probleme von den Fußnoten im Text zu den Erläuterungen am Seitenfuß und umgekehrt springen kann. Aber: Bedingt durch die padding-top:150px vergrößert sich der anklickbare Linkbereich nach oben hin. Hierzu mal ein Screenshot, in dem ich eine 1px border red ergänzt habe, um den per padding definierten Bereich sichtbar zu machen:

Wie man erkennen kann, überdeckt das padding-top von Fußnote 86 auch die Fußnote 85. Wenn ich nun Fußnote 85 auswählen will, komme ich zur Erläuterung von Fußnote 86.

In den Fußnotenerläuterungen am Seitenfuß sieht das ganze natürlich dann genauso aus, d. h. wenn ich hier die 86 auswähle, komme ich zur Fußnote 93 im Text, da sich das padding-top der 93 bis auf die 86 ausdehnt. Ich hoffe, das kann man soweit verstehen …

Nun frage ich mich, wie ich dieses Problem lösen kann.

Es läuft ja anscheinend alles darauf hinaus, dass ich entweder einen anderen Weg wählen muss, um das Problem mit dem festen Header zu umgehen, oder eben den anklickbaren Bereich der Fußnotenlinks verkleinern muss. Letzteres halte ich für nicht möglich (jedenfalls weiß ich auch nach längerer Internetrecherche nicht, wie ich das machen sollte, ohne den padding-top zu verkleinern).

Leider sehe ich auf beiden Wegen derzeit daher keine wirkliche Lösung. Daher wäre ich hier für Lösungsideen oder Anregungen dankbar.

  1. Hallo Fußnotennutzer,

    a.fnheader { position:relative; margin-top:-150px; padding-top:150px; visibility:none; }

    none ist kein gültiger Wert für visibility.

    Leider sehe ich auf beiden Wegen derzeit daher keine wirkliche Lösung. Daher wäre ich hier für Lösungsideen oder Anregungen dankbar.

    Kann man sich deine Seite irgendwo anschauen?

    Bis demnächst
    Matthias

    -- Pantoffeltierchen haben keine Hobbys.
    ¯\_(ツ)_/¯
    1. none ist kein gültiger Wert für visibility.

      Das ist korrekt. Das ist noch ein Überbleibsel aus dem letzten verzweifelten Versuch, das Problem zu lösen.

      Kann man sich deine Seite irgendwo anschauen?

      Derzeit leider noch nicht öffentlich erreichbar. Ich kann ggf. per PN o. ä. eine Adresse bereitstellen, falls möglich/erwünscht.

  2. @@Fußnotennutzer

    Die -100px sind dabei dann der (hier exemplarische) Offset, der beim Zurückspringen von der Fußnotenerläuterung in den Text auf den oberen Seitenrand angewendet wird.

    Da du i.d.R. die Höhe von am Browserfenster oben bzw. unten festklebenden Bereichen nicht kennen kannst, ist jeder exemplarische Wert für den Offset falsch. Die tatsächliche Höhe dieser Bereiche musst auch auch mit JavaScript ermitteln. Und diese Bereiche nur dann fixieren, wenn JavaScript tatsächlich ausgeführt wird. ☞ Element.scrollIntoRestrictedView()

    S.a. dieses Posting und die darauf folgenden.

    LLAP 🖖

    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Da du i.d.R. die Höhe von am Browserfenster oben bzw. unten festklebenden Bereichen nicht kennen kannst, ist jeder exemplarische Wert für den Offset falsch.

      Das war von mir missverständlich ausgedrückt. Mit exemplarisch meinte ich hier einen Wert, den ich für den Foreneintrag hier einfach eingesetzt hatte. Das liegt daran, dass ich den CSS-Eintrag aus dem obigen Beitrag aus einem anderen Forenbeitrag kopiert hatte, den ich über Google gefunden hatte, und den Offset ergänzt habe. Der tatsächliche Wert (d. h. die tatsächliche Höhe meines Headers) ist 150 px. Der funktioniert soweit auch, z. B. bei der Erstellung eines automatischen Inhaltsverzeichnisses für jede Seite, basierend auf den <h>-Tags, per PHP.

      1. Hallo Fußnotennutzer,

        Der tatsächliche Wert (d. h. die tatsächliche Höhe meines Headers) ist 150 px.

        Das kannst du nicht wissen. Nutzer haben vielleicht eine größere Schrift eingestellt.

        Bis demnächst
        Matthias

        -- Pantoffeltierchen haben keine Hobbys.
        ¯\_(ツ)_/¯
        1. Das kannst du nicht wissen. Nutzer haben vielleicht eine größere Schrift eingestellt.

          Hm … Sowohl bei erhöhter Zoomstufe als auch größerer Schriftart funktioniert der Sprung im automatisch generierten Inhaltsverzeichnis ohne Probleme (in mehreren gängigen Browsern und Betriebssystemen). Das soll aber auch nicht Thema dieses Beitrags hier sein.

          Edit: Oder beziehen sich diese Anmerkungen auch auf die Fußnotenthematik? Da erkenne ich aber nicht, wieso sich dies anders darstellen sollte als mit dem reinen PHP-generierten Inhaltsverzeichnis.

          1. @@Fußnotennutzer

            Das kannst du nicht wissen. Nutzer haben vielleicht eine größere Schrift eingestellt.

            Hm … Sowohl bei erhöhter Zoomstufe als auch größerer Schriftart funktioniert der Sprung im automatisch generierten Inhaltsverzeichnis ohne Probleme (in mehreren gängigen Browsern und Betriebssystemen).

            Das glaube ich erst, wenn ich’s sehe.

            Das soll aber auch nicht Thema dieses Beitrags hier sein.

            Dass man so gut wie nie die für einen Text benötigte Höhe kennt, kann man kaum oft genug wiederholen.

            LLAP 🖖

            -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Dass man so gut wie nie die für einen Text benötigte Höhe kennt, kann man kaum oft genug wiederholen.

              Mein Header ist jedoch ein Bild mit konstanten Abmessungen. Darunter befindet sich die Navigationsleiste, die in einem eigenen div aus einer PHP-Datei eingebunden wird. Darunter schließt sich dann eine Breadcrumbnavigation an, die sich im selben div befindet wie die Navigationsleiste.

              Auf dem Bild oben das Headerbild, dann mit schwarzem Hintergrund die Navigationsleiste, darunter angeschnitten die Breadcrumbnavigation. In blau dann die erste Überschrift, die ich aus dem Inhaltsverzeichnis anspringe.

              1. @@Fußnotennutzer

                Mit „wenn ich’s sehe“ war kein Bilck durchs Schlüsselloch gemeint.

                LLAP 🖖

                -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  3. Hallo Fußnotennutzer,

    aus meiner Sicht kann ich immer nur davon abraten, einen fixierten Seitenheader mit position:fixed zu verwenden. Das macht nur Kopfschmerzen, wenn auf der Seite herumgesprungen wird.

    Ich setze dieses Flexbox-Grundgerüst ein, um Header und/oder Footer zu fixieren. Gescrollt wird dann nur das Innere des Main-Bereichs. Header und Footer haben ihre „natürliche“ Höhe. Wenn man ein Holy Grail Layout will (also im Main-Bereich noch einen linken und rechten Streifen, der ggf. autark scrollt), steigt man besser auf Grid um statt dafür eine weitere Flexbox einzusetzen.

    <body> <header>...</header> <main>...</main> <footer>...</footer> </body> body { display: flex; flex-direction: column; height: calc(100vh - 16px); margin: 8px; } header, footer { flex: 0 0 auto; background-color: #fcc; } main { flex: 1 0 1em; background-color: #ccf; overflow: auto; }

    Das funktioniert im IE ab Version 10 und ältere Versionen braucht man heute nicht mehr zu beachten.

    Rolf

    -- sumpsi - posui - clusi
    1. @@Rolf B

      body { height: calc(100vh - 16px); margin: 8px; }

      Was rechnest du denn da rum?

      *, ::before, ::after { box-sizing: border-box } body { height: 100vh; margin: 0; padding: 0.5em; }

      (Die px hab ich auch gleich korrigiert.)

      Aber Header und Footer sollten doch bis zum Bildschirmrand gehen, body also 0 Padding haben?

      Das funktioniert im IE ab Version 10 und ältere Versionen braucht man heute nicht mehr zu beachten.

      Braucht man nicht? „Ich unterstütze jeden Browser; ich optimiere für keinen.“ (Jeremy Keith)

      Aber glücklicherweise funktioniert das ja auch in IE < 10.

      Wo es nicht funktioniert: auf Smart Watches. Auf dieses Posting hatte ich ja schon hingewiesen. Also das Ganze in einen @media (min-height: )-Block.

      LLAP 🖖

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

        zumindest in meinem Browser ist das Default-Stylesheet so, dass der Body einen Margin von 8px hat. Den wollte ich nicht blindlings durch Padding ersetzen.

        Globalgalaktischer border-box Mode und padding im body ist natürlich eine Alternative.

        Ob Header und Footer bis zum Vierportrand gehen sollten, oder ob man das defaultmäßige halbe em Abstand zum Fensterrand haben möchte, ist eine Entscheidung des UI Designers.

        Der OP hat jetzt jedenfalls beide Möglichkeiten gezeigt bekommen und kann wählen was er will :)

        Rolf

        -- sumpsi - posui - clusi