Tino: z-index Problem --> Wo ist der Fehler?!

Beitrag lesen

Hallo zusammen,

ich habe ein HTML, in dem ein Hintergrundbild die Navigation aus gestalterischen Gründen leicht überdecken soll. Da ich in CSS sehr unerfahren bin habe ich gegoogelt und bin mit der z-index-Eigenschaft fündig geworden. Bei der Anwendung der Eigenschaft in meinem CSS scheitere ich jedoch seit mehreren Stunden. Was mache ich falsch?

Ich erlabe mir mal, das gesamte CSS zu posten. Die "Divs" mit dem Attribut z-index sind #navihorizontalcontainer (soll in den Hintergrund) und #companyemotion (soll in den Vordergrund).

Bin für jede Hilfe oder Anregung dankbar!

body {  
	margin: 0px;  
	padding: 0px;  
}  
  
h1 {  
	color:#FFFFFF;  
	font-family:verdana;  
	font-size:13px;  
	font-weight:bold;  
}  
  
h2 {  
	color:#FFFFFF;  
	font-family:verdana;  
	font-size:12px;  
	font-weight:100;  
}  
  
h3 {  
	color:#6b6055;  
	font-family:verdana;  
	font-size:12px;  
	font-weight:bold;  
}  
  
h4 {  
	color:#6b6055;  
	font-family:verdana;  
	font-size:12px;  
	font-weight:100;  
}  
  
#indexcontainer {  
	margin:auto;  
	width:1024px;  
}  
  
#header {  
	width:1024px;  
	height:75px;  
	padding-top:19px;  
}  
  
#logo {  
	width:57px;  
	height:56px;  
	background-image:url(pics/logo.png);  
	margin-left:58px;  
	float:left;  
}  
  
#claim {  
	margin-top:16px;  
	margin-left:28px;  
	font-family:arial;  
	font-size:18px;  
	color:#f5821f;  
	float:left;  
}  
  
#search {  
	width:136px;  
	height:18px;  
	margin-left:827px;  
	margin-top:19px;  
	background-image:url(pics/search.png);  
	background-repeat:no-repeat;  
}  
  
#navihorizontalcontainer {  
	width:1024px;  
	height:27px;  
	position:relative;  
	z-index:1;  
}  
  
#navihorizontal {  
	width:753px;  
	height:27px;  
	float:left;  
}  
  
ul#navihorizontalnormal {  
	margin: 0px;  
	padding: 0px;  
	padding-left: 0px;  
	margin-left:58px;  
	width: 695px;  
	height: 27px;  
}  
  
#navihorizontalnormal li {  
	display: block;  
	float: left;  
}  
  
#navihorizontalnormal li a {  
	margin-top: 0px;  
	padding-top: 7px;  
	margin-right: 0px;  
	display: block;  
	background-color: #ededed;  
	background-image: url(pics/background.png);  
	height: 27px;  
	width: 138px;  
	text-align: center;  
	font-family:Verdana;  
	font-size:12px;  
	color: #514c4c;  
	text-decoration: none;  
	-moz-border-radius:10px;  
	-khtml-border-radius:10px;	  
}  
  
  
#navihorizontalnormal li a:hover{  
	background-color: #f38628;  
	background-image: none;  
}  
  
#navimarkenspecial {  
	width:138px;  
	height:27px;  
	float:left;  
}  
  
ul#markenspecial  {  
	margin: 0px;  
	padding: 0px;  
	padding-left: 0px;  
	margin-left:72px;  
	width: 138px;  
	height: 27px;  
}  
  
#markenspecial li {  
	display: block;  
	float: left;  
}  
  
#markenspecial li a{  
	margin-top: 0px;  
	padding-top: 7px;  
	margin-right: 0px;  
	display: block;  
	background-color: #f7d3bc;  
	height: 27px;  
	width: 138px;  
	text-align: center;  
	font-family: verdana;  
	font-size:12px;  
	color: #514c4c;  
	text-decoration: none;  
	-moz-border-radius:5px;  
	-khtml-border-radius:5px;  
}  
  
#markenspecial li a:hover{  
	background-color: #f38628;  
}  
  
#line {  
	width:905px;  
	height:12px;  
	background-image:url(pics/line.png);  
	margin-left:58px;  
	margin-top:-1px;  
	margin-bottom:0px;  
	background-repeat: no-repeat;  
	float:left;  
}  
  
#subcenter {  
	height:435px;  
	margin-left:58px;  
	margin-top:34px;  
}  
  
#verticalnavicontainer {  
	width:160px;  
	height:435px;  
	background-image:url(pics/verticalnavibackground.png);  
	background-repeat:no-repeat;  
	float:left;  
}  
  
#navivertical {  
	margin-left:15px;  
	margin-top:15px;  
	margin-right:15px;  
	margin-bottom:15px;  
}  
  
ul#naviverticalcompany  {  
	margin: 0px;  
	padding: 0px;  
	padding-left: 0px;  
	margin-left:0px;  
	width:50px;  
}  
  
#naviverticalcompany li {  
	display: block;  
	width:50px;  
	float: left;  
}  
  
#naviverticalcompany li a{  
	width:50px;  
	margin-top: 8px;  
	padding-top: 0px;  
	margin-right: 0px;  
	display: block;  
	background:none;  
	text-align:left;  
	font-family: verdana;  
	font-size:12px;  
	font-weight:thin;  
	color: #6b6055;  
	text-decoration: none;  
}  
  
#naviverticalcompany li a:hover{  
	color: #f38628;  
}  
  
#subcontent {  
	width:720px;  
	height:435px;  
	margin-left:185px;  
}  
  
#companyemotion {  
	width:269px;  
	height:435px;  
	background-image:url(pics/companyemotion.png);  
	float:left;  
	position:relative;  
	z-index:2;  
}  
  
#subtxtbackground {  
	width:451px;  
	height:435px;  
	margin-left:269px;  
	background-image:url(pics/contentbackground.png);  
}  
  
#subtxt {  
	widt:451px;  
	height:435px;  
	margin-left:20px;  
	padding-top:12px;  
	margin-right:20px;  
	margin-bottom:20px;  
}  
  
#indexcenter {  
	width:1024px;  
	height:469px;  
	margin-left:58px;  
}  
  
#indexemotion {  
	width:905px;  
	height:469px;  
	background-image:url(pics/indexemotion.png);  
	margin-top:-2px;  
	float:left;  
}  
  
#indexteaser {  
	width:264px;  
	height:111px;  
	margin-top:280px;  
	background-image:url(pics/indexteaser.png);  
	border:thin;  
	border-color:#000000;  
	-moz-border-radius:10px;  
	-khtml-border-radius:10px;  
	style="filter:alpha(opacity=80);"  
	style="-moz-opacity:0.8;"  
	style="opacity:0.8;"  
}  
  
#indexteasertxt {  
	width:220px;  
	height:89px;  
	margin-left:15px;  
	margin-right:15px;  
	padding-top:20px;  
	margin-bottom:0px;  
	text-decoration: none;  
	font-family:Verdana;  
	font-size:13px;  
	font-weight:bold;  
	color:#4c4a48;  
}  
  
#indexteasertxt a {  
	text-decoration:none;  
	color:#4c4a48;  
	text-decoration:underline;  
}  
  
#teaser {  
	width:1024px;  
	margin-left:58px;  
	margin-top:24px;  
}  
  
#teaserleft {  
	width:272px;  
	height:116px;  
	margin-left:0px;  
	margin-top:0px;  
	background-color:#f5821f;  
	-moz-border-radius:10px;  
	-khtml-border-radius:10px;  
	float:left;  
}  
  
#indexteaserlefttxt {  
	margin-left:20px;  
	margin-right:20px;  
	float:left;  
}  
  
#companyteaserlefttxt {  
	margin-left:20px;  
	margin-right:20px;  
	float:left;  
}  
  
#arrow {  
	margin-top:-24px;  
	margin-left:60px;  
}  
  
#teasercenter {  
	width:273px;  
	height:116px;  
	margin-left:44px;  
	margin-top:0px;  
	background-color:#f5821f;  
	-moz-border-radius:10px;  
	-khtml-border-radius:10px;  
	float:left;  
}  
  
#indexteasercentertxt {  
	margin-left:20px;  
	margin-right:20px;  
	float:left;  
}  
  
#indexteasercentertxt a {  
	text-decoration:none;  
	color:#FFFFFF;  
	text-decoration:underline;	  
}  
  
#companyteasercentertxt {  
	margin-left:20px;  
	margin-right:20px;  
	float:left;  
}  
  
#companyteasercentertxt a {  
	text-decoration:none;  
	color:#FFFFFF;  
	text-decoration:underline;	  
}  
  
#teaserright {  
	width:272px;  
	height:116px;  
	margin-left:44px;  
	margin-top:0px;  
	background-color:#f5821f;  
	-moz-border-radius:10px;  
	-khtml-border-radius:10px;;  
	float:left;  
}  
  
#indexteaserrighttxt {  
	margin-left:20px;  
	margin-right:20px;  
	text-decoration:none;  
}  
  
#indexteaserrighttxt a {  
	text-decoration:none;  
	color:#FFFFFF;  
	text-decoration:underline;	  
}  
  
#companyteaserrighttxt {  
	margin-left:20px;  
	margin-right:20px;  
}  
  
#companyteaserrighttxt a {  
	text-decoration:none;  
	color:#FFFFFF;  
	text-decoration:underline;	  
}  
  
#footer {  
	width:1024px;  
	margin-left:58px;  
}  
  
#language {  
	width:136px;  
	height:19px;  
	margin-top:19px;;  
	background-image:url(pics/language.png);  
	background-repeat:no-repeat;  
	float:left;  
}  
  
#stuff {  
	margin-left:201px;  
	margin-top:21px;  
}  
  
ul#differentthings {  
	margin: 0px;  
	padding: 0px;  
	padding-left:0px;  
	margin-left:420px;  
}  
  
#differentthings li {  
	display: block;  
	float: left;  
	margin-top:20px;  
}  
  
#differentthings li a{  
	margin-top: 0px;  
	padding-top: 0px;  
	margin-right: 30px;  
	display: block;  
	height: 27px;  
	font-family: verdana;  
	font-size:12px;  
	color: #020202;  
	text-decoration: none;  
}  
  
#companycontainer {  
	margin:auto;  
	width:1024px;  
}  
  
#company #company_menu {  
	background-color: #f38628;  
	background-image: none;  
}