Sprungmarken und Anker werden gerne auf Onepagern oder umfangreichen Inhaltsseiten als Navigation eingesetzt. Klickt man auf die Sprungmarke (den Link) scrollt der Browser automatisch zum definierten Anker. Ganz häufig sitzt der Anker aber zu tief, sodass wichtige Inhalte darüber nicht sichtbar sind oder verdeckt werden (z. B. von einem statischen Header).
Mit einem einfachen Trick kann man die Position, an die die Sprungmarke springen soll, mit CSS und HTML verschieben.
Das Bild zeigt, dass der Anker-Link eigentlich zur Überschrift springen soll. Durch unseren CSS-Trick verschiebt sich das tatsächliche Sprungziel aber um die gewünschte Pixel-Zahl nach oben:
CSS Code:
.sprung {visibility: hidden; height: 0px !important; position: absolute; margin: -100px;}
Durch diese Angabe wird das eigentliche Sprungziel um 100px nach oben verschoben.
HTML Code:
<a href="#sprungmarke#">Das ist meine Sprungmarke (Link)</a>
<div id="sprungmarke" class="sprung"></div> <h1>Das ist meine Überschrift</h1>
Anstatt der Überschrift <h1> die id=”sprungmarke” zu geben, setzen wir ein kleines <div> davor. Dieses <div> bekommt die ID “sprungmarke” und die CSS-Klasse “sprung”.
Wenn Ihr technische Unterstützung bei eurer WordPress-Website braucht, helfen wir euch sehr gerne: Kontakt
Das könnte dich interessieren
WordPress installieren – Anleitung: manuell / Hoster
Das Wichtigste in Kürze Das beliebte Content-Management-System WordPress zu installieren, ist kein Hexenwerk. Willst Du WordPress verwenden, kannst Du es entweder manuell oder über Deinen
Benutzerdefinierte Produktsortierung in Woocommerce
Woocommerce bringt von Haus aus bestimmte Produktsortierungen mit, z. B. nach Name, nach Datum, Preis etc. Doch auch eine benutzerdefinierte Sortierung der Produkte ist ohne
Fehler: “Probably office 365 doesn’t like shared mailbox in Reply-To field” bei Verwendung Post SMTP mit Office 365
Damit WordPress-E-Mails zuverlässig über Office 365 verschickt werden können, kann man zum Beispiel das Plugin “Post SMTP” mit der “Office 365 for Post SMTP Extension”
WordPress Editor verändert oder löscht HTML Code
Wer mit umfangreichen Layouts oder Scripten im WordPress Text-Editor arbeitet, stellt gelegentlich fest, dass WordPress den HTML Code geringfügig verändert, wenn man kurzzeitig auf den
Gutscheinfeld verbergen bei kostenlosen Produkten in WooCommerce
Wer kostenlose Produkte über Woocommerce anbietet, kann den Buchungsprozess mit vielen Möglichkeiten, wie z. B. durch das Verstecken des Gutscheinfeldes vereinfachen. Jedes nicht zwingend benötigte
Gelegentlich Whitescreen im WordPress-Backend?
Der Whitescreen – Ein ungeliebtes Phänomen, weil er erstmal keinerlei Informationen über die Fehlerursache liefert. Hier behandeln wir den Fall, dass der Whitescreen nur gelegentlich
