Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 13.05.2007, 19:01
Chico_wau Chico_wau ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.05.2007
Beiträge: 18
Chico_wau befindet sich auf einem aufstrebenden Ast
Frage Fixer Header (CSS Frame) und Sprung zu Anker auf dieser Seite

Hi,

ich habe eine Seite gebaut, bei der der Header mit CSS fixiert ist. Hier ist der entsprechende CSS Code:

#nav_fix { position: absolute; top: 0px; left: 5px; z-index:10; width: 101%; }
html>body #nav_fix { position: fixed; } /* nur fuer moderne Browser! */

Auf dieser Seite will ich zu einem Anker springen. Das funktioniert im Prinzip auch, nur liegt der Ankerpunkt, zu dem der Browser (IE 7 und auch FF 2) springt, unterhalb des fixen Headers. Der User sieht also nicht, wo genau der Browser hinspringt. Natürlich könnte er scrollen, aber das ist nicht Ziel der Übung. Die Seite ist übrigens so formatiert, dass der Inhalt auf der Seite erst nach der Header-height (65px) beginnt.

(body { background: #99a; padding: 67px 5px 5px; })

Wie kann ich die Browser dazu bringen, dass sie den Ankerpunkt, zu dem sie springen, direkt unter den fixen Header platzieren?
Ein Beispiel findet Ihr unter

Namensliste

Wenn Ihr dort auf einen Nachnamen clickt (bitte nur Nachnamen von A-G wählen), sollte die Tabelle auf der nächsten Seite direkt unter der Navigationsleiste mit der ersten Person beginnen, die diesen Nachnamen hat und nicht mit der 4. Person, wie es jetzt der Fall ist (entspricht der Höhe des headers).
PS: Kümmert Euch nicht um das Layout der anderen Seiten, die sind noch im Test. Ich will das Problem zuerst einmal mit der Seite namen_A-G.html lösen.

Folgendes habe ich schon einmal probiert - padding der Anker Zieladresse um die Höhe des Headers:

im CSS:

.a_p { padding-top:67px; } /* 67px=Höhe des Headers */

im HTML:

<a class="a_p" id="ankername"></a>

Das habe ich getestet mit folgendem Ergebnis:
FF 2.0 springt jetzt richtig.
IE 7.0 kümmert das gar nicht - springt immer noch unter den fixen Header.
Das ist auch genau die Situation, die ihr momentan bei Namensliste sehen könnt.

Die Seite ist codiert nach XHTML 1.0 und in XHTML ist das Universalattribut "id" vorgeschrieben. Ich hab dann auch einmal die Empfehlung aus Selfhtml aufgegriffen und beide Bezeichner verwendet ("id" und "name" jeweils mit identischem Wert), das kümmert den IE 7.0 auch nicht.
Auch die nächste Variante

<a class="a_p" id="ankername"></a> (leerer Anker) oder
<a class="a_p" id="ankername">Sprungziel</a> (Anker mit definiertem Sprungziel)

ist für den IE 7.0 ohne Bedeutung. Es ist ja übrigens auch nicht so, dass der IE 7.0 den Anker gar nicht erkennt. Den erkennt er schon und führt ihn auch aus - aber wie gesagt, er setzt ihn immer unter den fixen Header. Es sieht so aus, als ob IE 7.0 den class Selektor bei Ankern nicht interpretiert.

Tja - hat irgendjemand eine Idee?
Mit Zitat antworten
Sponsored Links