Orphelina
Erfahrenes Mitglied
Hallo zusammen,
ich weiss dieses Thema wurde sicher schon oft genug gestellt, aber ich habe keine passende Antwort gefunden, vielleicht fallen mir auch nicht die richtigen Suchbegriffe ein.
Und zwar hab ich eine Webseite angefangen, die ohne Tabellen und somit nur aus verschachtelten Divs besteht. Das hat mit ein bisschen float hier und da auch gut funktioniert. Nun habe ich das Problem, dass ich ein Div haben, das wiederum 2 divs enthält. Der Linke ist eine Art Navigation, der Rechte Inhalt. Der Rechte liess sich ganz einfach positionieren und passt in allen Browsern (PC und Mac). Nur der Linke sitzt im IE6 zu weit unten.
Nun habe ich alles mögliche ausprobiert, mit Position:absolute, mit Margins, mit !Important-Befehl, etc. Leider bisher ohne Erfolg.
Vielleicht kann mir jemand helfen, diese letzte Hürde zu überwinden.
Ich freue mich über jeden Tipp.
Danke und Gruß
Es handelt sich um den DIV mit der ID Navi-Left.
Hier die HTML:
Und ein Teil meiner CSS:
ich weiss dieses Thema wurde sicher schon oft genug gestellt, aber ich habe keine passende Antwort gefunden, vielleicht fallen mir auch nicht die richtigen Suchbegriffe ein.
Und zwar hab ich eine Webseite angefangen, die ohne Tabellen und somit nur aus verschachtelten Divs besteht. Das hat mit ein bisschen float hier und da auch gut funktioniert. Nun habe ich das Problem, dass ich ein Div haben, das wiederum 2 divs enthält. Der Linke ist eine Art Navigation, der Rechte Inhalt. Der Rechte liess sich ganz einfach positionieren und passt in allen Browsern (PC und Mac). Nur der Linke sitzt im IE6 zu weit unten.
Nun habe ich alles mögliche ausprobiert, mit Position:absolute, mit Margins, mit !Important-Befehl, etc. Leider bisher ohne Erfolg.
Vielleicht kann mir jemand helfen, diese letzte Hürde zu überwinden.
Ich freue mich über jeden Tipp.
Danke und Gruß
Es handelt sich um den DIV mit der ID Navi-Left.
Hier die HTML:
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="MainContainer">
<div id="Header">
<div id="Header01"><img src="01.gif"></div>
<div id="Header02"><img src="02.gif"></div>
<div id="Header03"><img src="03.gif"></div>
<div id="Header04"><img src="04.gif"></div>
</div>
<div id="Navi">
<div class="metanavi"><a href="">Kontakt</a> | <a href="">Sitemap</a> | <a href="">Impressum </a>| <a href="">Suche</a></div>
</div>
<div id="Navi02"></div>
<div id="ContentContainer">
<div id="Navi-Left">
<span class="linksnavi_level1"><a href="">Ebene 1</a></span>
<span class="linksnavi_level2"> <a href="">Punkt 1</a></span>
<span class="linksnavi_level2"><a href="">Punkt 2</a></span>
<span class="linksnavi_level2"> <a href="">Punkt 3</a></span>
<span class="linksnavi_level2"><a href="">Punkt 4</a></span>
</div>
<div id="Content02">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque pharetra, lectus at scelerisque venenatis, nunc massa dictum lectus, vel commodo ligula nulla ac lectus. Donec lectus sapien, euismod nec, scelerisque sed, nonummy ut, neque. Praesent pretium sapien quis quam. Ut faucibus feugiat tortor. Quisque congue. Cras vehicula. Aliquam erat volutpat. Suspendisse potenti. Vestibulum auctor. Morbi sit amet lectus.</p>
</div>
</div>
</div>
</body>
</html>Und ein Teil meiner CSS:
PHP:
body {
background-color: #E3E3E3;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
list-style-type: disc;
}
#MainContainer {
width:1024px;
height:768px;
margin:0px;
padding:0px;
}
#Header{
width:100%;
height:120px;
background-color:#FFFFFF;
margin:0px;
}
#Header01 {
width:120px;
height:120px;
float:left;
}
#Header02 {
width:366px;
height:120px;
margin-left:1px;
float:left;
}
#Header03 {
width:241px;
height:120px;
margin-left:1px;
float:left;
}
#Header04 {
width:269px;
height:120px;
margin-left:1px;
float:left;
}
#Navi {
height:23px;
background-color:#5c5c5c;
color:#FFFFFF;
font-weight:bold;
}
.metanavi{
font:10px Verdana;
color: #FFFFFF;
padding-left:490px;
padding-top:5px;
}
.metanavi A:link {
font-family: Verdana;
font-size: 10px;
text-decoration: none;
color: #FFFFFF;
}
.metanavi A:hover {
font-family: Verdana;
font-size: 10px;
text-decoration: underline;
color: #FFFFFF;
}
.metanavi A:visited {
font-family: Verdana;
font-size: 10px;
text-decoration: none;
color: #FFFFFF;
}
#Navi02 {
height:12px;
background-image:url(hometemplate_r4_c1.gif);
background-color:#b5b5b5;
}
#ContentContainer{
width:100%;
height:100%;
background-color:#e3e3e3;
display:block;
}
#Navi-Left {
width: 200px;
margin-top:25px;
}
#Content02 {
position:fixed;
top:180px;
left:205px;
width:800px;
height:100%;
background-color:#f1f1f1;
float:right;
padding-left:10px;
padding-right:10px;
}
