Imagen Encima de otra Imagen - Ayuda

bola6 · 2013-08-03T14:07:18-0500

Buenas, antes que nada no sabía donde postear este tema, ya que lo que quiero hacer es poner una imagen encima de otra, pero no me sale, ya que el código contiene PHP, creo que si no fuera por ello no tendría problema alguno.

Me sale esto:

Me gustaría que quede una cosa así:
Ver el archivo adjunto 16227

El código es el siguiente (Wordpress):

PHP:

<?php $my_query = new WP_Query('category_name=peliculas&showposts=20'); $i=0; ?>
<article class="posts">
<?php while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>
<img src="<?php $values = get_post_custom_values("calidad"); echo $values[0]; ?>" style="position:absolute;" />
<figure>
<?php $values = get_post_custom_values("caratula"); if (isset($values[0])) { ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<img src="<?php $values = get_post_custom_values("caratula"); echo $values[0]; ?>" class="imagenc" width="115px" height="175px" />
</a>
<?php } ?>
</figure>
</article>
<?php $i++; endwhile; ?>

Y el CSS es el siguiente:

Insertar CODE, HTML o PHP:

.posts {
color: #555;
float: left;
position: relative;
}

.posts figure img {
background: none repeat scroll 0 0 #EAF2F4;
border-radius: 6px 6px 6px 6px;
float: left;
margin: 6px;
padding: 3px;
position: relative;
}

.imagenc {
background: none repeat scroll 0 0 #EAF2F4;
border-radius: 6px 6px 6px 6px;
float: left;
height: 160px;
margin: 6px;
padding: 3px;
position: relative;
width: 106px;
}

¿Alguien me ayuda? :ambivalence:

Muchas gracias!

Jonatan Esquivel · 2013-08-03T15:50:52-0500

No especificas como quieres que te quede. Solo veo como NO quieres que te quede.

Con la propiedad z-index de CSS puedes lograr el efecto que deseas.

Te explico como funciona z-index:

Imagina que vas a poner 3 papeles uno sobre otro, el papel del fondo tendrá un zindex de 1, el penúltimo tendrá un zindex de 2 y el ultimo que tendrá un zindex de 3.

Mas info en:Lección 15: Capa sobre capa con la propiedad z-index (Capas) - HTML.net

Para que se logren ver bien estando una imagen sobre otra, puedes usar posicionamiento o un nivel de transparencia con la propiedad opacity.

bola6 · 2013-08-03T15:59:56-0500

Muchas gracias por tu respuesta, lo del z-index ya lo sabía, aunque no lo probé, ahora voy a ver.

Me gustaría que quede una cosa así:

EDIT: Lo probé, y si que me muestra una imagen encima de la otra, pero mi problema está en que sale descuadrado. Si te fijas, cada imagen azul tendría que ir encima de la portada, en cambio a mi me salen ahí a un lado, no sé si el error estará en el código, o le falta algo por agregar.. :ambivalence:

Jonatan Esquivel dijo:
No especificas como quieres que te quede. Solo veo como NO quieres que te quede.

Con la propiedad z-index de CSS puedes lograr el efecto que deseas.

Te explico como funciona z-index:

Imagina que vas a poner 3 papeles uno sobre otro, el papel del fondo tendrá un zindex de 1, el penúltimo tendrá un zindex de 2 y el ultimo que tendrá un zindex de 3.

Mas info en:Lección 15: Capa sobre capa con la propiedad z-index (Capas) - HTML.net

Para que se logren ver bien estando una imagen sobre otra, puedes usar posicionamiento o un nivel de transparencia con la propiedad opacity.

Jonatan Esquivel · 2013-08-03T17:34:22-0500

Entonces si ya te quedo lo de una imagen sobre otra, solo falta agregarle un margen para que se muestre donde quieres.

Para que se mueva a la derecha 100px
margin-left:100px;

Para que se mueva a la izquierda 100px
margin-right:100px;

Para que se mueva hacia abajo 100px
margin-top:100px;

Para que se mueva hacia arriba 100px
margin-bottom:100px;

Si aun no se alinea como quieres agrega números negativos ejemplo:
margin-left:-300px;

bola6 · 2013-08-03T17:45:16-0500

Sí, todo eso también lo sé, pero mi problema por lo que veo no está en colocar una imagen encima de la otra, sino que mi problema es que queden todas alineadas, ya que me forman una escalera.

Así lo tengo ahora:

Estos son los códigos:

PHP:

<?php $my_query = new WP_Query('category_name=peliculas&showposts=20'); $i=0; ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>
<img src="<?php $values = get_post_custom_values("calidad"); echo $values[0]; ?>" style="display:block;position:relative;z-index:2;" />
<?php $values = get_post_custom_values("caratula"); if (isset($values[0])) { ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<img src="<?php $values = get_post_custom_values("caratula"); echo $values[0]; ?>" class="imagenc" alt="<?php the_title(); ?>" width="115px" height="175px" />
</a>
<?php } ?>
<?php $i++; endwhile; ?>

CSS:

Insertar CODE, HTML o PHP:

.imagenc {
background: none repeat scroll 0 0 #EAF2F4;
border-radius: 6px 6px 6px 6px;
float: left;
margin: -30px 6px 6px;
padding: 3px;
position: relative;
z-index: 1;
}

Y no sé como hacer para que me queden alineadas, quizás tenga que agregar algun div de por medio :ambivalence:

Jonatan Esquivel dijo:
---

Jonatan Esquivel · 2013-08-03T18:02:55-0500

Habrá que ver el código ya interpretado para ver porque las imágenes quedan como escalera.

No se si existan otros elementos que "estorben" a las imágenes y por eso se muestren en diferente posición.

Intenta agregando unos 2 <br /> antes de <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"> o antes de <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<img src="<?php $values = get_post_custom_values("caratula"); echo $values[0]; ?>" class="imagenc" alt="<?php the_title(); ?>" width="115px" height="175px" />
</a>

Probablemente la solución sea algo fácil, pero mi especialidad es la programación mas que el diseño, espero que haya otro compañero de Forobeta que pueda aportar mas.

bola6 · 2013-08-03T18:06:48-0500

Nada.. lo probé y lo único que hace es bajar un poco la imagen de la portada, nada más.

A ver si es verdad y alguien puede ayudarme :grumpy:

Muchas gracias! :encouragement:

Jonatan Esquivel dijo:
Habrá que ver el código ya interpretado para ver porque las imágenes quedan como escalera.

No se si existan otros elementos que "estorben" a las imágenes y por eso se muestren en diferente posición.

Intenta agregando unos 2 <br /> antes de <a rel="nofollow" href="<?php the_permalink() ?>" title="<?php the_title(); ?>"> o antes de <a rel="nofollow" href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<img src="<?php $values= get_post_custom_values("caratula"); echo $values[0]; ?>" class="imagenc" alt="<?php the_title(); ?>" width="115px" height="175px" />
</a>

Probablemente la solución sea algo fácil, pero mi especialidad es la programación mas que el diseño, espero que haya otro compañero de Forobeta que pueda aportar mas.

Imagen Encima de otra Imagen - Ayuda

bola6

Jonatan Esquivel

bola6

Jonatan Esquivel

bola6

Jonatan Esquivel

bola6

Temas similares