26.10.2005, 10:31
|
|||
|
|||
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;
}
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ügen, damit Scrollbalken entstehen.</p> <a name="Link">Hier ist das Sprungziel</a> Auch hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.</p> </div> <p id="naviflaeche">Navigationsleiste</p> </body> </html> Besten Dank "Remington" 
|
| Sponsored Links |
|
26.10.2005, 12:57
|
|||
|
|||
|
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ügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.</p>
<a name="Link">Hier ist das Sprungziel</a>
Auch hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.Hier bitte einen ganz langen Text einfügen, damit Scrollbalken entstehen.</p>
</div>
</body>
</html>
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
|
| Sponsored Links |
|
26.10.2005, 13:21
|
|||
|
|||
|
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
|
|
26.10.2005, 14:35
|
|||
|
|||
|
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
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| bei resize zentriert und fixed zugleich | cuginoCoso | CSS | 18 | 25.01.2012 11:15 |
| Positionierung einiger Elemente falsch | CrAzYs | CSS | 4 | 09.10.2008 20:45 |
| DIV immer ganze Breite - normal?!?!? | csski | CSS | 3 | 02.07.2008 12:20 |
| Navigation fixed | nova2004de | CSS | 1 | 04.03.2008 17:33 |
| div background fixed im firefox | opa-rudi | CSS | 0 | 13.03.2006 15:30 |
Linear-Darstellung
