zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Fixer Header (CSS Frame) und Sprung zu Anker auf dieser Seite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.05.2007, 18:01
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
  #2 (permalink)  
Alt 14.05.2007, 15:11
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

Es geht nicht. Das ist eines der vielen Nachteile von position: fixed.

Nebenbei:
- a_p ist ein schlechter Klassenname.
- Du brauchst kein A-Element als Sprungziel. Du kannst die ID auf jedem beliebigen bereits vorhandenem Element benutzen, in deinem Fall z.B. die Tellenzeile oder -zelle.

Robin
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.05.2007, 18:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.05.2007
Beiträge: 18
Chico_wau befindet sich auf einem aufstrebenden Ast
Böse Fixer Header (CSS Frame) und Sprung zu Anker auf dieser Seite

Hi RoToRa,

zuerst einmal herzlichen Dank für Deine Antwort.

Du schreibst: Es geht nicht.
Das ist natürlich sehr schade.

Kennst Du zufällig irgendeinen Workaround, sodass ich die Funktionalität simulieren kann?
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Anpassen eines CSS Templates - JPEG als Hintergrundbild setzen soulknot CSS 1 08.05.2011 17:31
jquery // css ändern vor header weiterleitung bzw. nach erzeugtem pdf monran Javascript & Ajax 2 02.03.2011 21:25
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 12:25
header verrutscht... weblearner CSS 6 03.12.2008 19:34
3 spaltiges CSS Layout mit fixer Breite!? atmosfear CSS 1 23.07.2008 10:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:37 Uhr.