nicht angemeldet
Position fixed verschiebt den Inhalt (Firefox)
Hallo,
Was ich vorhabe: Eine fixierte Navigationsleiste links, als Liste implementiert und die Unterpunkte sollen bei hover rechts daneben angezeigt werden (wie z.B. hier beschrieben http://www.alistapart.com/articles/horizdropdowns/ und soll so aussehen http://www.alistapart.com/d/horizdropdowns/horizontal.htm). Der Rest der Seite soll nicht fixiert sein und scrollen.
Was mein Problem ist: Wenn ich im Firefox die Unterpunkte einblende verschiebt sich der normale Inhalt der von diesen überdeckt wird um ein paar Pixel.
Mein Code: Ein stark vereinfachtes Beispiel um mein Problem mit Firefox (1.0.3) zu veranschaulichen. Leider kann ich den Code momentan nicht online stellen, entschuldigt bitte die Umstände.
Was ich bisher rausgefunden habe: Es scheint an dem position:fixed zu liegen. Wenn ich das in position:absolute ändere dann treten keine Verschiebungen mehr auf. Allerdings ist mir weder klar wieso es zu diesem Problem kommt noch wie ich es umgehen kann (die Navigation soll fixiert bleiben und die prinzipielle Positionierung des Navigations und Inhaltsbereichs soll erhalten bleiben). Überhaupt dachte ich eigentlich dass sich fixed und absolute identisch verhalten müssten wenn nicht gescrollt wird, aber dem scheint wohl nicht so zu sein.
Für jede Hilfe bin ich sehr dankbar!
Grüße,
Mike
-----------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>test</title>
<style type="text/css">
#fixiert {
position: fixed;
top: 3em;
width: 12em;
height: auto;
background-color: red;}
#Inhalt {
margin-left: 9em;
margin-top: 2em;
padding: 1em 4em;
height: auto;
background-color: gray;}
#Navigation a {
background-color: yellow;}
#Navigation li {
position: relative;}
#Navigation li ul {
position: absolute;
left: 10em;
display: none;}
#Navigation li:hover ul {
display: block;}
</style>
</head>
<body>
<div id="Inhalt">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque commodo, ligula ut dapibus aliquet, turpis pede sodales libero, sit amet semper eros tortor at lectus. Nunc ac neque in elit ultricies lobortis. Praesent id arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse elit. Nam non nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Sed sit amet ipsum et pede iaculis sollicitudin. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean scelerisque tellus eget ante. Proin sapien. Integer porttitor urna nec justo. Integer adipiscing, ipsum vel aliquam mattis, odio ligula tempor quam, non auctor quam justo et dolor.</p>
</div>
<div id="fixiert">
<ul id="Navigation">
<li><a href="#">Lorem ipsum dolor sit</a><ul>
<li><a href="#">Sedsitametipsum etpedeiaculis</a></li>
<li><a href="#">Sedsitametipsumetpedeiaculis</a></li>
<li><a href="#">Sedsitametipsum etpedeiaculis</a></li>
<li><a href="#">Sedsitametipsumetpedeiaculis</a></li>
</ul></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
</ul>
</div>
</body>
</html>
-
Guten Tag Mike,
bei mir verschibt sich im firefox 1.0 gar nichts. Der eingeblendete Text erscheint etwa 6 cm weiter links und 2 cm weiter unten. Allerdings sind die drei Kreise nicht gelb unterlegt, sondern liegen transparent über dem Untergrundtext.
Mit gruß
Dada-
Hallo Dida,
dass sich bei dir nichts verschiebt finde ich seltsam. Ich kann das Verschieben auf zwei Rechnern mit Firefox 1.0.3 und 1.0 beobachten. Beides sind frische Standard Installationen unter Windows XP SP2 ohne jegliche Erweiterungen. Der Text unter/hinter den eingeblendeten Unterpunkten verschiebt sich bei mir ca. 2px nach oben wenn diese eingeblendet werden und wieder zurück wenn man den hover Bereich verläßt und die Unterpunkte wieder ausgeblendet werden. D.h. wenn man mit der Maus von oben nach unten über die Hauptpunkte in der Navigation fährt dann springt der überlagerte Textbereich ständig nach oben und unten.
Die Position und Einfärbung passen so schon, ist ja nur ein ganz einfaches Beispiel.
Trotzdem vielen Dank für deine Mühe.
Gruß,
Mike
-