erweitertes ankerproblem mit 'position:fixed'
andi
- css
0 Thomas Luethi0 Thomas Luethi0 andi
0 molily
moin allerseits,
habe eine seite mit feststehender kopfzeile gebaut (position: fixed;) und wegen der sprungankerproblematik vertsteckte anchor tags benutzt, die um xx pixel nach oben verschoben liegen, so dass beim anspringen der zielpunkt nicht unter der titelleiste verschwindet.
css:
.ueberschrift-artikel a{
display:none;}
.ueberschrift-artikel>a{
display:block;
width:0;
height:0;
position:relative;
bottom:165px;
visibility:hidden;}
html:
<a name="SPRUNGZIEL"> </a>EIGENTLICHE ÜBERSCHRIFT
das funktioniert auch fast perfekt.... ausser im ie, dort ignoriert er die höhenangabe ab ca 100px. genau gesagt springt er immer so, dass die überschrift angeschnitten wird - also nie ganz sichtbar. dabei ist es egal, ob ich
top:-150px; oder bottom:150px verwende.
hat jemand eine idee, woran das liegen könnte?
vielen dank, andi
Hallo,
.ueberschrift-artikel>a
Diesen Selektor kennen viele Browser (inkl. MS IE bis 6!) nicht.
http://w3development.de/css/hide_css_from_browsers/child/
html:
<a name="SPRUNGZIEL"> </a>EIGENTLICHE ÜBERSCHRIFT
In was fuer einem Block-Level-Element steht das ganze?
<h2><a name="SPRUNGZIEL"> </a>EIGENTLICHE ÜBERSCHRIFT</h2>
oder so?
Die eigentliche Ueberschrift sollte vielleicht
auch noch einmal in einem Block stehen, damit
Du fuer diesen einen margin-top definieren kannst.
h2 span { margin-top:150px; }
<h2><a name="SPRUNGZIEL"> </a><span>EIGENTLICHE ÜBERSCHRIFT</span></h2>
HTH, mfg
Thomas
Hallo,
h2 span { margin-top:150px; }
Sorry, natuerlich muss der Span noch zu einem Block gemacht werden:
h2 span { margin-top:150px; display:block; }
<h2><a name="SPRUNGZIEL"> </a><span>EIGENTLICHE ÜBERSCHRIFT</span></h2>
Gruesse,
Thomas
Hallo,
h2 span { margin-top:150px; }
Sorry, natuerlich muss der Span noch zu einem Block gemacht werden:
h2 span { margin-top:150px; display:block; }
danke dir erstmal. habe das ganze jetzt so:
css:
h2 a{
display:none;}
h2>a {
display:block;
/*height:160px;*/
width:0;
height:0;
position:relative;
/*top:-145px;*/
bottom:200px;
visibility:hidden;}
h2 span{
margin-top:200px;
display:none;} /*absicht, da überschrift sonst 200 hoch*/
und dann wie du schreibst:
<h2><a name="SPRUNGZIEL"> </a><span>EIGENTLICHE ÜBERSCHRIFT</span></h2>
wenn ich jetzt in der letzten zeile diplay:block lasse, dann habe ich einen riesigen grossen kasten, den ich natürlich nicht will. abgesehen davon funktioniert es dann im ie. wenn ich wie oben angegeben den span ausblende ist auch die funktionalität hin. er springt dann genau zur mitte der (nicht zu sehenden) überschrift; sollte die uk von dem kastenn sein.
Gruesse,
Thomas
andi
any hints?
Hallo andi,
habe eine seite mit feststehender kopfzeile gebaut (position: fixed;) und wegen der sprungankerproblematik vertsteckte anchor tags benutzt, die um xx pixel nach oben verschoben liegen, so dass beim anspringen der zielpunkt nicht unter der titelleiste verschwindet.
css:
.ueberschrift-artikel a{
display:none;}
.ueberschrift-artikel>a{
display:block;
width:0;
height:0;
position:relative;
bottom:165px;
visibility:hidden;}
html:
<a name="SPRUNGZIEL"> </a>EIGENTLICHE ÜBERSCHRIFTdas funktioniert auch fast perfekt.... ausser im ie, dort ignoriert er die höhenangabe ab ca 100px.
Welche Höhenangaben, die bei bottom? Der MSIE ignoriert die komplette zweite Regel, er kann auch kein position:fixed, daher ist es nicht nötig, den Anker relativ für ihn zu verschieben. Ich verstehe nicht, wie es da zu Komplikationen kommen kann.
genau gesagt springt er immer so, dass die überschrift angeschnitten wird - also nie ganz sichtbar. dabei ist es egal, ob ich top:-150px; oder bottom:150px verwende.
Der MSIE sollte sich gar nicht für die Regel mit top oder bottom interessieren, er kann keine Kindselektoren. Und Mozilla und Opera sollten kein Problem mit der Methode haben (Opera höchstens mit bottom, aber dann nimmt man eben top mit negativem Wert).
Kannst du bitte den kompletten Quelltext posten bzw. online stellen, wenn möglich auch Screenshots? Ich weiß nicht, was du genau meinst; bist du dir sicher, dass du den MSIE meinst, wenn ja, welche Version? Benutzt du vielleicht einen Hack, um position:fixed für MSIE nachzubilden?
Mathias