Foros del Web » Creando para Internet » CSS »

Alinear Imagen Con Texto Aparte

Estas en el tema de Alinear Imagen Con Texto Aparte en el foro de CSS en Foros del Web. Hola, quería preguntar a la comunidad, a cualquier conocedor de CSS, si me pueden ayudar con un tipo de alineación que quiero de imagen. Creando ...
  #1 (permalink)  
Antiguo 09/07/2010, 03:57
Avatar de Argosth  
Fecha de Ingreso: enero-2010
Ubicación: Zaragoza
Mensajes: 19
Antigüedad: 7 años, 10 meses
Puntos: 0
Alinear Imagen Con Texto Aparte

Hola, quería preguntar a la comunidad, a cualquier conocedor de CSS, si me pueden ayudar con un tipo de alineación que quiero de imagen.

Creando una página web, quiero poner las imágenes como si fuera un libro, que la imagen va a la derecha o izquierda, pero que el texto siempre vaya delante o detrás de la imagen.

Bien, hasta aquí lo tengo solucionado con el atributo float: right/left.

Pero el problema es que las imágenes siempre son cuadradas, aunque tengan fondo transparente, y el texto pasa a la siguiente línea en forma justificada, y lo que quiero es que la imagen esté alineada sobre el texto, es decir, incluso que el texto pase por debajo o por encima de ella, que no estén con el código.

Es algo que para un experto es fácil, pero no he encontrado solución, espero que alguien me pueda ayudar.
  #2 (permalink)  
Antiguo 09/07/2010, 10:26
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Alinear Imagen Con Texto Aparte

Si no entiendo mal cuando el texto pasa a la siguiente línea lo hace por debajo de la imagen no?

De ser así lo solucionas haciendo lo siguiente:
1 un contenedor padre <div id="padre"></div>
2 un contenedor para la imagen <div id="imagen"></div>
3 un contenedor para el texto <div id="texto"></div>

tu html quedaría así:
Código HTML:
<div id="padre">
<div id="imagen"><img/></div>
<div id="texto"><p>texto ...</p></div>
</div> 
ahora los estilos:
Código:
*{margin:0; padding:0;}
#padre{
width: /*a*/ ;
/*height: el alto que tu quieras, puedes definirlo o no;*/
overflow:hidden; /* para que funcione bien el flotado*/
}
#imagen, #texto {float:left;}
#imagen{
width: /*b0*/ ;
border: /*b1*/;
padding: /*b2*/;
margin: /*b3*/;

/*height: el alto que tu quieras, puedes definirlo o no;*/
}

#texto{
width: /*c0*/ ;
border: /*c1*/;
padding: /*c2*/;
margin: /*c3*/;

/*height: el alto que tu quieras, puedes definirlo o no;*/
}
explico:
El ancho total de una caja no es lo mismo que el width.
Ancho total = width + margin+ padding+ border
width = ancho del contenido de la caja.

Entonces a = b0+b1+b2+b3+c0+c1+c2+c3.
Puede que tus elementos flotados, sumados sean de menor ancho total que el contenedor padre, ahi no habría problemas. El problema ocurre cuando los anchos totales de los hijos supera al width del padre.

Si ya definiste el height verás como quedó tu maqueta, si en cambio no lo has definido entonces carga la imagen y el texto dentro de sus cajas correspondientes y recién ahí empezarás a verlo, pues tu width y tu height todavía son igual a cero.

Espero te sirva, siempre es mejor que nos muestres una imagen del problema o un codigo, asi las respuestas son más claras. Un saludo!

Etiquetas: alinear, aportes
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 17:36.