danke für deine ausführliche Beschreibung zum Anlegen eines Inhaltsverzeichnisses. Ich versuche jetzt noch den Code für Google möglichst passend anzulegen. Gibt es eine bessere Auszeichnung als einen normalen A-Tag?

Hallo Dominic,
ich vermute mal Du hast versucht dienen HTML-Code hier in die Kommentare reinzuschreiben – was aber nicht funktioniert weil sowas bei uns rausgefiltert wird. Insofern kann ich an deinem Beispiel leider auch nicht erkennen was genau da nicht funktioniert – bisher hat es bei den meisten jedenfalls geklappt (und funktioniert auch bei uns immer noch).
Vielleicht probierst Du ja auch mal die Methode von Tim aus (siehe https://blickgewinkelt.de/inhaltsverzeichnis-in-html-erstellen/#comment-76742 )
Ich habe es selber nicht getestet, aber ich denke das könnte vielleicht eine einfachere Lösung für das Problem sein.

Beste Grüße,

/hauke

Habe es mit einem InhaltsVZ so angefangen:

Inhaltsverzeichnis
<a href=“#prolog“ rel=“nofollow ugc“>1 Prolog: Das Epos und die Fantasy (Seite3)&lt/a>
Sind vor dem de facto noch mehr Unterpunkte natürlich

Zum Springen nach:

1 Prolog: Das Epos und die Fantasy (Seite3)
usw.
Doch da springt nichts. Also nicht nur nicht sauber, sondern gar nicht. Auf der WordPress-Seite sieht das InhaltsVZ soweit link-gut aus, nur dass es nirgendwo hin sprungfedert.
Wenn ich den Quellcode der Seite angucke, sieht es jedoch auch anders aus. Aus
1 Prolog: Das Epos und die Fantasy (Seite3)
ist geworden
1 Prolog: Das Epos und die Fantasy (Seite3)

Das Entscheidende
=id“prolog“
ist entschwunden.

Will WordPress das nicht? Kann WordPress das manchmal nicht?
Odr ist das CSS-Magie?;-)
Gandalf?!?

Danke für Orientierung,
Gruß
Dominic

Hi Tim,

das werde ich bei Gelegenheit dann mal ausprobieren – danke für den Tip!

Beste Grüße,

/hauke

sehr schöner Artikel :)

Es gibt allerdings noch eine einfachere Möglichkeit das Verdecken des Sprungziels zu verhindern. Im Grunde der gleiche Ansatz, aber man spart sich das nervige bei den Sprungzielen. Kann man auch in WordPress in den manuellen CSS-Code eingeben.

Im CSS folgenden Code eingeben:

h1:target::before,
h2:target::before,
h3:target::before,
h4:target::before,
h5:target::before {
content: „“;
display: block;
height: 3em;
margin: -3em 0 0;
}

Und schon langt es, wenn die Überschrift ein Sprungziel ist. :) (Die Größe, hier 3em, richtet sich natürlich nach der Höhe der Navigation ;) )

Wer responsive programmiert und wie ich in der Ansicht für kleine Geräte keine sticky navi hat gibt das nach dem @media für große Bildschirme ein und schon klappt es in beiden Ansichten. :)

LG Christoph

Gerne!
(Übrigens… ich habe gerade vor ein paar Tagen selber mal wieder meinen eigenen Beitrag gelesen weil ich zwischenzeitlich vergessen hatte wie’s geht ;-)

/hauke

ja das Problem kenne ich auch – nutzte bis vor kurzem das Plugin TOC und leider stößt dies immer wieder auch beim Scrollen an seine Grenzen. Das es flüssig läuft ist gerade bei Mobilgeräten wichtig…. Schön ist, das es solche hilfreichen Blog´s wie euern gibt. Das macht es dem Nicht-Programmierer doch um einiges leichter – Fehler auszumerzen. Backup´s sind immer wichtig – hatte mir vor kurzem beim Umstellen auf https gleich mal die WebSite zerschossen und ohne Backup wäre die schöne Arbeit umsonst gewesen. Danke an die Blogbetreiber

sagt Armin

:) Das stimmt. Wobei mir ein Rätsel ist was die Browserhersteller da treiben (und warum die das Problem nicht mal endlich lösen).

Danke für den Dank,
/hauke