zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Fixed Leiste verdeckt Sprungziel

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.10.2005, 11:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.10.2005
Beiträge: 5
steele befindet sich auf einem aufstrebenden Ast
Standard Fixed Leiste verdeckt Sprungziel

Hi, ich arbeite eine Webseite auf XHTML und CSS um und bin auf ein Problem gestoßen. Wahrscheinlich mache ich einen Denkfehler - vielleicht geht das aber auch nicht, was ich möchte. Das wäre dann aber nicht weiter tragisch. Mein "Implementierungsziel" ist: Nur XHTML-Strict und CSS! (Kein Javascript, keine Frames, ...) Ich weiß, man kann damit ganz tolle Sachen machen - aber ich möchte es nur einfach und schlicht haben.
Mein "Problem": Ich habe eine Navigationsleiste am oberen Bildschirmrand, die permanent sichtbar sein soll (habe ich "fixed" angelegt). Darunter befindet sich ein Textbereich variabler Höhe, in dem interne Sprünge möglich sein sollen. Wenn jetzt viel Text in dem Bereich steht, werden Scrollbalken erzeugt. Klickt man dann auf den Verweis, wird ein Sprung durchgeführt - allerdings liegt das Sprungziel hinter dem "fixed"-Bereich. Das ist nicht so gut. Gibt es eine Möglichkeit, dass das Sprungziel unter dem "fixed"-Bereich angezeigt wird? (Also so, wie die Seite aussieht, wenn man sie neu öffnet - nur dass der Text "an die richtige Stelle nach unten gescrollt" dargestellt wird?
Als Beispiel hier die CSS-Datei:
Code:
body {
background-color: navy;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
}
#naviflaeche {
background-color: silver;
position: fixed;
height: 150px;
width: 200px;
margin: 0;
padding: 0;
}
#inhaflaeche {
background-color: white;
height: auto;
width: 200px;
position: absolute;
top: 150px;
margin: 0;
padding: 0;
}
Mehr als einfach, oder?
Hier die HTML-Datei. In dieser bitte die Stellen mit dem Text durch einen langen Text auffüllen, damit man den Effekt mit den Scrollbalken bekommt.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1//DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testwebseite</title>
<link rel="stylesheet" type="text/css" href="./layout.css" />
</head>
<body>
<div id="inhaflaeche">


Worum geht es hier:</p>
Link


Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.</p>
<a name="Link">Hier ist das Sprungziel</a>


Auch hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.</p>
</div>
<p id="naviflaeche">Navigationsleiste</p>
</body>
</html>
Hat jemand eine Idee? Wie gesagt: Wenn's nicht geht, habe ich kein Problem damit - dann wird's eben anders.
Besten Dank "Remington"
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.10.2005, 13:57
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.042
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Probiers mal so:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1//DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testwebseite</title>
<style type="text/css">
<!--
body {
background-color: navy;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
}
#naviflaeche {
background-color: silver;
top: 0;
left: 0;
position: fixed;
height: 150px;
width: 200px;
margin: 0;
padding: 0;
z-index: 8;
}
#inhaflaeche {
background-color: white;
height: auto;
width: 200px;
position: absolute;
top: 150px;
margin: 0;
padding: 0;
}
//-->
</style>
</head>
<body>
<div id="naviflaeche">Navigationsleiste</div><div id="inhaflaeche">


Worum geht es hier:</p>
Link


Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.</p>
<a name="Link">Hier ist das Sprungziel</a>


Auch hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einf&uuml;gen, damit Scrollbalken entstehen.</p>
</div>
</body>
</html>
Für den IE brauchst Du eine Sonderbehandlung. Einfach mal im Forum suchen.

grüsse andir
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.10.2005, 14:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.10.2005
Beiträge: 5
steele befindet sich auf einem aufstrebenden Ast
Standard

Hallo andir,
wenn der Inhalt/Text unterhalb des Sprungziels so lang ist, dass man alleine für diesen Abschnitt schon Scrollbalken erhält, dann springt man hinter die Navigationsleiste und kann den oberen Textteil nicht mehr lesen (man springt an den oberen Fensterrand, der hinter der Navigationsleiste verdeckt ist).
So geht's also leider nicht.
Grüße Remington
Mit Zitat antworten
  #4 (permalink)  
Alt 26.10.2005, 15:35
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.042
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Ahja.... ich erinnere mich, so ein Problem gabs schon einmal.
Das wußte ich noch, dachte aber, die Lösung wäre trivialer gewesen.

Das ist ein schöner Sch.. eibenkleister

Hier ein paar mögliche Lösungsansätze:

http://molily.de/css-position-fixed

grüsse
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #5 (permalink)  
Alt 26.10.2005, 15:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.10.2005
Beiträge: 5
steele befindet sich auf einem aufstrebenden Ast
Standard

Jawoll, genau das trifft es.
DANKE
(ich hatte bei meiner Webrecherche nichts gefunden).

Remington
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
3 Column Layout - Fixed Fluid Fixed BamiGorengo CSS 7 26.06.2014 00:04
bei resize zentriert und fixed zugleich cuginoCoso CSS 18 25.01.2012 12:15
Positionierung einiger Elemente falsch CrAzYs CSS 4 09.10.2008 21:45
DIV immer ganze Breite - normal?!?!? csski CSS 3 02.07.2008 13:20
Navigation fixed nova2004de CSS 1 04.03.2008 18:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:47 Uhr.