Buenas tardes amigos,
Tengo el siguiente código CSS:
Código:
body, html {
margin: 0;
}
.Header{
width: 100%;
height: 510px;
background:url(img/header_background.png);
background-repeat: repeat-x;
text-align:center;
}
.HeaderCenter{
width: 1000px;
height: 510px;
background:url(img/header.png);
margin: 0 auto;
z-index: 2;
border: solid red;
}
.HeaderTop{
width: 1000px;
height: 100 px;
border: solid #0F6;
margin: 0 auto;
}
.HeaderLogo{
width: 255px;
height: 116px;
float: left;
background: url(img/meteoIllessinfondo_AZUL.png);
background-repeat: no-repeat;
margin-top: 20px;
}
.HeaderMenu{
width: 700px;
float: left;
display: table;
}
.HeaderMenuElement{
width: 100px;
height: 47px;
text-align:center;
display: table-cell;
vertical-align: middle;
position:relative;
font-family: Verdana, Geneva, sans-serif;
font-size:13px;
font-weight:bold;
color:#FFF;
}
.HeaderMenuElement:hover{
background:url(img/menuButtonHover.png);
color: #333333;
}
.HeaderMiddle{
float: left;
width: 100%;
height: 300px;
margin-top: 20px;
}
.HeaderConcurso{
width: 1000px;
margin:0 auto;
}
.HeaderConcursoLeft{
width: 300px;
height: 300px;
background-image:url(img/foto.jpg);
float:left;
border: solid #FF0;
z-index: 1;
}
.HeaderConcursoRight{
width: 410px;
height: 300px;
float:right;
}
.HeaderConcursoText{
width: 410px;
height: 180px;
font-family: 'Terminal Dosis Light' , serif;
font-size:18px;
color:#FFF;
}
.HeaderConcursoButtonVerMas{
width: 410px;
}
.ButtonVerMas{
width: 210px;
height: 83px;
background:url(img/buttonVerMas.png);
margin: 10px 30px;
}
.ButtonVerMas:Hover{
background:url(img/buttonVerMasHover.png);
}
.HeaderBottom{
float: left;
width: 100%;
height: 20px;
text-align: center;
margin-top: 20px;
}
.HeaderBottomButton{
width:60px;
margin: 0 auto;
}
.HeaderBottomButtonElement{
width:20px;
height:13px;
background-image:url(img/buttonChangeImage.png);
background-repeat:no-repeat;
float:left;
}
.HeaderBottomButtonElement:Hover{
background-image:url(img/buttonChangeImageHover.png);
}
Y el código HTML:
Código HTML:
<body>
<div class="Header">
<div class="HeaderCenter">
<div class="HeaderLogo"></div>
<div class="HeaderMenu">
<div class="HeaderMenuElement">Observación</div>
<div class="HeaderMenuElement">Climatología</div>
<div class="HeaderMenuElement">Previsión marítima</div>
<div class="HeaderMenuElement">Modelos</div>
<div class="HeaderMenuElement">Estaciones</div>
<div class="HeaderMenuElement">Webcams</div>
<div class="HeaderMenuElement">Foro</div>
</div>
<div class="HeaderMiddle">
<div class="HeaderConcursoLeft"></div>
<div class="HeaderConcursoRight">
<div class="HeaderConcursoText"><b>Concurso: Floración de almendros</b><br />
<br />
El ganador es Jordi Puigsegur. Anímate y participa en el ñpróximo concurso. </div>
<div class="HeaderConcursoButtonVerMas">
<div class="ButtonVerMas"></div>
</div>
</div>
</div>
<div class="HeaderBottom">
<div class="HeaderBottomButton">
<div class="HeaderBottomButtonElement"></div>
<div class="HeaderBottomButtonElement"></div>
<div class="HeaderBottomButtonElement"></div>
</div>
</div>
</div>
</div>
</body>
</html> El caso es que me gustaría que el div con clase "HeaderCenter" esté por encima del div con clase "HeaderConcursoLeft", pero no lo consigo. He probado con la propiedad "z-index" pero no me funciona.
Gracias por su ayuda.