✔ Probleme mit der Überlappung von divs

Status
Nicht offen für weitere Antworten.
K

kn0x

Grünschnabel
Hallo, ich hab schon alles mögliche ausprobiert bevor ich hier frage.
Also zu meinem Problem ich habe ein Header Bereich in dem ein Menü überlappen soll das klappt t wunderbar im IE7 nur nicht im Firefox 2 da wird das menü einfach ausgeblendet, dann habe ich mit z-index rungespielt aber der Firefox sagt nix. Nun meine Frage wie kann ich das lösen?
Hier mein CSS

body{
margin:0 150px 0 0;
padding:0;
width:auto;
background-color:#304868;
font-family: Verdana, Arial, sans-serif;
}
#header{
background-color:#FFF;
height:auto;
width:auto;
z-index:1;
}
#topmenu{
margin-top:-33px;
margin-left:350px;
background-color:#FFF;
height:35px;
z-index:2;
}
#topmenu .menuitem_aktiv{
background-color:#304868;
color:#EAF2F5;
height:17px;
display:block;
text-decoration:none;
padding:6px 10px 10px;
margin:0;
float:left;
display: inline;
font-weight: bold;
z-index:2;
/*border-left: 1px solid #CAE2EB;
border-top: 3px solid #CAE2EB;
border-right: 1px solid #CAE2EB;*/
}
#topmenu .menuitem_inaktiv{
background-color:#FFF;
color:#5795BA;
height:17px;
display:block;
text-decoration:none;
padding:6px 10px 10px;
margin:0;
float:left;
display: inline;
z-index:2;
}
#submenu{
background-color:#304868;
color:#EAF2F5;
height:18px;
margin-top:-2px;
margin-left:175px;
border-top:3px solid #304868;
text-decoration:none;
font-size:12px;
padding:5px 5px 0 5px;
z-index:3;
}
#submenu .menuitem_aktiv{
background-color:#304868;
color:#ff0000;
height:18px;
margin-top:-2px;
border-top:3px solid #304868;
text-decoration:none;
z-index:3;
}
#submenu .menuitem_inaktiv{
background-color:#304868;
color:#fff;
height:18px;
margin-top:-2px;
border-top:3px solid #304868;
text-decoration:none;
z-index:3;
}
#inhalt
{
background-color:#E4E3E3;
padding:25px;
border-top:10px solid #304868;
margin-left:175px;
font-size:12px;
}
#inhalt td
{
font-size:12px;
}
#inhalt .button
{
background-color:257;
color:FFFFFF;
font-family:Verdana;
font-size:12px;
}
#inhalt .secondline
{
color:#336699;
font-family:verdana;
font-size:12px;
font-weight:bolder;
text-decoration:none;
}
#inhalt a
{
background-color:#ECECEC;
color:#283A50;
border-bottom:1px dashed #336699;
font-size:12px;
font-weight:bold;
text-decoration:none;
}
#footer
{
/*clear:both;*/
text-align:center;
background-color:#304868;
color:#fff;
font-size:11px;
margin-left:175px;
}
#footer a
{
text-align:center;
background-color:#304868;
color:#fff;
font-size:11px;
text-decoration:none;
}

und hier meine index.php

<?php
include("config.php");
if(isset($_GET["id"]))
{
$page = $_GET["id"];
} else {
$page = "start";
}
if(isset($_GET["cat"]))
{
$subpage = $_GET["cat"];
} else {
$subpage = "";
}
?>
<html>
<head>
<link href="layout.css" rel="stylesheet" type="text/css" media="all" />
<link rel="shortcut icon" href="img/favicon.ico" />
<title>
<?php
echo($config["PageTitle"]);
?>
</title>
</head>
<body>
<div id="header">
<?php
include ($config["pages"]["site"]["header"]);
?>
</div>
<div id="topmenu">
<?php
include ($config["pages"]["site"]["topmenu"]);
?>
</div>
<div id="submenu">
<?php
include ($config["pages"]["site"]["submenu"]);
?>
</div>
<div id="inhalt">
<?php
include ("content.php");
?>
</div>
<div id="footer">
&copy; 2008
<?php
/*$datum=date("Y");
echo "$datum";*/
?>
<a href="index.php?id="> Oliver Westermann</a> | http://www.fensterbau-westermann.de
</div>
</body>
</html>
 
Hi.
kn0x hat gesagt.:
dann habe ich mit z-index rungespielt aber der Firefox sagt nix.
Zum Vergrößern anklicken....
Die z-index-Eigenschaft funktioniert nur in Verbindung mit der position-Eigenschaft (relative oder absolute), und die kann ich im #topmenu-Selektor nicht entdecken.

Sollte dies zu keinem Erfolg führen, dann zeig mal bitte den geparsten PHP-Code, sprich den vom Browser ausgegebenen HTML-Code, damit man sich ein vollständiges Bild von der Situation machen kann.
 
Wie ich vermutete, fehlt hier lediglich die position-Eigenschaft, damit die Schichtpositionierung greift:

Code: 
#header{
background-color:#FFF;
height:auto;
width:auto;
z-index:1;
position:relative;
}
#topmenu{
margin-top:-33px;
margin-left:350px;
background-color:#FFF;
height:35px;
z-index:2;
position:relative;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück