Auf Kapitel-Überschrift springen, aber tiefer anzeigen

[Linuchss]

Moin,

ich habe eine Seite, deren Titel sticky ist, also beim Scrollen oben hängen bleibt.

Nun möchte ich, wenn ich per <a href="#kap_06"> auf die Kapitel-Überschrift verlinke, dass die nicht hinter, sondern unterhalb des Seitentitels erscheint.

padding-top und margin-top sind nicht die Lösung, wie geht's?

Linuchs

[Gunnar Bittersmann]

@@Linuchss

ich habe eine Seite, deren Titel sticky ist, also beim Scrollen oben hängen bleibt.

Nun möchte ich, wenn ich per <a href="#kap_06"> auf die Kapitel-Überschrift verlinke, dass die nicht hinter, sondern unterhalb des Seitentitels erscheint.

Das mochte schon so mancher.

😷 LLAP

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Das mochte schon so mancher.

Eine JavaScript-Lösung geht einfacher als dort gezeigt: Initial und bei moglichen späteren Änderungen (resize-Event) die Höhe des fixen Bereichs auslesen und der scroll-padding-top-Eigenschaft als Wert zuweisen. Guckst du.

😷 LLAP

[Linuchss]

Habe was gefunden. Mein provisorischer Browser Pale Moon kann dieses:

  h3::before {
    content: "";
    display: block;
    height: 3em;
  }

und packt den Block hinter die Seiten-Überschrift.

Gruß, Linuchs

[Gunnar Bittersmann]

@@Linuchss

Habe was gefunden. Mein provisorischer Browser Pale Moon kann dieses:

  h3::before {
    content: "";
    display: block;
    height: 3em;
  }

Damit siehst du wirklich blass aus.

Hast du dir irgendeins meiner Beispiele angesehen? Wenn ja, hätte dir eigentlich auffallen müssen, dass die freizulassende Höhe nicht 3em beträgt, sondern bei umbrechenden Inhalt von der Viewportbreite abhängt und außerdem von der beim Nutzer verwendeten Schriftart und -größe – welche du nicht wissen kannst.

Warum wohl sagte ich „die Höhe des fixen Bereichs [mit JavaScript] auslesen“?

😷 LLAP

[JürgenB]

Hallo Gunnar,

… und außerdem von der beim Nutzer verwendeten Schriftart und -größe – welche du nicht wissen kannst.

das habe ich damals schon nicht verstanden und auch nicht nachvollziehen können. Ich dachte immer, die Größe em bezieht sich auf die Schriftgröße. Hast du mal ein Beispiel, wo das nicht so ist?

In meinem Fall achte ich per Mediaquery (mit em) oder auch per JS darauf, mich nur um einen Einzeiler zu kümmern, und dessen Höhe „rate (?)“ ich dann in em.

Ich frage jetzt nur aus Interesse, deine Lösung mit dem scrollbaren main gefällt auch recht gut.

Gruß
Jürgen

[MudGuard]

Hi,

das habe ich damals schon nicht verstanden und auch nicht nachvollziehen können. Ich dachte immer, die Größe em bezieht sich auf die Schriftgröße. Hast du mal ein Beispiel, wo das nicht so ist?

Die 3em für die Höhe des h3-before beziehen sich auf die Schriftgröße des h3. Das kann, muß aber nicht, dieselbe Schriftgröße wie im fixierten Block sein (und auch da muß sie nicht einheitlich sein).

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo JürgenB,

Ich dachte immer, die Größe em bezieht sich auf die Schriftgröße.

Tut sie auch. Aber es gibt zwei Probleme.

1. 1em ist die Anzahl von Pixeln, die bei font-size angegeben ist. font-size beschreibt aber die Höhe eines Zeichens. Ein Text mit font-size:16px kann bei einer Narrow-Schriftart viel schmaler sein als bei einer Wide-Schriftart. Insofern ist em auch nicht die ideale Lösung, um Objekte auf einer Webseite auszumessen. Aber jedenfalls besser als direkte px

<p style="font-size:16px; font-family:Arial Narrow">
The lazy fox jumps over the quick brown dog
</p>
<p style="font-size:16px;">
The lazy fox jumps over the quick brown dog
</p>
<p style="font-size:16px;font-family:Verdana">
The lazy fox jumps over the quick brown dog
</p>

2. Falls Du die Idee hast, das für deine gewählte Schrift zu kompensieren, vergiss es. font-family ist eine Bitte an den Browser, und ob der nun "okay" oder "pfff" sagt, weiß nur der User.

3. Ich kann nicht zählen

4. Die physische Höhe eines Containers mit Fließtext darin und auto-Höhe wird außer von der font-size des Texts auch von der Breite des Containers bestimmt (jajaja, auch von margins und paddings und wasweißichsonstnoch). In einem schmalen Viewport kann bei gleicher Schrift und gleichem Content der Kopfbereich viel höher sein als in einem breiten Viewport.

Deswegen der resize-Handler und das Ausmessen des Containers.

Rolf

[JürgenB]

Hallo Rolf,

ich habe gerade mal bei den p die Höhe gemessen, und es gab echt Unterschiede, aber im Bereich 1px. Also kein wirkliches Problem. Und die Breite ist in meinem Fall unter Kontrolle.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

das habe ich damals schon nicht verstanden und auch nicht nachvollziehen können. Ich dachte immer, die Größe em bezieht sich auf die Schriftgröße. Hast du mal ein Beispiel, wo das nicht so ist?

• Nutzer können in ihrem Browser eine Mindestschriftgröße einstellen, was die Höhe des fixen Bereichs vergrößern kann – ohne dass sich dadurch die Umrechnung von em in px ändern würde.

• Text kann auf verschiedenen Systemen in unterschiedlichen Fonts gerendert werden und unterschiedliche Laufweite haben. Was bei dir gerade noch so in eine Zeile passt, ist bei mir schon zweizeilig.

😷 LLAP

[JürgenB]

Hallo Gunnar,

• Nutzer können in ihrem Browser eine Mindestschriftgröße einstellen, was die Höhe des fixen Bereichs vergrößern kann – ohne dass sich dadurch die Umrechnung von em in px ändern würde.

OK, em bzw. rem ist also nicht gleich em bzw. rem, und ich vermute mal, dass das nicht, wie bei Rolfs Beispiel, nur +- ein Pixel ist.

• Text kann auf verschiedenen Systemen in unterschiedlichen Fonts gerendert werden und unterschiedliche Laufweite haben. Was bei dir gerade noch so in eine Zeile passt, ist bei mir schon zweizeilig.

die Breite ist bei mir (also bei meiner Seite) nicht das Problem.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

• Nutzer können in ihrem Browser eine Mindestschriftgröße einstellen, was die Höhe des fixen Bereichs vergrößern kann – ohne dass sich dadurch die Umrechnung von em in px ändern würde.

OK, em bzw. rem ist also nicht gleich em bzw. rem, und ich vermute mal, dass das nicht, wie bei Rolfs Beispiel, nur +- ein Pixel ist.

Da vermutest du richtig.

Testseite mit eingestellter Mindestschriftgröße von 32px:

😷 LLAP

[Der Martin]

Hallo Gunnar,

Testseite mit eingestellter Mindestschriftgröße von 32px:

das liegt wohl daran, dass eine im Browser eingestellte Mindestschriftgröße nicht auf andere CSS-Bererchnungen zurückwirkt, so dass man nicht darauf reagieren kann (außer, wie schon vorgeschlagen, mit Javascript, nachdem CSS mit allen Berechnungen durch ist).
Schade eigentlich. Hmm, oder ist das vielleicht auch gut so? 🤔

Live long and pros healthy,
 Martin

[JürgenB]

Hallo Gunnar,

auch wenn ich mit deiner Testseite nichts anfangen konnte, Mac-FF und Safari scrollen bis unter die Überschrift, konnte ich das Problem an anderer Stelle nachvollziehen. Ich bin erst mal schockiert. Da achtet man darauf, alle Größen, die irgendetwas mit Schriftgröße zu tun haben, in em/rem anzugeben, und dann bieten die Browser die Möglichkeit, das zu umgehen. Ich kann nur hoffen, das kein User diese Einstellung findet, das Web sieht dann irgendwie komisch aus.

Gruß
Jürgen