Position fixed verdeckt Anchor

**ZeitGeist** · 08-02-2010 15:01

Moin,

ich habe folgendes Problem:
Meine Navigation sollt mittels position:fixed immer ganz oben auf der Seite sein. Wenn ich jetzt interne Links verwende, wird das Sprungziel jedoch von der Navigation verdeckt.
Kennt da jemand einen Workaround?

Angucken kann man das hier:
http://radicarl-programming.de/spielwiese/anchor.html

Auf den Link klicken und dann soll der rote Text eigentlich sichtbar sein, momentan muss man noch zwei drei Zeilen hochscrollen.

Der Code:

Code:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/html">
<head>
	<title>Anchor</title>
	<style type="text/css">
		.navigation {
			position: fixed;
			top: 0px;
			left: 0px;
			padding: 5px;
			background-color:yellow;
			height: 50px;
			width: 100%;
		}
		
		.content {
			margin-top: 60px;
			padding: 5px;
			border: 1px solid black;
			width: 100px;
			margin-bottom: 500px;
		}
	</style>
</head>
<body>
	<div class="navigation">
		Navigation<br/>
		<a href="#target">Link</a>
	</div>
	<div class="content">
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		<div id="target" style="color:red; font-weight:bold">Target</div>
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
	</div>
</body>
</html>

**Junkee[]** · 08-02-2010 15:18

Auf den Link klicken und dann soll der rote Text eigentlich sichtbar sein, momentan muss man noch zwei drei Zeilen hochscrollen.

nö. ist sofort sichtbar. (ff3.5.7)

**ZeitGeist** · 09-02-2010 01:05

oh, hab ich ne andere version hochgeladen.

Das was ich bisher als workaroung hinbekommen habe

Code:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/html">
<head>
	<title>Anchor</title>
	<style type="text/css">
		.navigation {
			position: fixed;
			top: 0px;
			left: 0px;
			padding: 5px;
			background-color:yellow;
			height: 60px;
			width: 100%;
		}
		
		.content {
			padding: 5px;
			width: 100px;
		}
		
		.content * {
			padding-top:80px;
			margin-bottom: -80px;
		}
	</style>
</head>
<body>
	<div class="navigation">
		Navigation<br/>

		<a href="#target">Link</a>
	</div>
	<div class="content">
		<div>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		</div>
		<div id="target" style="color:red; font-weight:bold;">Target</div>
		<div>
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		</div>

	</div>
</body>
</html>

Problem: wenn sich das Target eine Ebene tiefer befindet, zum Beispiel als weiteres div-Element im ersten div-Element.
Mit dem momentanen css wird die Darstellung falsch (inneres div wird noch weiter nach unten verschoben).
Meine Anpassung (.content > *) korrigiert zwar die Darstellung, dann wird das Sprungziel jedoch wieder verdeckt.

Thema: Position fixed verdeckt Anchor

LinkBack

Themen-Optionen

Anzeige

Position fixed verdeckt Anchor

Empfehlenswerte Literatur von unserem Partner Terrashop

AW: Position fixed verdeckt Anchor

AW: Position fixed verdeckt Anchor

Ähnliche Themen

Fixed position + feste Höhe ! unterschiedliche Bildschirmgrößen

Fixiertes Menü (position: fixed)

PHP 4.2.3 released

Dropdownmenu with fixed position

css-ebenen mit position: fixed feststellen?

Lesezeichen

Lesezeichen

Berechtigungen