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;
}