Problema al colocar imagen encima de otra imagen

RGT · #1 (**permalink**) 14/02/2012, 15:12

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!.

xFantaSx · #2 (**permalink**) 14/02/2012, 19:53

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:

RGT · #3 (**permalink**) 14/02/2012, 21:28

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!

xFantaSx · #4 (**permalink**) 14/02/2012, 21:59

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.

RGT · #5 (**permalink**) 14/02/2012, 22:35

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:?

xFantaSx · #6 (**permalink**) 14/02/2012, 22:37

pasa el link de tu web para mirar lo que pasa.

RGT · #7 (**permalink**) 14/02/2012, 22:40

Aqui el codigo que tengo actualmente:

Código PHP:

Ver original<div id="disco-aleatorio">
  
                <?php
                    query_posts(array('orderby' => 'rand', 'showposts' => 1));
                    if (have_posts()) :
                    while (have_posts()) : the_post();
                ?>
                
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('medium'); ?></a>
                
                <div class="popular">POPULAR!</div>
                
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title() ?>"><?php the_title(); ?></a></h2>
 
        <?php endwhile; endif; ?>
 
        <?php wp_reset_query(); ?>
        
  </div>

Código CSS:

Ver original#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;
}
 
.popular {
    position:absolute;
    top:2px;
    left:2px;
    background-color:#a42c2c;
    color:#FFF;
    padding:5px;
    font-weight:bold;
    letter-spacing: 1px;
        -webkit-border-bottom-right-radius: 2px;
        -moz-border-radius-bottomright: 2px;
        border-bottom-right-radius: 2px;
}

Que tengo mal?

mira el espaciote que tengo:
http://oi43.tinypic.com/8wwm6c.jpg

xFantaSx · #8 (**permalink**) 15/02/2012, 11:51

Como te dije es mejor ver directamente tu web, ya que con el codigo incompleto no se puede hacer mucho.