Anker in CSS-Boxen?

[Stefan]

Und wieder ein kniffliges Problem...

Ich habe mir mit CSS einen Topheader und einen Contentbereich darunter definiert. Nun möchte ich einen Anker im Contentbereich anspringen. Dabei orientieren sich aber alle Browser an der Gesamtfensterhöhe, d.h. der angesprungene Punkt wird an die Unterkante des Browserfensters gescrollt anstatt an die Unterkante des Headers. Kann ich irgendwie definieren, dass der Sprung in eine bestimmte mit <div>-definierte Box springen soll? Oder meinetwegen an die Position des Ankers +60px?

Wie immer ratlos,
Stefan

[Heizer]

Du kannst einen margin und einen entgegengesetzten padding setzen:

margin-top:-60px;
padding-top:60px;

In Firefox hat das mal geklappt, ich weiß nicht mehr, ob ich es im IE getestet habe.

Grüße

Thomas

[Ulrich]

Moin,

Das Problem hatte ich ähnlich und wie folgt gelöst:

Als Anker gebe ich ein div ein, wie folgt:

  
<div class="sprungmarke" id="anker"></div>  

das CSS dazu:

  
div.sprungmarke {            /*Sprungmarke im Text-content*/  
  position:absolute;  
  margin-top:-155px;         /* Hoehe Header plus 5px */  
}  

Das funktioniert bei mir in FF, Opera, Mozilla und IE- jeweils aktuelle Versionen. Ältere Versionen habe ich bisher nicht getestet.

mfG
Ulrich

[Stefan]

Moin,

Danke für die Antwort... aber das krieg ich so nicht ans laufen :( Jedenfalls nicht bei allen Browsern gleich...

Habe mir auch schon http://molily.de/css-position-fixed angeschaut, da hat sich einer sehr intensiv mit diesem Problem befasst...

Meine derzeitige Lösung sieht so aus, dass ich vor der Textpassage, an die der Anker soll (immer ein neuer Absatz mit Überschrift) soviele Leerzeilen einfüge wie der Header hoch ist (er ist nur schmal, von daher geht es so gerade). Dann beginne ich die Hauptbox oben entsprechend tiefer so dass oben kein Rand entsteht, und schon klappen die herkömmlichen Anker. Zur Not bleibe ich bei dieser Lösung, auch wenn die Texte jetzt etwa 4 Leerzeilen zwischen den Artikeln haben :/

Stefan