Alinear texto a la izquierda de imagen

Vendetta · #1 (**permalink**) 15/06/2009, 09:40

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#content { float:left; width:650px; overflow:hidden; }
#topstory { padding: 15px 0 15px 15px; }
#topstory #topstory-img { float: left; width: 250px; }
#topstory #topstory-desc { float: left; padding: 10px; width: 370px; }
#topstory #topstory-title { padding: 10px; }
#topstory h2 { font-size: 140%; }
#topstory p.info { font-size: 85%; }
#topstory #topstory-desc-in { padding-right: 15px; }  
#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

Sam_Enfot · #2 (**permalink**) 15/06/2009, 09:54

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

kseso? · #3 (**permalink**) 15/06/2009, 14:35

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>play sobre imagen</title>
<style type="text/css">
* {margin:0; padding:0; position: relative;}
body {background: #e5e5e5;}
  #noticias {
    margin: 0 auto;
    padding: 10px;
    width: 200px;
    background: #444;
    overflow: auto;  
  }
  #noticias h4 {
    background: #900;
    color:#fff;
    display:block;
    font-size:1.2em;
    padding:5px 0;
    text-align:center;
    text-transform:uppercase;
    width: 100%;
    } 
  #noticias img {
  float:left;
  margin: 0 5px 5px -6px;
  clear: left;
  }
  #noticias dl {
    display: block;
   }
  #noticias dt {  
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    color: #d07000;
    letter-spacing:0.1em;
    line-height: 1.4em;
    margin-top: 5px;
    clear:both;
    }
#noticias dd {
    color:#6F6F6F;
    font-size:.8em;
    text-align:justify;
    }
</style>
</head>
<body>
<div id="noticias">
<h4>noticias</h4>
<dl>
<dt>Noticia 1</dt>
<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
</dd>
<dt>Noticia 2</dt>
<dd>
<img src="http://www.squashsantiago.com/images/noticia.jpg" title="" alt="" />Un texto pequeñito junto a la imagen
</dd>
</dl>
</div>
</body>
</html>

Modifica para adaptar a tus necesidades.

Un saludo

Vendetta · #4 (**permalink**) 16/06/2009, 08:04

Cita:

Iniciado por kseso?

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