• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Problem: Verweise mit Ankern bei fixierter Kopfzeile

Suntree

New member
Hallo allerseits,

ich bin neu in diesem Forum. Angemeldet habe ich mich, da ich hier schon wertvolle Hinweise in Bezug auf HTML und CSS gefunden habe. Ich selbst habe noch nicht allzu fundierte Erfahrungen als Webdesignerin und suche daher – wenn ich absolut nicht mehr weiterkomme – im Internet nach Lösungen.

Vor ca. 2 Wochen fand ich in diesem Forum eine Lösung für mein damaliges Problem: Ich benötigte eine fixierte Titelzeile, der Content darunter sollte scrollbar sein. Der Code von anna55 (Beitrag vom 29. Januar 2008) hat mir diesbezüglich sehr weitergeholfen. Jetzt habe ich folgendes Problem:

Bei diesem Layout (fixierte Kopfzeile, scrollbarer Content) funktionieren meine Verweise mit Ankern nicht mehr richtig: Da der fixierte Kopfteil den scrollbaren Inhalt überlagert, erscheint zwar das Ankerziel ganz oben auf dem Bildschirm, ist jedoch logischer Weise nicht mehr zu sehen, da er vom Header verdeckt ist. Meine Hoffnung war, Verweisen mit Ankern generell einen Abstand von x Pixeln (x = Höhe des Headers) zum oberen Bildschirmrand zuweisen zu können. Habe jedoch trotz langer Suche kein adäquates Beispiel im Internet finden können.

Natürlich könnte ich meine Anker höher setzen (um die Höhe des Headers), aber diese Lösung ist m.E. sehr "unsauber".

Hat jemand einen Tipp für mich?
 
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
</head>
<body>
<div style="height: 2000px;">hh<a href="#g">kj</a></div>
kjhgkjhg kjhg kjhg kjhg kjhg kjhg kjhg hjg kjgh jkhg kjhg kjhg jkhg jkhg jkhgkjhg jkhg jkhg jkhg jkhg kjhg <a id="g" style="padding-top: 200px;">rest</a> kjhg kjhg kjhg kjhg jkhg jkhg jkhg kjgh jkhg jkhg kjhg kjhg kjgh jkgh 
<div style="height: 2000px;">hh</div>
</body>
</html>
getestet in IE8/7, FF 3.6, Chrome, Safari und Opera.
 
Zurück
Oben