#-Anker: Bezugspunkt anpassen

[bleibert]

Hallo zusammen!

Folgende Seite:
http://minolta.eazypix.de/lenses/index3.html

Früher hatte ich die Seite mit Frames aufgebaut, so daß die Spaltenköpfe im oberen Frame waren, und die Tabelle im unteren. Ganz oben war eine Quicklinks-Leiste, wie hier in Grau, mit der ich per <a href="#50"> zu Stelle <a name="50"> in der Tabelle springen konnte. Da ja die Tabelle in einem eigenen Frame untergebracht war, war dann die entsprechende Stelle im Frame ganz oben, im Endeffekt also direkt unter den Spaltenköpfen - so, wie es sein soll.

Jetzt habe ich auf ein CSS basiertes Design gewechselt, und habe den Spaltenköpfen die Eigenschaft "Position: fixed" zugewiesen, und mit "z-index" dafür gesorgt, dass die Tabelle dahinter scrollt. Soweit klappt alles wunderbar, nur die Anker passen jetzt nicht mehr, sondern verschwinden jetzt logischerweise hinter dem fixed-Bereich. Wenn ich auf das graue Feld "7.5mm" klicke, dann soll die erste Tabellenzeile direkt unter den Spaltenköpfen erscheinen, so, wie wenn ich die Seite neu lade. Leider ist nun die erste Tabellenzeile ganz oben im Browserfenster, also hinter meinem Spaltenkopf, und somit nicht sichtbar. Ich müsste also irgendwie den "Startpunkt" für die Darstellung von "#75" anpassen. Ist das möglich?  Muss ich das irgendwie anders lösen?

Viele Grüße,
Dennis.

[Matthias Apsel]

Om nah hoo pez nyeetz, bleibert!

Genau dieses Problem gibt es in diesem Forum auch. Verpasse den Elementen, die als Anker dienen ein entsprechendes padding-top, was du mit einem negativen margin-top kompensierst.

Matthias

[Gunther]

Om nah hoo pez nyeetz, Matthias!

Verpasse den Elementen, die als Anker dienen ein entsprechendes padding-top, was du mit einem negativen margin-top kompensierst.

Hast du dir die Seite überhaupt mal angeguckt ...? ;-)

Zuerst sollte er mal die "Layout-Tabelle(n)" entfernen. Und wenn er dann die Überschriften Tabelle und die mit den Daten separiert, besteht das aktuelle Problem überhaupt nicht mehr - ergo muss man auch nicht "rumfrickeln". :-P

Gruß Gunther

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunther!

Hast du dir die Seite überhaupt mal angeguckt ...? ;-)

Nö, ich fand die Beschreibung ausreichend.

Matthias

[bleibert]

Hallo Gunther!

Zuerst sollte er mal die "Layout-Tabelle(n)" entfernen.

Was meinst Du mit "Layout-Tabelle"? Die allesumfassende dreispaltige Tabelle, mit der ich alles auf der Seite mittig zentriere? Was wäre die Alternative?

Und wenn er dann die Überschriften Tabelle und die mit den Daten separiert, ...

Was heißt das auf deutsch? Es sind zwei separate Tabellen. Wie soll ich die separieren?

... besteht das aktuelle Problem überhaupt nicht mehr - ergo muss man auch nicht "rumfrickeln". :-P

Das bezweifele ich stark.

Ich bin ja für alle Tipps offen, allerdings wäre ich dankbar für halbwegs aussagekräftige Erklärungen...

Viele Grüße,
Dennis.

[Gunther]

Hallo Dennis!

Zuerst sollte er mal die "Layout-Tabelle(n)" entfernen.

Was meinst Du mit "Layout-Tabelle"? Die allesumfassende dreispaltige Tabelle, mit der ich alles auf der Seite mittig zentriere?

Ja, genau die meine ich. ;-)

Was wäre die Alternative?

Das kommt, wie so oft, darauf an ...! ;-)
Eine Variante wäre bspw. das Body Element auf eine bestimmte/ feste Breite zu setzen und per margins (left + right: auto) zu zentrieren.

Und wenn er dann die Überschriften Tabelle und die mit den Daten separiert, ...

Was heißt das auf deutsch? Es sind zwei separate Tabellen. Wie soll ich die separieren?

Dein "Problem" ensteht doch u.a. deswegen, weil du die 2 verschiedenen Tabellen aktuell in eine Tabellenzelle gesteckt hast, und dabei eine der Tabellen fixieren willst.

Bei der "Liste" mit den Links zu den einzelnen Ankern, wäre bspw. ein UL Element mit entsprechenden LIs semantisch korrekter, als eine Tabelle - aber das ist wieder ein anderer Punkt.

... besteht das aktuelle Problem überhaupt nicht mehr - ergo muss man auch nicht "rumfrickeln". :-P

Das bezweifele ich stark.

Ich bin ja für alle Tipps offen, allerdings wäre ich dankbar für halbwegs aussagekräftige Erklärungen...

Dann teste mal folgendes:

  
<body>  
  <ul>  
    <li>...</li>  
  </ul>  
  <table>[Tabelle mit den Spaltenüberschriften]</table>  
  <table>[Tabelle mit den Daten]</table>  
</body>  

Per CSS positionierst du jetzt das UL Element und die erste Tabelle "fixed"_und_ gibst beiden Elementen jeweils eine feste Höhe (relative Einheiten, wie bspw. 'em' verwenden).

Der zweiten Tabelle weist du jetzt die Summe der beiden Höhen als 'margin-top' zu - fertig!

Gruß Gunther

[bleibert]

Eine Variante wäre bspw. das Body Element auf eine bestimmte/ feste Breite zu setzen und per margins (left + right: auto) zu zentrieren.

Aha. Gut, das probiere ich mal aus. Grundsätzlich passt mir das mit der "Formatierungs-Tabelle" auch nicht in den Kram...

Dein "Problem" ensteht doch u.a. deswegen, weil du die 2 verschiedenen Tabellen aktuell in eine Tabellenzelle gesteckt hast, und dabei eine der Tabellen fixieren willst.

Bei der "Liste" mit den Links zu den einzelnen Ankern, wäre bspw. ein UL Element mit entsprechenden LIs semantisch korrekter, als eine Tabelle - aber das ist wieder ein anderer Punkt.

Okay, das mag wahr sein. Dann muss ich die Liste so formatieren, dass die Unterpunkte nebeneinander stehen. Muss mal probieren.

Dann teste mal folgendes:

<body>
  <ul>
    <li>...</li>
  </ul>
  <table>[Tabelle mit den Spaltenüberschriften]</table>
  <table>[Tabelle mit den Daten]</table>
</body>

>   
> Per CSS positionierst du jetzt das UL Element und die erste Tabelle "fixed"\_und\_ gibst beiden Elementen jeweils eine feste Höhe (relative Einheiten, wie bspw. 'em' verwenden).  
  
Mit den relativen Einheiten habe ich ein Problem. Grundsätzlich würde ich gerne alles in 'em' bemaßen, aber leider akzeptiert ja 'col' das nicht, da kann ich nur 'px' eingeben (oder '%', was aber noch schlechter ist). Daher habe ich für die Schriftgrößen 'pt' gewählt, dann habe ich auch das Problem bei verschachtelten Elementen nicht (wie bei'em'). Da ich ja nun  die Tabellenbreite in 'px' definiere, warum dann nicht auch die Höhen?  
  

> Der zweiten Tabelle weist du jetzt die Summe der beiden Höhen als 'margin-top' zu - fertig!  
  
Grundsätzlich mal Danke für den Tipp, das werde ich auf jeden Fall mal verfolgen.  
  
Viele Grüße,  
Dennis.

[bleibert]

Hallo Gunther!

Eine Variante wäre bspw. das Body Element auf eine bestimmte/ feste Breite zu setzen und per margins (left + right: auto) zu zentrieren.

Umgesetzt:

  
body {  ...  
	width: 1396px;  
	margin: 0px auto;  
}  

Funzt, Danke für den Tipp.

Bei der "Liste" mit den Links zu den einzelnen Ankern, wäre bspw. ein UL Element mit entsprechenden LIs semantisch korrekter, als eine Tabelle - aber das ist wieder ein anderer Punkt.

Auch umgesetzt, Danke.

Per CSS positionierst du jetzt das UL Element und die erste Tabelle "fixed"_und_ gibst beiden Elementen jeweils eine feste Höhe (relative Einheiten, wie bspw. 'em' verwenden).

Der zweiten Tabelle weist du jetzt die Summe der beiden Höhen als 'margin-top' zu - fertig!

Versucht - klappt nicht. War ein mords Gefrickel, das alles auf 'em' zu übertragen, und die Summen passen irgendwie auch nie so richtig, aber hat letztendlich geklappt. Aber leider funktioniert das mit den Ankern nicht. Mein Code:

  
#nav { 	position: fixed;  
	width: 1396px;  
	top: 0em;  
	height: 1.4em;  
	padding: 0em;  
	margin: 0em;  
	background-color: white;  
	list-style-type: none;  
	font: 1.3em Verdana,sans-serif;  
	z-index: 3;  
}  
  
#head { position: fixed;  
	top: 1.8em;  
	height: 5em;  
	border: 0.3em solid black;  
	z-index: 2;  
}  
  
#bod {	margin-top: 6.7em;  
	border-top: 0px;  
	border-bottom: 3px solid black;  
	border-left: 3px solid black;  
	border-right: 3px solid black;  
	z-index: 1;  
}  

Beim Laden der Seite stimmt es, aber wenn ich auf die links klicke, verschwindet wieder alles hinter den "gefixten" Bereichen. Ich habe den "7.5mm" Anker testhalber mit einem 'style="padding-top: 6.7em;' versehen, und dann klappt's wieder (seltsamerweise stimmt der Abstand doch nicht ganz, erst bei 6.8em stimmt es genau ?!).

Viele Grüße,
Dennis.

[bleibert]

...hier noch der link:
http://minolta.eazypix.de/lenses/index4.html

[Gunther]

...hier noch der link:
http://minolta.eazypix.de/lenses/index4.html

Ah, danke!

Ja, war mein Fehler.
Du musst deine Daten-Tabelle noch in ein DIV-Element (mit position: absolute; top: [Summe der Höhen]; bottom: 0;) stecken.

Gruß Gunther

[bleibert]

Ja, war mein Fehler.
Du musst deine Daten-Tabelle noch in ein DIV-Element (mit position: absolute; top: [Summe der Höhen]; bottom: 0;) stecken.

Das ändert leider nichts. Nachwievor verschwinden die Anker hinter dem gefixten Bereich. Der DIV scrollt ja auch nach oben weg. Im Prinzip müsste man den DIV fixieren, und nur seinen Inhalt scrollbar machen. Aber wenn ich den DIV mit 'position: fixed;' positioniere, dann scrollt leider die Tabelle darin nicht mehr...

Viele Grüße,
Dennis.

[Gunther]

Hi Dennis!

Vergiss' mal meine "stümperhaften" Vorschläge - mit 'position:fixed' scheine ich nicht mehr ganz auf der Höhe zu sein. Liegt vermutlich daran, dass ich es aufgrund der ganzen Nebenwirkungen nie wirklich verwende.

Ja, war mein Fehler.
Du musst deine Daten-Tabelle noch in ein DIV-Element (mit position: absolute; top: [Summe der Höhen]; bottom: 0;) stecken.

Das ändert leider nichts. Nachwievor verschwinden die Anker hinter dem gefixten Bereich. Der DIV scrollt ja auch nach oben weg. Im Prinzip müsste man den DIV fixieren, und nur seinen Inhalt scrollbar machen.

Ja.

Aber wenn ich den DIV mit 'position: fixed;' positioniere, dann scrollt leider die Tabelle darin nicht mehr...

Auch nicht, wenn du dem DIV bspw. ein "overflow-y: scroll;" verpasst?

Gruß Gunther

[bleibert]

...Liegt vermutlich daran, dass ich es aufgrund der ganzen Nebenwirkungen nie wirklich verwende.

Gibt's Alternativen, die besser sind? Aufgrund der langen Tabelle möchte ich die Spaltenköpfe auf jeden Fall immer sichtbar haben.

Auch nicht, wenn du dem DIV bspw. ein "overflow-y: scroll;" verpasst?

Ha, geht! 'overflow-y' ist zwar mW kein Standard, aber ein einfacher 'overflow' funktioniert prima (in x-Richtung gibt's ja keinen Overflow bei entsprechender Dimensionierung). Allerdings finde ich 'visible' besser, da dann die scroll-Balken am Brwoserfenster erscheinen, und nicht wie bei 'scroll' im DIV.

Viele Grüße,
Dennis.

[bleibert]

Ha, geht! 'overflow-y' ist zwar mW kein Standard, aber ein einfacher 'overflow' funktioniert prima (in x-Richtung gibt's ja keinen Overflow bei entsprechender Dimensionierung). Allerdings finde ich 'visible' besser, da dann die scroll-Balken am Brwoserfenster erscheinen, und nicht wie bei 'scroll' im DIV.

...Mist. 'visible' funzt gar nicht, irgendwie hat mich mein Browser-Refresh veräppelt...

[Gunther]

Hallo Dennis!

Vorweg:
CSS ohne den "zugehörigen" HTML-Code hilft nicht viel ...! ;-)

Der zweiten Tabelle weist du jetzt die Summe der beiden Höhen als 'margin-top' zu - fertig!

Versucht - klappt nicht. War ein mords Gefrickel, das alles auf 'em' zu übertragen, und die Summen passen irgendwie auch nie so richtig, aber hat letztendlich geklappt. Aber leider funktioniert das mit den Ankern nicht. Mein Code:

#nav { position: fixed;
width: 1396px;
top: 0em;
height: 1.4em;
padding: 0em;
margin: 0em;
background-color: white;
list-style-type: none;
font: 1.3em Verdana,sans-serif;
z-index: 3;
}

#head { position: fixed;
top: 1.8em;
height: 5em;
border: 0.3em solid black;
z-index: 2;
}

#bod { margin-top: 6.7em;
border-top: 0px;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
z-index: 1;
}

> Beim Laden der Seite stimmt es, aber wenn ich auf die links klicke, verschwindet wieder alles hinter den "gefixten" Bereichen. Ich habe den "7.5mm" Anker testhalber mit einem 'style="padding-top: 6.7em;' versehen, und dann klappt's wieder (seltsamerweise stimmt der Abstand doch nicht ganz, erst bei 6.8em stimmt es genau ?!).  
  
Du hast die 'line-height' außer Acht gelassen. Benutze mal ein Entwickler-Tool wie Firebug, um dir die tatsächlichen Abmessungen der Elemente anzugucken.  
Auch das experimentieren mit der Overflow-Eigenschaft (hidden - visible) "verdeutlicht" den Effekt.  
  
BTW: Null ist Null, egal von was! Einheiten hinter einem Nullwert sind überflüssig.  
  
Am komfortablesten wäre es, wenn du die ganze Seite online stellst und hier verlinkst.  
Als Minimum solltest du aber zumindest den relevanten Teil deines Markups posten.  
  
  
Gruß Gunther

[bleibert]

Hallo Matthias!

Verpasse den Elementen, die als Anker dienen ein entsprechendes padding-top, was du mit einem negativen margin-top kompensierst.

Okay, das ist mal ein Tipp, über den ich ein wenig grübeln kann... Danke!

Viele Grüße,
Dennis.

[bleibert]

Verpasse den Elementen, die als Anker dienen ein entsprechendes padding-top, was du mit einem negativen margin-top kompensierst.

Klappt soweit, allerdings geht es auch wunderbar ohne margin-top:

http://minolta.eazypix.de/lenses/index3.html

Mit margin-top sieht es auch nicht anders aus. Wozu ist das gut?

Viele Grüße,
Dennis.

[Matthias Apsel]

Om nah hoo pez nyeetz, bleibert!

Mit margin-top sieht es auch nicht anders aus. Wozu ist das gut?

"Beachten Sie: table ist das einzige Tabellenelement, welches einen über margin steuerbaren Außenabstand besitzt." [wiki]

Matthias

[bleibert]

"Beachten Sie: table ist das einzige Tabellenelement, welches einen über margin steuerbaren Außenabstand besitzt." [wiki]

Ich hab's aber direkt dem a-Element zugewiesen:

<td><a name="75" style="padding-top: 69px;"></a>...</td>

Viele Grüße,
Dennis.

[ChrisB]

Hi,

http://www.google.com/search?q=problem+anker+position+fixed -> http://molily.de/css-position-fixed

MfG ChrisB

[Matthias Apsel]

Om nah hoo pez nyeetz, bleibert!

Erstmal lässt du die sinnlosen <a name...></a> weg.
Dann gibst du dem jeweils ersten Tabellenfeld eine Id. Beachte, dass die mit einem Buchstaben anfangen muss. Dann folgende ungeteste CSS-Idee

td:target, td:target ~ td:not[rowspan] {  
  padding-top: 7em;  
  vertical-align: bottom;  
}  

Informiere dich im Wiki target, not

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

… eine Id. Beachte, dass die mit einem Buchstaben anfangen muss.

Sagt wer?

In HTML5 muss sie das nicht.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

… eine Id. Beachte, dass die mit einem Buchstaben anfangen muss.

Sagt wer?

In HTML5 muss sie das nicht.

Das stimmt natürlich auffallend. Es handelt sich aber nicht um ein HTML5-Dokument.

Matthias