[ERLEDIGT] Sprungmarken - "Sprung" definieren

[DonInvictus]

Hallo, bin neu hier und auch eher ein Neuling im HTML Bereich. :)

Ich habe eine Frage an euch:
Wie man Sprungmarken über <a href> und <id oder name> definiert weiß ich und stellt für mich auch kein Problem dar.

Mein Problem ist aber: Auf meiner Webseite habe ich die Navigation so eingestellt, das sie beim runter scrollen mit kommt, sprich sie ist immer oben zu sehen.
Wenn ich nun ein Sprungziel definiere, soll dieses (z.B. eine Überschrift) logischerweise ganz oben auf der Seite angezeigt werden. Genau das möchte ich aber nicht, da dort meine Navigation im Weg ist und der Sprung somit total verwirrend für den Leser wird, da er nicht den gewünschten Sprung sofort zu Gesicht bekommt (Sprich die Überschrift ist, durch die Navigation nicht sichtbar, er landet also mitten im Text)

Das stört mich gewaltig. Gibt es da Möglichkeiten wie ich die Sprunghöhe o.ä. definieren kann?
Oder kann ich ein Wort weit über der eigentlichen Überschrift so definieren, das er halt dahin springt, der Leser dann die gewünschte Sprungüberschrift direkt zu Gesicht bekommt, mit dem Wort aber optisch nichts passiert.

Ich hoffe ihr versteht was ich meine

Vielen Dank!!

 

[SpiceLab]

Gibt es da Möglichkeiten wie ich die Sprunghöhe o.ä. definieren kann?

.scrollTop() und .offset().top sind Dir dabei behilflich - siehe dazu dieses Praxisbeispiel Scrolling to an anchor given fixed position navbar.

Anmerkung: Die Links können entgegen dem Demo selbstverständlich in das fixierte Element verschoben werden: https://jsfiddle.net/spicelab/bebfrdmr/

 

[DonInvictus]

Ohje ehm also so "tief" komm ich nicht in die CSS rein. Ich arbeite mit einem Theme. Das heißt ich kann im Textfeld halt auf Visusell und auch Text umstellen. Ich arbeite demnach gar nicht wirklich mit CSS.

Gibt es einen HTML Code der ein Wort optisch gar nicht verändert?
Ich würde eine ID am liebsten so bennenen: <strong id="xy">...</strong>

Aber das funktioniert leider nicht. <div> verändert die Optik <a> verändert die Optik und <p> verändert auch die Optik. Gibt es noch weitere Möglichkeiten eine id unscheinbar zu definieren?

Vielen Dank!

 

[MrMurphy]

Hallo

Ohne Zugriff auf dass CSS sehe ich keine Lösungsmöglichkeit für dein Problem.

Ohne Link zu der Seite können wir auch nur im luftleeren Raum herumstochern. Das hilft weder dir noch befriedigt es uns. Es ist frustrierend gerne helfen zu wollen, Lösungen anbietet und dann erfährt, dass die aufgrund fehlender Informationen nicht passen.

Gruss

MrMurphy

 

[DonInvictus]

mein-badezimmer24.de

Das ist meine Seite.
Ich möchte einfach nur wissen ob es einen Code gibt der ein Wort optisch nicht verändert, sodass ich dieses als ID definieren kann, damit der Sprung perfekt auf die gewollte Überschrift passiert.

 

[MrMurphy]

Hallo

ob es einen Code gibt der ein Wort optisch nicht verändert

Dafür ist das span-Element gedacht. Also zum Beispiel

<span id="idname">Wort<span>

Dann gibt es noch das div-Element, dass aber nicht dafür gedacht ist, direkt Inhalt aufzunehmen, sondern andere Container. Zwar unüblich, geht aber, ist zum Beispiel

<div><span id="idname">Wort</span></div>

um ein Block-Element zu erhalten welches alleine in einer Zeile steht.

Gruss

MrMurphy

 

[scbawik]

mein-badezimmer24.de

Das ist meine Seite.
Ich möchte einfach nur wissen ob es einen Code gibt der ein Wort optisch nicht verändert, sodass ich dieses als ID definieren kann, damit der Sprung perfekt auf die gewollte Überschrift passiert.

Ich denke du suchst das <span> Element...

 

[SpiceLab]

Ich möchte einfach nur wissen ob es einen Code gibt der ein Wort optisch nicht verändert, sodass ich dieses als ID definieren kann, damit der Sprung perfekt auf die gewollte Überschrift passiert.

Selbst wenn Du die Sprungmarken innerhalb der Container an einer Stelle unterbringst, die augenscheinlich die Höhe der Navigation überragt, so werden sie dennoch zum oberen Fensterrand bugsiert, und verschwinden hinter dem fixiert-positionierten Element.

https://jsfiddle.net/spicelab/mgkzut6f/ - Sprungmarken in den Containern eingebettet, ohne jQuery-Lösung für die Scrollposition unterhalb der fixierten Navigation

 

[DonInvictus]

Ahhh ja wunderbar!!

Vielen Dank! :)

 

[SpiceLab]

#target-1, #target-2, #target-3, ... da war doch was

Zu was ein gediegenes Abendessen doch gut sein kann

https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/target

#target-1:target,
#target-2:target,
#target-3:target,
#target-4:target,
#target-5:target {
  padding-top:50px;
}

Und als Zugabe zur Visualisierung des angesprungenen Ankers:

#target-1:target p:first-child,
#target-2:target p:first-child,
#target-3:target p:first-child,
#target-4:target p:first-child,
#target-5:target p:first-child {
  font-weight:bold;
}

https://jsfiddle.net/spicelab/7pa4fogj/

Ohje ehm also so "tief" komm ich nicht in die CSS rein. Ich arbeite mit einem Theme. Das heißt ich kann im Textfeld halt auf Visusell und auch Text umstellen. Ich arbeite demnach gar nicht wirklich mit CSS.

Wenn Du nicht imstande bist, im WP-Backend das CSS anzufassen, um die Codeschnipsel einzufügen, gehen zumindest mir die Ideen aus, die Anker unterhalb der fixierten Menüleiste zu platzieren.

 

[DonInvictus]

Mit <span> hat sich das Thema schon erledigt, genau sowas hatte ich gesucht

Aber danke trotzdem :)

 

[SpiceLab]

Mit <span> hat sich das Thema schon erledigt, genau sowas hatte ich gesucht

Um ein Wort optisch nicht zu ändern, ja.

Aber nicht, um damit die Position der Sprungmarke zu korrigieren, und einen Abstand zum Fensterrand einzurichten.

Aber gut, wer nicht will, der hat schon

 

[DonInvictus]

Es soll einfach nur optisch passen, das reicht mir