Foros del Web » Creando para Internet » CSS »

¿Cómo conseguir esto?

Estas en el tema de ¿Cómo conseguir esto? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/07/2010, 08:41
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Pregunta ¿Cómo conseguir esto?

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
  1. <div class="fle">
  2. <h3><a href="proyecto.php?id=292">Hacer una captura de pantalla de una página web completa con Screengrab (Firefox)</a></h3>
  3. <div class="foto">
  4. <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>
  5. </div>
  6. <div class="detalles">
  7. Breve explicación.
  8. <br />
  9. <span class="floja">Hecho por Raulmmmm</span>
  10. </div>
  11. </div>
Código CSS:
Ver original
  1. .fle, .curso { float: left; width: 232px; height: 135px; overflow: hidden; background: #d7e9f3; padding: 2px; margin: 0 3px 3px 0;}
  2. .fle .foto { position: relative; float: left; width: 112px; height: 112px; background: #fff; padding: 2px; border: 1px solid #999;}
  3. .fle .foto img { max-height: 112px; position: absolute; clip:rect(0px,112px,112px,0px);}
  #2 (permalink)  
Antiguo 11/07/2010, 12:41
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: ¿Cómo conseguir esto?

Saludos!

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

Hasta Luego!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 12/07/2010, 09:06
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Respuesta: ¿Cómo conseguir esto?

¿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 .
  #4 (permalink)  
Antiguo 12/07/2010, 12:31
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: ¿Cómo conseguir esto?

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!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #5 (permalink)  
Antiguo 12/07/2010, 16:34
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ¿Cómo conseguir esto?

Hola:

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

Saludos.

  #6 (permalink)  
Antiguo 13/07/2010, 12:43
 
Fecha de Ingreso: noviembre-2009
Ubicación: Barcelona
Mensajes: 214
Antigüedad: 8 años
Puntos: 6
Respuesta: ¿Cómo conseguir esto?

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
  1. </head>
  2.  
  3.  
  4. <table border="0">
  5. <tr>
  6. <td width="200px">
  7. Hacer una captura de pantalla
  8. <img src="coadro.png" widht="50" height="50" align="left"/ >de una página web completa con Screengrab (Firefox)
  9. </td></tr></table>
  10. </body>
  11. </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

Última edición por XxflezhaxX; 13/07/2010 a las 12:49
  #7 (permalink)  
Antiguo 14/07/2010, 04:03
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Respuesta: ¿Cómo conseguir esto?

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 .
  #8 (permalink)  
Antiguo 14/07/2010, 11:04
 
Fecha de Ingreso: noviembre-2009
Ubicación: Barcelona
Mensajes: 214
Antigüedad: 8 años
Puntos: 6
Respuesta: ¿Cómo conseguir esto?

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!!
  #9 (permalink)  
Antiguo 15/07/2010, 14:48
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ¿Cómo conseguir esto?

Hola:

Prueba esto:

Código HTML:
Ver original
  1. <span class="titulo">
  2. <span class="foto">
  3. <img .... />
  4. Lorem ipsum....
  5. </span>
  6. </span>

Código CSS:
Ver original
  1. .titulo {float:left; ...}
  2. .foto {float:left; ...}

Saludos.

  #10 (permalink)  
Antiguo 15/07/2010, 16:34
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Respuesta: ¿Cómo conseguir esto?

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.

Etiquetas: conseguir
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 15:15.