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