Comunidad de diseño web y desarrollo en internet online

posicionar Avatar (como en taringa)

Citar            
MensajeEscrito el 30 Jul 2010 02:45 am
Hola
queria posicionar mi avatar a la izquierda del comentario, algo asi como en los comentarios de los post de taringa, en donde el avatar esta afuera del cuadro del comentario.
intente haciendo esto:

Código :

.avatar{
   position:relative;
   float:left;
   right:100px;
}

se ubica en el lugar que quiero pero el texto del comentario sigue en el mismo lugar, no se acomoda donde estaria el avatar, es decir, hay un espacio cuadrado (del tamaño del avatar) en donde no hay texto(como si el avatar este ahi). y no se como hacer para que se ajuste!



gracias!!!

Por luco

Claber

110 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 30 Jul 2010 09:06 am
Proporciona el enlace para ver el codigo fuente y colaborarte.

Por elfleat

871 de clabLevel

2 tutoriales

Genero:Masculino  

Miami, USA

firefox
Citar            
MensajeEscrito el 31 Jul 2010 05:22 pm
todavia no la tengo subida. Pero el codigo que imprime el comentario seria este:

Código PHP :

echo '<div class="comentario">';
//visualiza la fecha
echo "<label class='fecha'>".$comentario["fecha"]." ".$comentario["hora"]."</label>".'<div id="avatar"></div>';
//pone el avatar
echo '<img class="avatar" width="60" height="60" src="avatar/'.$avatar.'" alt="avatar"/>';
//pone su nombre con un link al perfil
echo '<h4><a href="perfil.php?usuario='.$comentario["nombre"].'">'.$comentario["nombre"].'</a></h4>';
//pone el comentario
echo '<label class="texto">'.$comentario."</label><br />";
echo '</div>';

espero que me digan que esta mal o si se hace de otra forma
graciass

Por luco

Claber

110 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 31 Jul 2010 05:24 pm
Hay que ver el CSS correspondiente a ésta parte de tu html, sin embargo por lo que veo un simple:

.avatar{float:left; margin:15px;}

En tu CSS deberia funcionar.

Por elfleat

871 de clabLevel

2 tutoriales

Genero:Masculino  

Miami, USA

firefox
Citar            
MensajeEscrito el 31 Jul 2010 05:25 pm
recien me doy cuenta que el .'<div id="avatar"></div>'; esta de mas. Ya los borre pero no era el problema...

Por luco

Claber

110 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 31 Jul 2010 05:32 pm
gracias por responder tan rapido. :o
si pongo solo lo que vos pusiste en el css el avatar me queda adentro del cuadro de comentario, pero yo no quiero eso!.
esta bien donde quedo posicionado el avatar en la imagen que te pase. El problema es como queda el texto del comentario.
ah me olvide de pasar la otra parte del css:

Código :

.comentario{
   background-color:#ffffff;
   padding:15px;
   margin-top:15px;
   margin-bottom:15px;
   border:solid 1px #A4B5C1;
   position:relative;
}
/*.texto{

}*/
.avatar{
   position:relative;
   float:left;
   right:100px;
   margin:15px;
}
.fecha{
   color: #3399bb;
   float:right;
   font-size:10px;
}

Por luco

Claber

110 de clabLevel



Genero:Masculino  

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.