• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Absolut postitionierte Navigation wird im IE nicht angezeigt

J

jump.blueberry

New member
Hallo Community,

ich habe ein Problem und weiß nicht mehr weiter.
Die Navigation auf meiner Seite ist der Länge nach ausgerichtet und absolut positioniert.
Im Firefox sieht das alles auch schön aus...
Aber im InternetExplorer ist die Navigation nicht da.
Wenn ich sie nicht absolut positioniere, wird sie angezeigt.
Ich brauche die absolute Positionierung aber für die halbtransparenten Hintergründe der Unternavis.
Hier der ganze Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>testseite</title>

<style type="text/css" >
/* CSS Document */
body{font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#000000; margin:0px; background-color:#efefef}
#seite{ 
width:970px;  position:absolute; left:50%; margin-left: -485px; border:1px solid #dddddd; background-color:#FFFFFF} 

#rechts{ position: relative; margin: 0px; }
div#head{float:none; }
img#headgrafik{display:block; z-index:1}
/*Navi*/
div#navi {width:800px;  position:absolute;top:240px;  height:30px; background-image:url(../bilder/bg_navi.jpg); background-repeat:repeat-x; padding-left:170px;}
div#navi ul{margin:0px; padding:0px; list-style-type:none; list-style-position:outside}
div#navi ul li{float:left}
div#navi ul li a{display:block;color:#333333;height:30px; line-height:30px; vertical-align:bottom; text-decoration:none; font-size:14px; font-weight:400; padding-left:18px; background-repeat:no-repeat; background-position:left;}
div#navi ul.unternavi0 li{margin-left:15px}
div#navi ul li a:hover, div#navi ul li a.active{color:#666666;background-image:url(../bilder/wuerfel.gif)}
div#navi ul li ul.unternavi1{position:absolute;top:32px; z-index:5; display:none; overflow:hidden; padding:2px; border:1px solid #666666 }
div#navi ul li ul.unternavi1 li.halbtransparent{background-color:#dddddd; display:block; position:absolute; top:0px; left:0px; width:100%; height:200px;  filter:alpha(opacity=80); -moz-opacity:0.8; z-index:-1}
div#navi ul li ul.unternavi1 li {float:none; clear:both;  margin:0px;  border-bottom: 1px none #ffffff}
div#navi ul li ul.unternavi1 li a{display:block;font-weight:400; color:#666666; font-size:12px; width:100%;  height:18px; line-height:18px; z-index:200}
div#navi ul li ul.unternavi1 li a:hover{background-color:#CCCCCC;}
/*inhalt*/
div#inhalt{margin-top:20px; min-height:340px; height:auto !important; height:340px; float:left; padding:5px}
.float{float:left; margin-right:10px}
div#inhalt a{color:#ab0d26; text-decoration:none}
div#inhalt a:hover{text-decoration:underline}
h1{color:#ab0d26; font-size:16px}

/*foot*/
div#newskasten{position:absolute; top:180px; left:550px; display:none }
div#newskasten img{margin:0px}
div#newsbody{margin: 0px 8px 0px 38px; border-width:0px 4px 0px 4px; border-style: solid; border-color: #ab0d26; padding:2px; text-align:left; }
div#foot{clear:both; float:none;text-align:right;background-color:#FFFFFF; width:970px; background-color:#ab0d26; border-top:10px solid #e6b6be; height:20px; line-height:20px; vertical-align:middle; color:#FFFFFF; border-right:0px solid #ab0d26; }
div#suche{ margin:5px; padding:2px; border: 1px solid #ab0d26;  text-align:left}
div#foot a{color:#ffffff; text-decoration:none; font-size:10px;}
div#foot a:hover{text-decoration:underline}



</style>
</head>
<body>
<div id="seite"><div id="head">

             <img src="bilder/kopf_neu/kopf_start.jpg" width="620" height="240" border="0" usemap="#Map" id="headgrafik" />

     
       
	  <map name="Map" id="Map">
        <area shape="rect" coords="22,9,182,162" href="index.php" />
      </map>
  </div>
  <div id="navi">
     <ul class="unternavi0" id="u0" >

<li class="halbtransparent"></li>
 <li class="liu1" id="liu1" >
<a href="arbeitsweise.php"  id="a1"  ><span>Unsere Arbeitsweise</span></a>
</li>
 <li class="liu2" id="liu2" >

<a href="produkte.php"  id="a2" ><span>Unsere Produkte</span></a>
 <ul class="unternavi1" id="u2" >

<li class="halbtransparent"></li>
 <li class="liu8" id="liu8" >
<a href="produkt1.php"  id="a8"><span>Produkt1</span></a>
</li>
 <li class="liu9" id="liu9" >
<a href="produkt2.php"  id="a9"><span>Produkt 2</span></a>
</li>
 <li class="liu10" id="liu10" >

<a href="produkt3.php"  id="a10"  ><span>Produkt3</span></a>
</li>
 <li class="liu11" id="liu11" >
<a href="produkt4.php"  id="a11"  ><span>Produkt 4</span></a>
</li>
 <li class="liu12" id="liu12" >
<a href="produkt5.php"  id="a12" ><span>Produkt 5</span></a>
</li>
</ul>
</li>
 <li class="liu3" id="liu3" >

<a href="anfrage.php"  id="a3"  ><span>Anfrage</span></a>
</li>
 <li class="liu4" id="liu4" >
<a href="downloads.php"  id="a4" ><span>Downloads</span></a>
</li>
 <li class="liu5" id="liu5" >
<a href="kontakt,5.htm"  id="a5" ><span>Kontakt</span></a>
</li>
</ul>
  </div>
  
  
  <div id="inhalt" onclick="hideallsubnavis()">


  </div> 

<div id="newskasten"> 
  <img src="../bilder/kopf/newskastenh.gif" />
  <div id="newsbody">
  <strong>Testnews</strong> <br />
    <br />
  Test </div>

 
  <img src="../bilder/kopf/newskastenf.gif" width="200" height="34" />
  </div> 
  <div id="foot"><a href="sitemap.php">Sitemap</a>
    | <a href="impressum.php">Impressum</a>
  </div>
  </div>
</body>
</html>

Konkret geht es um #navi!
 
Zuletzt bearbeitet:
Der InternetExplorer kennt sehr wohl Transparenz.
Hier der entsprechende css-code für IE und FF:
Code: 
div#navi ul li ul.unternavi1 li.halbtransparent{
background-color:#dddddd; 
display:block; 
position:absolute; 
top:0px; 
left:0px;
 width:100%;
 height:200px;
  filter:alpha(opacity=80); /*für IE*/
 -moz-opacity:0.8; /* für FF*/
 z-index:-1 /*damit es NICHT überlagert*/
}

Mit diesem Trick funktionieren halbtransparente Navis...
Aber dafür muss die navi eben absolut platziert sein.
 
Hallo,

dein "navi"-Container befindet sich im Container "seite".
Und diesen Container "seite" hast du wie folgt formatiert:
HTML: 
#seite {
	width: 970px;
	position: absolute;
	left: 50%;
	margin-left: -485px;
	z-index:1;
	border: 1px solid #dddddd;
	background-color: #FFFFFF;
}

Ich weiss nicht, wieso du erst diesen Container um 50% nach rechts verschiebst, und dann um 485px wieder nach links holst. Macht bei einer Breite des Containers von 970px effektiv eine Verschiebung um - warte, ich muss schnell den Taschenrechner holen - 0px.

Lässt du diese zwei Zeilen weg:
HTML: 
left: 50%;
margin-left: -485px;

und positionierst links gleich mit:
HTML: 
left: 0px;

dann klappts auch im IE mit der Anzeige des Containers "navi".

viele Grüsse,
taos9
 
Der Div-Tag seite ist aber nicht links oben, sondern mittig platziert und das bewirkt man eben mit diesen 2 Zeilen.
margin:auto geht auch, dann kann man aber kein position:absolute setzen.

Und die Seite soll schon mittig bleiben.
Hat jemand vielleicht einen andern Trick?

Ich habe diesen Code schon öfters verwendet und kann mich an dieses Problem nicht erinnern.
 
Mit diesen Veränderungen sieht es bei mir gleich aus im IE7, IE6 und FF3

Code: 
/*Navi*/
div#navi { width:800px; [COLOR="red"]position:static;[/COLOR] top:240px;  height:30px; background-image:url(../bilder/bg_navi.jpg); background-repeat:repeat-x; padding-left:170px;}
div#navi ul{margin:0px; padding:0px; list-style-type:none; list-style-position:outside}
div#navi ul li{float:left;}
div#navi ul li a{[COLOR="red"]display:inline;[/COLOR] color:#333333;height:30px; line-height:30px; vertical-align:bottom; text-decoration:none; font-size:14px; font-weight:400; padding-left:18px; background-repeat:no-repeat; background-position:left;}
 
Also im IE6 tut sich bei mir gar nichts mit dieser Änderung!
Die Navi bleibt verschwunden!

--- Edit: im Testdokument geht's im echten aber nicht!
Also muss ich mal die unterschiede zwischen den 2 dokumenten vergleichen.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben