nicht angemeldet
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>