Layout-Problem mit sticky Kapitelüberschrift

[Linuchs]

Moin,

zu Beginn der HTML-Seite gibt es ein Link-Verzeichnis zu den Kapitel-Überschriften, die als sticky definiert sind.

Das führt dazu, dass die Überschriften wie gewünscht oben auf der Fläche positioniert werden, aber der Text steht hinter der Überschrift und wird abgedeckt.

So sieht es aus:

So soll es aussehen:

Ich müsste dem ersten Absatz nach der Überschrift wohl einen margin-top geben oder einen <div> einfügen, um ihn unterhalb der Überschrift zu platzieren. Im normalen Textfluss (z.B. beim Druck) soll dieser Abstand NICHT erscheinen.

Aber wie?

Gruß, Linuchs

[Rolf B]

Hallo Linuchs,

aber der Text steht hinter der Überschrift und wird abgedeckt.

Das sollte aber nur dann passieren, wenn Du scrollst. Ungescrollt müsste alles passen.

Wenn nicht: bitte Inlone-Beispohl. Äh. Verraxt. Online-Beispiel!

Rolf

[Linuchs]

Hallo Rolf,

habe die Lösung gefunden. Der erste Absatz nach der Überschrift muss einen oberen Rand bekommen.

<style>
:target + p {
    margin-top: 4em;
}
</style>

Nun kann es sein, dass ein Kapitel mit einem floating div beginnt und anschließemd ein p. Auch das funktioniert:

<style>
h2:target + div, h2:target + div + p, h2:target + p  {
    margin-top: 4em;
}
</style>

Lieben Gruß, Linuchs

[Rolf B]

Hallo Linuchs,

Ich hatte das Problem erst nicht verstanden, sorry.

Teste das doch bitte auch in einem schmalen Fenster, wenn der Text in der Überschrift umbricht.

Rolf

[Der Martin]

Hallo,

Ich hatte das Problem erst nicht verstanden, sorry.

Teste das doch bitte auch in einem schmalen Fenster, wenn der Text in der Überschrift umbricht.

dann dürfte der erste Absatz wieder teilweise von der zweiten Zeile der Überschrift verdeckt sein.

Aber die Kernfrage ist: Wieviel padding gibt man dem ersten Textabsatz? Man kann doch nicht wissen, wieviel Platz die Überschrift einnimmt. Mehrzeiligkeit hatte ich noch gar nicht aufm Schirm, danke. Aber schon die Schriftgröße weiß man nicht. Userspezifische Mindestgrößen für bestimmte Elemente? Schriftarten, die beim Nutzer nicht verfügbar sind?

Meiner Ansicht nach gibt es für das Problem nur Lösungen, die dann nur in bestimmten Ökosystemen "funktionieren".

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

Aber die Kernfrage ist: Wieviel padding gibt man dem ersten Textabsatz? Man kann doch nicht wissen, wieviel Platz die Überschrift einnimmt.

Mit JavaScript kann man’s doch wissen. Und das in eine custom property schreiben, damit man den aktuellen Wert in CSS zur Verfügung hat. Und das initial und bei Größenänderungen des Viewports; dazu ein ResizeObserver eingerichtet wie in dieser Präse gezeigt und in diesem Posting beschrieben.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

Mit JavaScript kann man’s doch wissen

Wo ich Linuchs sanft hinschubsen wollte 😉

Ich frage mich nur, warum die Überschriften unbedingt sticky sein müssen…

Rolf

[Gunnar Bittersmann]

@@Rolf B

Ich frage mich nur, warum die Überschriften unbedingt sticky sein müssen…

Gute Frage.

Vielleicht ist es bei Linuchs’ Zielgruppe ja so, dass, sobald die Leute ein Stück runtergescrollt haben, sie schon wieder vergessen haben, warum sie eigentlich auf der Seite sind. 😆

🖖 Live long and prosper

[Der Martin]

Hallo,

Vielleicht ist es bei Linuchs’ Zielgruppe ja so, dass, sobald die Leute ein Stück runtergescrollt haben, sie schon wieder vergessen haben, warum sie eigentlich auf der Seite sind. 😆

Dieter Nuhr in einem seiner Programme:
Wissenschaftler haben jetzt rausgefunden, dass Stubenfliegen ein Kurzzeitgedächtnis haben, das nur etwa 0.7 Sekunden reicht. Deswegen fliegen die auch mit vollem Tempo gegen eine Fensterscheibe und fragen sich im nächsten Moment: "Boah, ich hab entsetzliche Kopfschmerzen, aber ich weiß nicht wovon."

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Linuchs

<style>
h2:target + div, h2:target + div + p, h2:target + p  {
    margin-top: 4em;
}
</style>

Wenn du HTML in einen Codeblock schreibst (hier ein style-Element), dann musst du auch HTML als Sprache angeben, nicht CSS. Oder die <style>-Tags weglassen, dann isses CSS. Ich hab das mal gefixt.

Das Wiederholen von h2:target kann (sollte) man vermeiden:

h2:target {
  + div, + div + p, + p {
    margin-top: 4em;
  }
}

🖖 Live long and prosper

[Rolf B]

Hallo Linuchs,

zwei weitere Probleme, die hiervon ungelöst sind:

1. Wenn die Überschrift von Kapitel 1 umbricht, die von Kapitel 2 aber nicht, dann ist die Darstellung von exquisiter Scheußlichkeit.
2. Wenn die Besucherin nicht ins Inhaltsverzeichnis klickt, sondern einfach runterscrollt, wird :target nicht aktiv und der margin fehlt.

Aber trotzdem frage ich mich, wo das Problem ist. Wenn ICH eine Testseite baue mit klickbarem Inhaltsverzeichnis und sticky-Überschriften, dann überdeckt die Überschrift nach einem Klick im Inhalt den Text nicht.

Ah, Update: Wenn die ID in der Überschrift ist, dann passiert es nicht. Aber dafür sehe ich nur das Ende des Kapitels 1, wenn ich von Kapitel 2 nach Kapitel 1 zurück wechseln will (ich habe die Nav dafür open angenagelt). Wenn ich die ID in den ersten Paragraphen des Kapitels setze, dann habe ich kein Problem mit überdecktem Text - aber sowas kannst Du nicht gemacht haben, weil deine "Lösung" dann nicht greifen würde.

Hast Du ein Onlinebeispiel, wo man das Problem sieht, das Du lösen willst?

Rolf