Foros del Web » Creando para Internet » CSS »

Alinear texto a la izquierda de imagen

Estas en el tema de Alinear texto a la izquierda de imagen en el foro de CSS en Foros del Web. Buenas! Llevo un tiempo haciendo una web desde 0 mas que nada por practicar y si consigo que un amigo me ayude por el tema ...
  #1 (permalink)  
Antiguo 15/06/2009, 10:40
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 9 años, 9 meses
Puntos: 5
Mensaje Alinear texto a la izquierda de imagen

Buenas!

Llevo un tiempo haciendo una web desde 0 mas que nada por practicar y si consigo que un amigo me ayude por el tema de la seguridad entonces perfecto para publicarla XD

Bueno, el caso es que, a la hora de publicar noticias, se muestra la imagen de la categoria a la izquierda y a la derecha el titulo, fecha, categoria, contenido etc...Vale, hasta aqui bien, haciendo uso de float, la imagen la floto a la izquierda y el resto a la derecha...El problema viene ahora.

Si el texto es corto va de lujo pero, ¿Si ocupa mas lineas que el alto de la imagen? Queda toda una columna a la izquierda en blanco y queda un poco bastante fatal...Entonces mi duda es la siguiente,

¿Como consigo que el texto ocupe todo el ancho si no tiene imagen a la izquierda? Es decir, que se acople al ancho disponible. Siempre seria el mismo DIV, asi que no tengo idea de como hacerlo ya que arriba tiene que seguir estando a la derecha y debajo de la imagen ocupar todo el ancho =\

Os pongo el CSS utilizado. Lo coloco en orden.

Código css:
Ver original
  1. #content { float:left; width:650px; overflow:hidden; }
  2. #topstory { padding: 15px 0 15px 15px; }
  3. #topstory #topstory-img { float: left; width: 250px; }
  4. #topstory #topstory-desc { float: left; padding: 10px; width: 370px; }
  5. #topstory #topstory-title { padding: 10px; }
  6. #topstory h2 { font-size: 140%; }
  7. #topstory p.info { font-size: 85%; }
  8. #topstory #topstory-desc-in { padding-right: 15px; }  
  9. #topstory #topstory-desc-in p { margin-bottom: 15px; } /** Aqui va la descripcion de la noticia **/

Creo que los nombres son bastante descriptivos, si es necesario explicar alguna de las clases pues me avisais y lo explico.

Espero que se entienda la duda y podais ayudarme.
Salu2
  #2 (permalink)  
Antiguo 15/06/2009, 10:54
 
Fecha de Ingreso: junio-2009
Ubicación: Reus, Tarragona, España
Mensajes: 63
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: Alinear texto a la izquierda de imagen

Hola,

creo que por l oque quieres hacer es esto.


Cita:
Seguro que todos habréis visto un periódico digital y os habréis fijado en que suelen colocar el texto de la noticia rodeando una imagen relacionada, por un lado y por debajo como vemos en este artículo. Luego todos os poneis a hacer vuestras páginas y decis, como demonios se hará?, pues es bien sencillo:

Si ponemos este código tal cual aparecerá la imagen y debajo el texto. Si queremos que el texto rodee la imagen, como se suele ver en los periódicos y revistas, entonces utilizaremos la propiedad "float" de CSS. Vamos a ver cómo:
<img src="imagen.png" alt="texto alternativo" style="float: left;" />
Con el float:left incluido en el código de la imagen, esta quedará como en nuestro artículo, a la izquierda y encima del texto, podemos usar float:right para el efecto inverso.
Espero haya sido útil el truquito.

fuente: generacionesweb.com
  #3 (permalink)  
Antiguo 15/06/2009, 15:35
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Alinear texto a la izquierda de imagen

Hola Vendetta
Veo un exceso de divs. Sin ver el resto de tu código casi, casi que me atrevo a usar el término "divitis"

Quizás puedas cambiar el enfoque, y crear para ello una lista (podría ser de definición en este caso):
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>play sobre imagen</title>
  4. <style type="text/css">
  5. * {margin:0; padding:0; position: relative;}
  6. body {background: #e5e5e5;}
  7.   #noticias {
  8.     margin: 0 auto;
  9.     padding: 10px;
  10.     width: 200px;
  11.     background: #444;
  12.     overflow: auto;  
  13.   }
  14.   #noticias h4 {
  15.     background: #900;
  16.     color:#fff;
  17.     display:block;
  18.     font-size:1.2em;
  19.     padding:5px 0;
  20.     text-align:center;
  21.     text-transform:uppercase;
  22.     width: 100%;
  23.     }
  24.   #noticias img {
  25.   float:left;
  26.   margin: 0 5px 5px -6px;
  27.   clear: left;
  28.   }
  29.   #noticias dl {
  30.     display: block;
  31.    }
  32.   #noticias dt {  
  33.     font-size: 1em;
  34.     font-weight: bold;
  35.     text-align: center;
  36.     color: #d07000;
  37.     letter-spacing:0.1em;
  38.     line-height: 1.4em;
  39.     margin-top: 5px;
  40.     clear:both;
  41.     }
  42. #noticias dd {
  43.     color:#6F6F6F;
  44.     font-size:.8em;
  45.     text-align:justify;
  46.     }
  47. </head>
  48. <div id="noticias">
  49. <h4>noticias</h4>
  50. <dl>
  51. <dt>Noticia 1</dt>
  52. <dd><img src="http://www.squashsantiago.com/images/noticia.jpg" title="" alt=""  />El desarrollo de la priemra noticia va aquí, puede ser más o menos larga. Todo lo que necesites añadir hasta que sobrepase la altura de la imagen y se coloque debajo
  53. </dd>
  54. <dt>Noticia 2</dt>
  55. <dd>
  56. <img src="http://www.squashsantiago.com/images/noticia.jpg" title="" alt="" />Un texto pequeñito junto a la imagen
  57. </dd>
  58. </dl>
  59. </div>
  60. </body>
  61. </html>

Modifica para adaptar a tus necesidades.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 16/06/2009, 09:04
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 9 años, 9 meses
Puntos: 5
Respuesta: Alinear texto a la izquierda de imagen

Cita:
Iniciado por kseso? Ver Mensaje
Hola Vendetta
Veo un exceso de divs. Sin ver el resto de tu código casi, casi que me atrevo a usar el término "divitis"
XD En realidad no, lo que pasa que tengo otras tantas cosas en CSS y necesitaba meterlo en DIVs distintos para poder alinear los textos, padding, etc.

Despues de ver el código de Sam_Enfot, he visto cual era mi error. Habia puesto float: right a los textos inicialmente, luego para "arreglarlo" puse float: left y entonces, claro, quedaba todo debajo de la imagen...la solucion era no poner float XD

Gracias a los dos por la ayuda
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 19:17.