¿Cómo conseguir esto?

Raulmmmm · #1 (**permalink**) 11/07/2010, 07:41

Antes de irme a ver la final del Mundial (¡vamos España!) he estado probando a hacer una cosa. Como una imagen vale más que mil palabras, allá va.
Esto es lo que tengo en mi web:

Y esto es lo que me gustaría tener:

Creo que con la imagen queda bastante claro. Lo que quiero conseguir es que el título no empuje a la imagen hacia abajo, sino que se ponga a su lado. El código, de momento, es este:

Código HTML:

Ver original<div class="fle">
<h3><a href="proyecto.php?id=292">Hacer una captura de pantalla de una página web completa con Screengrab (Firefox)</a></h3>
<div class="foto">
<a href="proyecto.php?id=292"><img src="i/thumbs/capturarpaginawebcompleta.jpg" alt="Hacer una captura de pantalla de una página web completa con Screengrab (Firefox)" title="Hacer una captura de pantalla de una página web completa con Screengrab (Firefox)" /></a>
</div>
<div class="detalles">
Breve explicación.
<br />
<span class="floja">Hecho por Raulmmmm</span>
</div>
</div>

Código CSS:

Ver original.fle, .curso { float: left; width: 232px; height: 135px; overflow: hidden; background: #d7e9f3; padding: 2px; margin: 0 3px 3px 0;}
.fle .foto { position: relative; float: left; width: 112px; height: 112px; background: #fff; padding: 2px; border: 1px solid #999;}
.fle .foto img { max-height: 112px; position: absolute; clip:rect(0px,112px,112px,0px);}

Calizman · #2 (**permalink**) 11/07/2010, 11:41

Saludos!

Has intentado quitar el position: absolute y ponerle un float: left?

Hasta Luego!

Raulmmmm · #3 (**permalink**) 12/07/2010, 08:06

¿Te refieres al position:absolute de .fle .foto img? No sirve de nada, pues la imagen está dentro del div .foto. Aun así, gracias por tu sugerencia

.

Calizman · #4 (**permalink**) 12/07/2010, 11:31

Saludos!

Me refiero al position: absolute de .foto img! Bueno, con eso debería arreglarse...

No tienes una url para verlo en linea?

Hasta Luego!

jomaruro · #5 (**permalink**) 12/07/2010, 15:34

Hola:

La URL está en su firma, Por ti mismo.

Saludos.

XxflezhaxX · #6 (**permalink**) 13/07/2010, 11:43

puedes tambien usar las tablas.

mira aqui te dejo un preview de una imagen con el texto alineado a la izquierda de la imagen en una tabla con borde transparente.

este es el codigo HTML:

Código HTML:

Ver original<html>
<head>
</head>
 
<body>
 
<table border="0">
<tr>
<td width="200px">
Hacer una captura de pantalla
<img src="coadro.png" widht="50" height="50" align="left"/ >de una página web completa con Screengrab (Firefox)
</td></tr></table>
</body>
</html>

saludos!!

y aqui como se ve:
http://html09.freeiz.com/display.html

TD: por cierto no use CSS es puro code HTML como puedes ver.
igual te puedo ayudar, mandame MP aunque esto es facil =D

Raulmmmm · #7 (**permalink**) 14/07/2010, 03:03

Muchas gracias a todos

. Pero aún no acaba de salir, porque aunque tu código, XxflezhaxX, funciona perfectamente, el problema es que no sé cómo de largo es el título, así que no sé por dónde tengo que separar y poner una parte arriba y otra a la izquierda.

Espera, esa puede ser la solución XD. Seguro que se me ocurre algo con PHP, contando caracteres y palabras o algo así. Voy a probar y luego os cuento

.

XxflezhaxX · #8 (**permalink**) 14/07/2010, 10:04

Bueno no es tan complicado como lo piensas!!
puedes abreviar el titulo, poner ..., entre otras cosas.
ademas yo ahi estoy dando unas medidas a mis cnvenencias, tu puedes poner las medidas mas grandes.

saludos!!

jomaruro · #9 (**permalink**) 15/07/2010, 13:48

Hola:

Prueba esto:

Código HTML:

Ver original<span class="titulo">
<span class="foto">
<img .... />
Lorem ipsum....
</span>
</span>

Código CSS:

Ver original.titulo {float:left; ...}
.foto {float:left; ...}

Saludos.

Raulmmmm · #10 (**permalink**) 15/07/2010, 15:34

Muchísimas gracias, jomaruro, esa es la solución. No es perfecta (si el título es larguíiiiisiomo aparece en dos líneas y la tercera ya se pone a su lado), pero es mucho mejor que lo que había antes. Ya lo puedes ver aplicado en mi web.