Profundidad entre dos DIV

kiko's · #1 (**permalink**) 22/05/2011, 12:19

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.

asinox · #2 (**permalink**) 22/05/2011, 15:32

para aplicar z-index debes darle un tipo de posicion al elemento:

Código CSS:

Ver original.HeaderCenter{
    width: 1000px;
    height: 510px;
    background:url(img/header.png);
    margin: 0 auto;
    z-index: 2;
    border: solid red;
        position:relative; //por ejemplo
}

kiko's · #3 (**permalink**) 23/05/2011, 03:18

Hola asinox, gracias por contestar.

No, ya probé y no funcionó. Lo que sí funciona es poner "position:absolute", pero entonces ese estilo pierde algunas propiedades, como por ejemplo dejar de estar centrado en la página para alinearse automáticamente a la izquierda :(

A ver si encontramos el fallo que me estoy volviendo loco xD

Saludos!

cristian_cena · #4 (**permalink**) 23/05/2011, 22:30

kiko, asinox tiene razón, pero se le paso un detalle. Y es que para que z-index funcione se deben cumplir dos condiciones.
1 que las capas a apilarse tengan posicionamiento distinto de static.
2 que las capas a apilarse sean hermanas entre sí.

Observo que HeaderConcursoLeft es nieto de HeaderCenter, es por esto que por mas que das posición absoluta z-index no funciona.

Lo que debes hacer es tocar tus etiquetas de modo que te quede algo así:

Código HTML:

Ver original... los hermanos sean unidos porque esa es la ley primera. (Martin Fierro) :) ...
<div class="HeaderCenter">
... contenido anidado, hijos, nietos, etc ...
</div>
<div class="HeaderConcursoLeft ">
... contenido anidado, hijos, nietos, etc ...
</div>

y luego das un valor mayor de z-index a la capa que quieres que este por arriba.

Acá puedes ver un ejemplo que hice para ti: http://jsfiddle.net/cristian_cena/EFuJE/

kiko's · #5 (**permalink**) 24/05/2011, 06:19

Gracias cristian_cena por tu respueta.

Me había imaginado que tendrían que ser hermanos, incluso antes de escribir este tema había hecho la prueba y funcionó, pero me surgió un problema: el HeaderCenter debía tener posición absoluta para que la profundidad entre capas me funcionara y, entonces, esto me provocaba que esa capa dejara de estar centrada. Pero no caí en la cuenta que poniendo:
left: 50%;
margin-left: -500px;
podría volver a alinear esa capa como quería.

Así que tema solucionado. Es un gusto aprender :D

Gracias!

cristian_cena · #6 (**permalink**) 24/05/2011, 09:15

Un gusto que te haya servido kiko.
Otra cosa: Respecto de que cuando das position absolute tu capa pasa a depender de body y con ello pierdes el centrado. También puedes solucionar esto muy fácil.

Si ves en el ejemplo #padre tiene position:relative; esto quiere decir que ahora la posición o distancia de sus hijos que estan posicionados en absoluto dependen del eje de coordenadas 0,0 (esquina superior izquierda) de la capa #padre. Por la razón de que un elemento con posición absoluta va a buscar su ancestro inmediato relativo (si no encuentra el padre, buscara al abuelo y asi sucesivamente hasta llegar a body) y si no lo encuentra pues tomará a body como referencia para generar sus cotas.
Esto te permite olvidarte de ese truco de left y margin-left ya que puedes especificar distancia en px.

Otro problema que te puede surgir es que quieras desplazar las capas absolutas por fuera del contenedor relativo(en nuestro ejemplo #padre). Aquí deberás jugar con la propiedad overflow, dandole el valor "visible" en lugar de "hidden" si es que lo tiene.

Espero te sirva, saludos y suerte.

kiko's · #7 (**permalink**) 24/05/2011, 14:20

Hola cristian_cena,

Creo haber entendido tu mensaje, pero a mi no me funciona lo centrar la capa sin esa "receta" que apliqué.

Eso sí, un problema grave que me ha surgido:
.HeaderConcursoMarco{

width: 526px;

height: 290px;

background:url(img/foto.jpg);

z-index: 2;

position:relative;

top: 165px;

left: 190px;

}

He añadido los atributos "top" y "left". Con el "top" no tengo problemas... pero con el "left" sí, pues cuando cambio la resolución de la página ya no me coinciden las capas.

Os enseño la web pues creo que ayudará a resolver mi problema:
http://ventix.es/meteobaleares/

¿Ven esa imagen con unos árboles de fondo? Pues esa imagen es la que quiero alinear con el marco de la capa superior(es decir, con su capa hermana "HeaderCenter"). Con mi resolución de pantalla (1280x800) lógicamente se ve bien (pues la adapté en base a mi pantalla) pero con resoluciones horizontales diferentes ya no coincide.

¿Alguna técnica para solucionar esto?

Y perdonar mi torpeza, pero estoy iniciandome en las tecnologías web de manera autodidacta.

Saludos.

cristian_cena · #8 (**permalink**) 24/05/2011, 21:38

Hola kiko: No hay de que pedir perdón, acá todos estamos aprendiendo.

Observo que tienes a .HeaderMiddle y a .HeaderConcursoMarco como hermanos, ambos hijos de .HeaderCenter. Aquí el error.

.HeaderCenter tiene position:absolute; por lo tanto no te sirve ya que ahora la posición (cotas o distancia) de .HeaderConcursoMarco pasa a depender de .Header que si bien esta en relativo tiene un width:100% y no tiene margin:0 auto; por lo tanto tampoco te sirve.
¿Recuerdas que para que sirva de contenedor tenía que tener position:relative;?
¿se comprende mejor ahora?

Prueba integrar esta lógica en tu código:

Código HTML:

Ver original<div class="HeaderCenter">
<!-- hermanos start -->
<div class="HeaderLogo"/></div>
<div class="HeaderMenu"></div>
<div class="HeaderMiddle"></div>
<div class="HeaderBottom"></div>
<div class="HeaderConcursoMarco"/></div> <!-- lo ponemos como hermano para que trabaje el z-index-->
<!-- hermanos end-->
</div>

Código CSS:

Ver original.HeaderCenter{position:relative; margin:0 auto; width:...px;} /*Al padre lo posicionamos en relativo para que sirva de contenedor de los hijos absolutos*/
.HeaderMiddle, .HeaderConcursoMarco{position:absolute;}
.HeaderMiddle{z-index:1; top: ...px; left: ...px;}
.HeaderConcursoMarco{z-index:0; top: ...px; left: ...px;}

Un abrazo.

p/d: me parece en este caso puntual no muy acertado el camino que estas tomando con ese slide.
¿No sería mejor trabajar las imagenes con bordes redondeados en photoshop (si es que no te convence css3 y border-radius aún, por ie digo) y uses algun slide como el nivoslider con efecto fade para la transición de imagenes?
Solo un punto de vista, luego lo haces como creas mejor claro.

kiko's · #9 (**permalink**) 25/05/2011, 02:53

Hola

La verdad es que me estoy complicando mucho la vida por los bordes redondeados. Con lo sencillo que hubiera sido poner un borde rectangular. Tampoco había caido en utilizar código ya creado (mira que me tienen dicho no reinventar la rueda xD). Implementaré el slider de la web que me has pasado, se le ve muy atractivo.

Gracias de nuevo cristian, ha sido un placer :D