Foros del Web » Creando para Internet » CSS »

Problema con texto e imágenes

Estas en el tema de Problema con texto e imágenes en el foro de CSS en Foros del Web. Tengo un div contenedor, a la izquierda una imagen, en el centro un texto, y a la derecha otra imagen. Cada imagen está en un ...
  #1 (permalink)  
Antiguo 05/03/2010, 05:17
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 8 años, 5 meses
Puntos: 2
Pregunta Problema con texto e imágenes

Tengo un div contenedor, a la izquierda una imagen, en el centro un texto, y a la derecha otra imagen. Cada imagen está en un div aparte, por lo que el texto está directamente en el contenedor, ¿cómo puedo poner cada imagen a un lado y el texto en el centro?

La imagen izquierda está bien con respecto al texto, pero la imagen derecha se me va para abajo, ocupando el texto todo el div. No sé qué atributos añadirle al div de la imagen derecha para que no se mueva y el texto no esté por encima no por debajo.

Gracias
  #2 (permalink)  
Antiguo 05/03/2010, 07:25
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: Problema con texto e imágenes

Mira si te sirve así:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-Type" content= "text/html; charset=utf-8" />
  6.         <title>titulo</title>
  7.         <style type="text/css">
  8.         <!--
  9.         .articulo {
  10.             width: 600px;
  11.             margin: 1em auto;
  12.         }
  13.        
  14. /*El siguiente bloque es para simular el espacio de las imágenes, no es necesario con imágenes reales*/
  15.         .articulo img {
  16.             width: 140px;
  17.             height: 200px;
  18.             background-color: #ccc;
  19.             display: block;
  20.         }
  21.        
  22.         .articulo p {margin: 0 160px;}
  23.         .izquierda {float: left;}
  24.         .derecha {float: right;}
  25.         -->
  26.         </style>
  27.     </head>
  28.     <body>
  29.         <div class="articulo">
  30.             <img class="izquierda" alt="" src="imagen.jpg" />
  31.             <img class="derecha" alt="" src="imagen.jpg" />
  32.            
  33.             <p>In tincidunt ultricies mi. Praesent vestibulum
  34.             risus non urna commodo sit amet viverra urna pretium.
  35.             Donec massa ipsum, mollis eu accumsan feugiat, porttitor
  36.             ut purus. Suspendisse at eros eget odio dapibus mattis.
  37.             Pellentesque habitant morbi tristique senectus et netus
  38.             et malesuada fames ac turpis egestas. Donec eu sapien ipsum.
  39.             Donec sed nulla et felis tempor lacinia. Suspendisse et neque
  40.             non metus euismod porta. Quisque at quam ipsum. Sed vulputate,
  41.             tortor ultrices vehicula posuere, risus felis mollis augue,
  42.             quis malesuada enim orci ut justo. Etiam quis lobortis erat.
  43.             Donec id lectus a leo pharetra mollis id viverra felis.
  44.             Morbi egestas porta dui, a hendrerit elit vestibulum nec.</p>
  45.         </div>
  46.     </body>
  47. </html>

Salud!
  #3 (permalink)  
Antiguo 05/03/2010, 07:40
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema con texto e imágenes

a ver, expresemonos en código:

¿tienes algo asi no?
Código:
<div>
<div></div>/*supongo que a la imagen la inlcuyes con background-image + width y height*/
y aqui tenemos un texto ...
<div></div>
</div>
Yo lo haría de este modo: /*asi tienes otra alternativa a la de Alberto*/

Código:
En tu html:

<div id="contenedor">
<div id="izquierda"></div>/*damos lo supuesto como cierto*/
<div id="centro">y aqui tenemos un texto </div>
<div id="derecha"></div>
</div>

En tu css:

#contenedor { 
overflow:hidden; /*limpiamos los float*/
width:900px; /*ancho total = width+margin+pading+border*/
border:0;
margin:0;
padding:0; 
}
#izquierda {
width:300px;
float:left;
}
#centro {
width:300px;
float:left;
}
#derecha {
width:300px;
float:left; 
}
Bien hasta aqui todo va bien no?
Entonces supongamos que quieres agregarle un padding:10px; a #centro para dar "aire" al texto.
Esto hará que el ancho total de #centro sea de 300px + 20px dado que esta tomando el pading derecho e izquierdo mas el width. ¿La solución? resta tu padding a width, ej:
Código:
#centro {
width:280px;
float:left;
padding:10px;
}
Seguramente notaste que cuando #centro tomó 320px de ancho #contenedor desbordó enviando a #derecha hacia abajo. Esto sucede porque los elementos flotados se van acomodando en donde encuentran lugar, es decir, si no encuentran lugar en una línea se ubican en la línea inmediata siguiente.

Espero te haya servido de algo, un saludo!
  #4 (permalink)  
Antiguo 05/03/2010, 08:53
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Problema con texto e imágenes

Muchas gracias por los dos ejemplos, me han sido de mucha ayuda, pero quiero preguntaros un detalle, supongamos el ejemplo de Alberto, ¿cómo se puede poner el texto de forma que ocupe la posición central y el espacio en blanco que hay debajo de la imagen de la izquierda?

Sería como quitando la clase "articulo p", pero sin que el texto ocupase la parte de abajo de la imagen derecha
  #5 (permalink)  
Antiguo 05/03/2010, 09:05
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: Problema con texto e imágenes

Hola! Sólo tienes que quitarle al párrafo el margen de la parte que quieras o declarando sólo uno de ellos:

Código CSS:
Ver original
  1. /* modo shorthand: Top Right Bottom Left */
  2. .articulo p {margin: 0 160px 0 0;}
  3.  
  4. /* o directamente */
  5. .articulo p {margin-right: 160px;}

Salud!
  #6 (permalink)  
Antiguo 05/03/2010, 09:42
 
Fecha de Ingreso: julio-2009
Mensajes: 103
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Problema con texto e imágenes

Muchas gracias, ya está solucionado

Etiquetas: Ninguno
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:20.