nicht angemeldet
position: absolute im IE
Hallo!
Ich versuche einen großen Container zu bauen (als Hauptfenster für eine Seite), der 2 weitere Container enthält (Links für Navigation, Rechts für den Seiteninhalt.)
Die Navigation verschiebe ich mittels
position:absolute; (Damit es sich relativ zum Elternelement, dem Hauptcontainer verschiebt) und
margin-left: -70px;
etwas nach links, so daß sie mittig über dem Rand des Hauptcontainers liegt.
Danach "baue" ich den zweiten Container für den Text, den ich per margin-left: 160px; etwas einrücke um Platz für die Navigation zu haben.
Firefox stellt das fehlerfrei dar, aber bei IE6 richtet sich die Navigation relativ zum nachfolgenden Textcontainer aus.
Ich poste hier mal den arg reduzierten Quelltext. Im Browservergleich sieht man sofort was ich meine. (Im Firefox sitzt das Menü auf dem äußeren Container, im IE auf dem Inneren.)
Ich würde mich sehr freuen, wenn mir jemand auf den Trichter helfen könnte, warum die Navigation einmal den äußeren Container und einmal den inneren Container als Bezugspunkt wählt.
--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>container test</title>
<style type="text/css" media="screen">
#contain
{
margin: 1em auto;
width: 650px;
text-align: left;
background-color: #FFFFFF;
border: 1px solid #676767;
}
#nav {
position:absolute;
margin-left: -70px;
width:150px;
}
#nav a{
display:block;
margin:10px 0;
background-color:#FFFFFF;
border: 1px #676767;
border-style:dotted;
height:1em; /* diese Angabe ist nur f?r den IE, damit die ganze Linkfl?che klickbar ist */
}
#contents
{
padding-top:20px;
padding-bottom:20px;
margin-left: 160px;
background-color: #FFFFFF;
overflow:visible;
border: 1px solid #676767;
}
</style>
</head>
<body>
<div id="contain">
<div id="nav">
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Lebenslauf</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
<div id="contents">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>
------------------------
Lieben Dank, Philipp
-
Hi,
Die Navigation verschiebe ich mittels
position:absolute; (Damit es sich relativ zum Elternelement, dem Hauptcontainer verschiebt) und
margin-left: -70px;warum nicht left: -70px; wenn Du mit absoluten Positionen arbeitest?
Gruesse, Joachim
--
Am Ende wird alles gut. -
Hallo Philipp;
Ich versuche einen großen Container zu bauen (als Hauptfenster für eine Seite), der 2 weitere Container enthält (Links für Navigation, Rechts für den Seiteninhalt.)
Die Navigation verschiebe ich mittels
position:absolute; (Damit es sich relativ zum Elternelement, dem Hauptcontainer verschiebt) undElternelement ist das nächsthöhere Element, was _nicht_static_ ist. In deinem Fall ist das nicht #contain, sondern <body>
margin-left: -70px;
etwas nach links, so daß sie mittig über dem Rand des Hauptcontainers liegt.Nee, wie oben erwähnt: Positioniere den Container "position:relative", und #nav absolut mit left:-70 und top:0.
Firefox stellt das fehlerfrei dar, aber bei IE6 richtet sich die Navigation relativ zum nachfolgenden Textcontainer aus.
Ich halte das für einen Zufall.
HTH
Jochen
-
Nee, wie oben erwähnt: Positioniere den Container "position:relative", und #nav absolut mit left:-70 und top:0.
Hallo Maxx, hallo Jochen,
herzlichen Dank euch beiden!
Mit Maxx Tip hat das hervorragend funktioniert!@ maxx:
Ich glaube nicht, daß sich das Menü zufällig am Contentcontainer festkrallt. (Es sei denn, meine eigenwillige Konstruktion wäre in CSS nicht definiert und jeder Browser kann das interpretieren wie er möchte.) Wenn ich z.B. das "margin-left" von Content verändere wandert das Menü mit.Auf jeden Fall noch einmal Danke,
es funktioniert!Gruß, Philipp
-