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

Position fixed verdeckt Anchor

ZeitGeist

ZeitGeist

Lounge-Member
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>
 
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben