37.49.33.84: Die Seite wurde neu angelegt: „Bei Anchor Sprüngen lassen die Browser oft oben keinen Platz mehr. Das sieht oft sehr hässlich aus oder die Überschriften werden nicht mehr angezeigt. Unbrauch…“

2015-02-18T08:34:38Z

Die Seite wurde neu angelegt: „Bei Anchor Sprüngen lassen die Browser oft oben keinen Platz mehr. Das sieht oft sehr hässlich aus oder die Überschriften werden nicht mehr angezeigt. Unbrauch…“

Neue Seite

Bei Anchor Sprüngen lassen die Browser oft oben keinen Platz mehr. Das sieht oft sehr hässlich aus oder die Überschriften werden nicht mehr angezeigt. Unbrauchbar wenn ein statisches Element (z.B. statische Navigation) oben steht, die dann einen Teil des Inhalts verdeckt.

Besser man läßt etwas Raum zum Anchor. Das geht mit Javascript oder mit CSS:

http://css-tricks.com/hash-tag-links-padding/ (2015-02)

In der CSS Variante nutzt man ein Pseudoelement (:before) um davor Raum zu geben und diesen dann mit negativem Margin wieder zu neutralisieren. Im Ergebnis läßt der Browser beim anspringen des Anchors dann den vorher definierten Raum übrig.

HTML
<pre>
<a href="#goto">Jump</a>



<h2 id="goto">Header</h2>
</pre>

CSS
<pre>
h2:before {
display: block;
content: " ";
margin-top: -285px;
height: 285px;
visibility: hidden;
}
</pre>

CSS - Mehr Raum bei Anchor-Sprüngen - Versionsgeschichte

37.49.33.84: Die Seite wurde neu angelegt: „Bei Anchor Sprüngen lassen die Browser oft oben keinen Platz mehr. Das sieht oft sehr hässlich aus oder die Überschriften werden nicht mehr angezeigt. Unbrauch…“