Wer einen Stickey-Header, also eine Navigationsliste, die am oberen Bildschirmrand fixiert ist, nutzt, wird bei der gleichzeitigen Verwendung von Sprungpunkten merken, dass die vom Sprunglink angepeilte Kante hinter der fixierten Navigation liegt.
Das Problem lässt sich mittels CSS umgehen:
- Dem Link eine Klasse zuweisen, z.B. .top
- .top bekommt dann folgende CSS-Eigenschaften zugewiesen:{display: block; position: relative; top: <hier Höhe des Headers einfügen> px; visibility: hidden;}
Und schon ist der Sprungpunkt entsprechend positioniert und landet sauber im sichtbaren Bereich der Webseite.
Hi Jonathan,
genau an dem Problem scjeiter ich gerade, deine Erklärung klingt nach der prefekten Lösung. Aber was ich nicht hinkriege: Wie kann ich einem Link denn eine Klasse zuweisen?
Viele Grüße Volker
ich habe es jetzt mit;
:target:before {
content: „“;
display: block;
height: 80px; /* same as your fixed header height */
margin: -80px 0 0; /* negative fixed header height */
}
gut hinbekommen
und damit das responsiv auch funzt:
@media (min-width: 768px)
{:target:before {
content: „“;
display: block;
height: 100px; /* same as your fixed header height */
margin: -80px 0 0; /* negative fixed header height */}
}