Meine Beiträge

JoomlaSoftwareNetzwerkWebsolution

Position des Ankerlinks verändern

Stickey-Header sind Navigationsleisten, die beim scrollen der Seite immer oben fixiert sind. Die sehen nicht nur schick aus, sondern bringen für den Benutzer besondere Vorteile. Wenn da nicht doch noch was im Wege steht.

Es kommt nicht selten vor, dass die sogenannten Ankerpunkte bzw. Sprungmarken auf der Seite verteilt sind. Diese verwendet man um intern auf der Seite zu navigieren. Klickt man auf einen solchen Link, wird man schnell bemerken, dass der Ankerpunkt hinter den Stickey-Header verschwindet und einen Teil der Information nicht mehr lesbar ist.

Damit der Text wieder im sichtbaren Bereich erscheint, kann man dies mit einem CSS-Code sehr gut lösen.

 

Mit einer Klasse: Diese Lösung ist eher nicht für die Webseitenbetreiber empfehlenswert, wenn bereits viele Artikel vorhanden sind, da man viele Seiten nach den Ankern durchforsten muss.

.klassenname {
display: block;
position: relative;
top: ??px; /* Wert der Verschiebung */
visibility: hidden;
}

Ohne Klasse: Bei diesem Lösungsweg müssen keine Klassen extra vergeben werden.

:target::before {
content: "";
display: blog;
height: ??px; /* Wert der Verschiebung */
}

Nach der richtigen Angabe des Wertes, wird der Ankerpunkt bzw. die Sprungmarke nicht mehr verdeckt, sondern unterhalb des Sticky-Headers angezeigt.

Wie alles begann

Bereits im Jahre 2004 wurden die ersten Schritte von der "Web Hypertext Application Technology Working Group" unter dem Namen "Web Applications 1" eingeleitet. Später wurde dieses Projekt dann in Html5 umbenannt.

Neue Welten entdecken

Wer von HTML5 spricht, ist auch von CSS3 nicht weit entfernt. - Mit neuen Gewand treiben die zwei Geschwister mittlerweile die Webentwicklung enorm voran, und das mit gutem Grund.

Wir benutzen Cookies

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.