Frage von Steffile, 37

Kann man das Ziel eines HTML Anchors um X Pixel nach unten verschieben?

Ich habe ein fixierte halb transparente Headerleiste. Wenn ich auf den Anchor Link klicke, erscheint der entsprechenden Textpunkt ganz oben im Browserfenster, wird aber von der Headerleiste verdeckt.

Da die Headerleiste halb transparent ist, kann ich den Inhalt nicht einfach nach unten verschieben, der muss ganz oben im Browserfenster beginnen. Ich kann auch den Textpunkten nicht soviel top padding geben, dass sie unter der Headerleiste erscheinen wuerden.

Hat jemand kreative Ideen?

Antwort
von Sarkophator, 28

Du könntest das Anchor-Element mittels position relative um die Höhe des Headers nach oben verschieben, wenn ich dich richtig verstanden habe:

a.anchor {
position: relative;
top: -80px;
}

---

<h1>
<a class="anchor" id="testanchor"></a>
Testanchor
</h1>

Demo: https://jsfiddle.net/8z06d8r1/

Kommentar von TeeTier ,

Das ist zwar eine Lösung, aber mit Sicherheit eine sehr sehr unschöne. Semantisch gesehen absolut vermeidbar.

Kommentar von Steffile ,

Hast du eine bessere Idee?

Kommentar von fluffiknuffi ,

TeeTier meinst du das a-Element statt einer ID? Oder wie oder was. :o

Kommentar von Steffile ,

Danke fuer deine Muehe, aber das funktioniert nicht - auch bei dir verschwindet der < h1 > Text, wenn ich auf den Anchor klicke, hinter dem Header - ich brauche ihn unter dem Header  :-(

Keine passende Antwort gefunden?

Fragen Sie die Community