Foros del Web » Creando para Internet » CSS »

Problema al colocar imagen encima de otra imagen

Estas en el tema de Problema al colocar imagen encima de otra imagen en el foro de CSS en Foros del Web. Código PHP:                 <div class="featured"><img src="http://oi43.tinypic.com/148k6ld.jpg" alt="Logo" width="113" height="113" /></div>                 <a href=" <?php the_permalink ();  ?> " title=" <?php the_title ();  ?> "> <?php the_post_thumbnail ( 'medium' );  ?> </a>                                  <h2><a href=" <?php the_permalink ();  ?> " title=" <?php the_title ...
  #1 (permalink)  
Antiguo 14/02/2012, 14:12
RGT
Usuario no validado
 
Fecha de Ingreso: noviembre-2008
Mensajes: 505
Antigüedad: 10 años, 9 meses
Puntos: 5
Problema al colocar imagen encima de otra imagen

Código PHP:
                <div class="featured"><img src="http://oi43.tinypic.com/148k6ld.jpg" alt="Logo" width="113" height="113" /></div>
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('medium'); ?></a>
                
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title() ?>"><?php the_title(); ?></a></h2>
Código:
#disco-aleatorio {
	float:right;
	background-color:#FFF;
	border: 1px #ccc solid;
	padding: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	height:140px;
	position: relative;
}

#disco-aleatorio img {
	width:236px;
	height:140px;
}

#disco-aleatorio a {
	color: white;
	font-weight: bold;
	text-decoration: none;
}
			
#disco-aleatorio a:hover {
	text-decoration: underline;
	color: white;
}
				
#disco-aleatorio:hover {
	background-color:#2fb6f6;
}

#disco-aleatorio h2 {
	position: absolute;
	right: 2px;
	bottom: 2px;
	background: rgba(0,0,0,0.6);
	width: 226px;
	padding: 5px;position: absolute;
}

#disco-aleatorio .featured {
	position: absolute;
	display: inline-block;

	z-index:3;
	top:0;
	left:-6px;
	height:113px;
	width:113px;
}




Hola, como puede ver, no logro poner correctamente la imagen MEGA DISCO! encima de la foto del post.

Que tengo mal?

Saludos!.
  #2 (permalink)  
Antiguo 14/02/2012, 18:53
Avatar de xFantaSx  
Fecha de Ingreso: agosto-2011
Mensajes: 243
Antigüedad: 8 años, 1 mes
Puntos: 20
Respuesta: Problema al colocar imagen encima de otra imagen

Hola, pues lo que pasa es que debes meter la imágen que va debajo en otro div.
por ejemplo, metes lo otro en un featured2.
Cita:
<body>
<div class="featured"><img src="http://oi43.tinypic.com/148k6ld.jpg" alt="Logo" width="113" height="113" /></div>
<div class="featured2">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('medium'); ?></a>

<h2><a href="<?php the_permalink(); ?>" title="<?php the_title() ?>"><?php the_title(); ?></a></h2>
</div>
y las reglas las dejas igual.

Cita:
.featured {
position: absolute;
display: inline;
z-index:3;
top:0;
left:-6px;
height:113px;
width:113px;

}
.featured2 {
position: absolute;
display: inline;
z-index:-1;
top:0px;
left:-6px;
height:113px;
width:113px;
border:solid 1px black;
background-color:black;
}

ahí he cambiado el background y el border para cerciorarme que si andaba correcto.
el resultado que me dio es este:
__________________
Aprende cómo ganar dinero en internet...o ganar dinero rapido?
  #3 (permalink)  
Antiguo 14/02/2012, 20:28
RGT
Usuario no validado
 
Fecha de Ingreso: noviembre-2008
Mensajes: 505
Antigüedad: 10 años, 9 meses
Puntos: 5
Respuesta: Problema al colocar imagen encima de otra imagen

Hola, perdoname, no publique mi codigo completo, tengo lo que dices en un div mira:

Código PHP:
  <div id="disco-aleatorio">
  

                <div class="featured"><img src="http://oi43.tinypic.com/148k6ld.jpg" alt="Logo" width="113" height="113" /></div>

                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('medium'); ?></a>
                
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title() ?>"><?php the_title(); ?></a></h2>


        <?php endwhile; endif; ?>

        <?php wp_reset_query(); ?>
        
  </div>
Todavia no se muestra correctamente, no se que hacer!
  #4 (permalink)  
Antiguo 14/02/2012, 20:59
Avatar de xFantaSx  
Fecha de Ingreso: agosto-2011
Mensajes: 243
Antigüedad: 8 años, 1 mes
Puntos: 20
Respuesta: Problema al colocar imagen encima de otra imagen

a lo que me refiero es que metas lo que sigue en otro div.
Cita:
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('medium'); ?></a>

<h2><a href="<?php the_permalink(); ?>" title="<?php the_title() ?>"><?php the_title(); ?></a></h2>
Eso mételo en otro div, con las mismas propiedades del otro.
__________________
Aprende cómo ganar dinero en internet...o ganar dinero rapido?
  #5 (permalink)  
Antiguo 14/02/2012, 21:35
RGT
Usuario no validado
 
Fecha de Ingreso: noviembre-2008
Mensajes: 505
Antigüedad: 10 años, 9 meses
Puntos: 5
Respuesta: Problema al colocar imagen encima de otra imagen

No me funciona pero, de todos modos, lo hice poniendolo en texto con fondo blanco en la esquina del thumbnail.

Otra cosa hermano, ese codigo completo me genera en el footer un gran espacio.

Un espacio entre el final de la web y el footer.

Cuando quito el codigo no hay ningun espacio, la web se muestra normal.

Que tengo mal en el codigo css, use mal algun position:?
  #6 (permalink)  
Antiguo 14/02/2012, 21:37
Avatar de xFantaSx  
Fecha de Ingreso: agosto-2011
Mensajes: 243
Antigüedad: 8 años, 1 mes
Puntos: 20
Respuesta: Problema al colocar imagen encima de otra imagen

pasa el link de tu web para mirar lo que pasa.
__________________
Aprende cómo ganar dinero en internet...o ganar dinero rapido?
  #7 (permalink)  
Antiguo 14/02/2012, 21:40
RGT
Usuario no validado
 
Fecha de Ingreso: noviembre-2008
Mensajes: 505
Antigüedad: 10 años, 9 meses
Puntos: 5
Respuesta: Problema al colocar imagen encima de otra imagen

Aqui el codigo que tengo actualmente:

Código PHP:
Ver original
  1. <div id="disco-aleatorio">
  2.  
  3.                 <?php
  4.                     query_posts(array('orderby' => 'rand', 'showposts' => 1));
  5.                     if (have_posts()) :
  6.                     while (have_posts()) : the_post();
  7.                 ?>
  8.                
  9.                 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('medium'); ?></a>
  10.                
  11.                 <div class="popular">POPULAR!</div>
  12.                
  13.                 <h2><a href="<?php the_permalink(); ?>" title="<?php the_title() ?>"><?php the_title(); ?></a></h2>
  14.  
  15.         <?php endwhile; endif; ?>
  16.  
  17.         <?php wp_reset_query(); ?>
  18.        
  19.   </div>

Código CSS:
Ver original
  1. #disco-aleatorio {
  2.     float:right;
  3.     background-color:#FFF;
  4.     border: 1px #ccc solid;
  5.     padding: 2px;
  6.     -webkit-border-radius: 2px;
  7.     -moz-border-radius: 2px;
  8.     border-radius: 2px;
  9.     height:140px;
  10.     position: relative;
  11. }
  12.  
  13. #disco-aleatorio img {
  14.     width:236px;
  15.     height:140px;
  16. }
  17.  
  18. #disco-aleatorio a {
  19.     color: white;
  20.     font-weight: bold;
  21.     text-decoration: none;
  22. }
  23.            
  24. #disco-aleatorio a:hover {
  25.     text-decoration: underline;
  26.     color: white;
  27. }
  28.                
  29. #disco-aleatorio:hover {
  30.     background-color:#2fb6f6;
  31. }
  32.  
  33. #disco-aleatorio h2 {
  34.     position: absolute;
  35.     right: 2px;
  36.     bottom: 2px;
  37.     background: rgba(0,0,0,0.6);
  38.     width: 226px;
  39.     padding: 5px;position: absolute;
  40. }
  41.  
  42. .popular {
  43.     position:absolute;
  44.     top:2px;
  45.     left:2px;
  46.     background-color:#a42c2c;
  47.     color:#FFF;
  48.     padding:5px;
  49.     font-weight:bold;
  50.     letter-spacing: 1px;
  51.         -webkit-border-bottom-right-radius: 2px;
  52.         -moz-border-radius-bottomright: 2px;
  53.         border-bottom-right-radius: 2px;
  54. }

Que tengo mal?

mira el espaciote que tengo:
http://oi43.tinypic.com/8wwm6c.jpg
  #8 (permalink)  
Antiguo 15/02/2012, 10:51
Avatar de xFantaSx  
Fecha de Ingreso: agosto-2011
Mensajes: 243
Antigüedad: 8 años, 1 mes
Puntos: 20
Respuesta: Problema al colocar imagen encima de otra imagen

Como te dije es mejor ver directamente tu web, ya que con el codigo incompleto no se puede hacer mucho.
__________________
Aprende cómo ganar dinero en internet...o ganar dinero rapido?

Etiquetas: encima, hover, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:10.