Hola escael,
Has puesto un leer mas detalles, que por los tamaños de las noticias,
suponía que lo harías.
Pon una clase a ese <p> de leer mas detalles y asignale un clear:both,
para evitar que flote y ya esta.
En el ejemplo que me mandas:
.text {
width: 30%;
border: 1px solid #000000;
height: 150px;
}
html>body .text{
height:auto;
min-height: 150px;
}
Solo cambiaría eso, pero tu solución, que por cierto desconocía, solo
me plantea una inconveniencia. No puedes usar padding en .text que no
sean porcentuales, sino tendrás problemillas. Y en opera no se
respetará el margin-bottom que tienes puesto.
No me atrevo a sugerir que lo que te propongo sea mejor a lo tuyo,
pues ya te comentaba los problemas que tendría lo que te paso.
Analízalos y decide.
Un saludo
Wednesday, October 19, 2005, 6:17:38 PM, you wrote:
e> hola raul
e> podrias enviar un ejemplo en concreto. el problema es que funciona hasta
e> el punto en que el texto es mayor que el espacio ocupado por la imagen
e> pero cuando el texto es menos, es decir queda por encima de la imagen,
e> entonces la imagen sobresale hasta el div de abajo.
e> aqui te pongo un ejemplo
e> <div class="text">
e> <p>
e> <img class="floatright" src="images/image.gif" alt="" width="100"
height="100" />>Lorem ipsum dolor sit amet, consectetuer...
e> </p></div>
e> <div class="text">
e> <p>
e> <img class="floatright" src="images/image.gif" alt="" width="100"
height="100" />>Lorem ipsum dolor sit amet, consectetuer. Lorem ipsum
e> dolor sit amet, consectetuer adipiscing elit, sed diam
e> nonummy nibh euismod tincidunt ut laoreet dolore magna aliquLorem ipsum
e> dolor sit amet, consectetuer adipiscing elit, sed diam
e> nonummy nibh euismod tincidunt ut laoreet dolore magn..
e> </p></div>
e> yo lo solucione con este estilo:
e> p {
e> padding: 5px;
e> }
e> .floatright
e> {
e> float: right;
e> margin: 0 0 10px 10px;
e> border: 1px solid #666;
e> padding: 2px;
e> }
e> .text {
e> width: 30%;
e> border: 1px solid #000000;
e> height: 100%;
e> overflow: auto;
e> }
e> mira a ver si basado en ese puedes poner tu ejemplo, fijate que en el
e> primer div el texto es muy poco, es decir, la imagen ocuparia un espacio
e> de abajo...
e> yo lo solucione con el overflow:auto; aunque se que no es lo mas correcto.
e> saludos
e> escael
>>Hola escael,
>>
>> me explique mal, altura mínima para el texto, no una altura,
>> altura mínima :)
>> que se consigue por ejemplo así:
>>
>> .loquesea{height:100px} /*El height en ie actua casi casi como el
>> min-height*/
>> .loquesea2 > .loquesea{height:auto; min-height:100px}
>>
>> lo malo de esto, como se comportará ie7? comprenderá el operador
>> > y no el min-height?? y otros navegadores...
>>
>> En cuanto al clear, te aseguro que funciona, pero has de ponerlo
>> en la misma capa en la capa en la que está el float, es decir
>> hermano de ella.
>>
>> <div>
>> <div class="flotante"> .. </div>
>> <div class="clearrr"> .. </div>
>> </div>
>>
>> Aunque solo sea para comprobarlo, pon esto justo antes de cerrar
>> el div que contiene la noticia.
>>
>> <div style="clear:both;"> </div>
>>
>> Esa es la solución chapuza. Pero como no se si el diseño está
>> acabado te la propongo por lo que te comentaba, tal vez vayas a
>> poner la fecha a pie de noticia o algo similar...
>>
>> La cuestión, si al final no ves como adaptar estas soluciones
>> vuelve a avisar, este diseño se puede maquetar de otra manera.
>>
>>
>>Tuesday, October 18, 2005, 6:04:35 PM, you wrote:
>>
>>e> hola raul
>>e> los ejemplos que envias estan muy utiles pero si te fijas el texto no
>>e> bordea la imagen, que ese es mi objetivo, por otro lado descarta ponerle
>>e> una altura fija al div, eso ya lo he hecho pero a mi amigo no le cuadra.
>>e> en cuanto a las soluciones de clear ya las conocia y las habia probado y
>>e> no me funcionaban.
>>e> lo que necesito es algo asi como esto:
>>e> http://www.zunzun.cu/new/curiosos.asp si se fijan ahi puse una altura
>>e> fija para el div y problema resuelto, pero en esta ocasion quisiera que
>>e> la altura la fijara el texto.
>>e> espero aparezca una solucion
>>e> saludos
>>e> escael
>>
>>
>>
>>
>> Saludos.
>>
>>_________________________________
>>
>> Todo lo que no aprendí,
>> no se me ha olvidado.
>>_________________________________
>>
>>
>>
>>_______________________________________________
>>Lista de distribución Ovillo
>>Para escribir a la lista, envia un correo a [email protected]
>>Puedes modificar tus datos o desuscribirte en la siguiente
>>dirección: http://ovillo.org/mailman/listinfo/ovillo
>>
>>
>>
e> _______________________________________________
e> Lista de distribución Ovillo
e> Para escribir a la lista, envia un correo a [email protected]
e> Puedes modificar tus datos o desuscribirte en la siguiente
e> dirección: http://ovillo.org/mailman/listinfo/ovillo
Saludos.
_________________________________
Todo lo que no aprendí,
no se me ha olvidado.
_________________________________
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
