Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/05/2011, 12:19
kiko's
 
Fecha de Ingreso: julio-2005
Mensajes: 310
Antigüedad: 18 años, 8 meses
Puntos: 36
Profundidad entre dos DIV

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.