Float y párrafo con borde

[tunait]

Buenas,

A ver, sus explicoteo....

tengo una imagen con un float: right

A continuación un par de líneas de texto con saltos de línea y un párrafo, que se muestra todo a la izquierda de la imagen.

El párrafo tiene asignado un borde superior.

ok, pues el contenido del párrafo se adapta al lado de la imagen, pero no así el borde, que pasa por debajo de la imagen y la pasa de largo.



Algún truco para que la línea (borde superior) del párrafo vaya sólo hasta donde va el contenido del párrafo?

El css de la imagen es

Código:

#ima{
	float: right;
	margin-left: 25px;
	margin-right: 25px;
	margin-bottom: 5px;
	width: 180px;
}

y el css del párrafo es

Código:

.parrafillo{
	margin-top: 4px;
	padding-top: 2px;
	border-top: 1px dotted #CCCCCC;

}

Gracias anticipadas

[kahlito]

Hola tunait, no se si lo habras probado ya con esto pero por si acaso:

Para que el borde solo vaya hasta donde tu quieras:

.parrafillo{
margin-top: 4px;
padding-top: 2px;
border-top: 1px dotted #CCCCCC;
width: 200px;
}

Y si además quieres que se alineen los dos desde arriba:

.parrafillo{
margin-top: 4px;
padding-top: 2px;
border-top: 1px dotted #CCCCCC;
width: 200px;
float: left;
}

Pero claro no estoy seguro de todo tu código ni como te quedaría , ya me contarás

Saludosss

[tunait]

Hola kahlito hoy me salvas tú a mi

El tema del width, no me interesa o a resoluciones mayores quedan muy separada la imagen del párrafo.

Inicialmente le puse un width en porcentaje, y en mo(r)zilla quedaba perfecto, pero explorer me tomaba el porcentaje de forma distinta y me quedaba la columna a la mitad de su anchura.

Con el float left se ha solucionado en explorer, aunque no en mozilla, al menos sin aplicar un width. al final lo he puesto con el float `para explorer y para el resto el width en porcentaje y, hasta que pruebe con otras versiones y navegadores, parece que se quedan las cosas en su sitio.

Igual, esto de que el borde de un párrafo se desparrame de esta forma no me parece correcto ¿alguien sabe si esto es normal? ¿o es un bug? No le encuentro el sentido a este compotamiento

Gracias kahlito

[josemi]

Hola,

Pues parece que es normal. Al menos por lo que deduzco de http://www.w3.org/TR/CSS21/visuren.html#img-float2p . Supongo que sera por las cajas, y que los floats flotan encima de ellas (aunque no del contenido de las cajas).

Saludos.

[tunait]

Gracias josemi

Hum ... le he dado un repaso al link, josemi, pero la verdad es que no he visto mención a un caso como el que tengo ahora.

Igual encontré solución única para explorer y resto, que fue aplicarle al párrafo un margen derecho igual a la suma de la imagen más sus márgenes. El contenido del párrafo se mantiene exactamente igual que sin aplicar este margen pero el borde sí se ve alterado y queda alineado con el párrafo.

[kahlito]

Hola de nuevo

Tunait yo normalmente cuando uso esa clase de estilos para alinear un parrafo o texto junto a una imagen suelo meterlo todo dentro de una capa ( de una chiquitita por ejemplo) para que sobre todo al cambiar de resolución siempre me respete la posición, es decir que si la quiero flotando a la derecha y a un margen de 10 px (por ejemplo) siempre la tendre a la derecha y 10px de margen con respeto a esa capita

Pero claro es lo mismo de ayer, no si se eso te servirá

Saludosss

[tunait]

Es que claro, todo depende de cómo sea la interfaz gráfica que se esté aplicando. Generalmente hay una capa principal con unas dimensiones absolutas que se encarga de mantener todo en su sitio en otras resoluciones, pero en este caso no me sirve. Por eso no me servía aplicar un width. Me servía en porcentajes, pero no para explorer. Pero bueno, lo resolví con ese margin-right

Igual, no le veo el sentido a este comportamiento


gracias kahlito

[kahlito]

De nada muhé , de todas formas ya sabes que tarde o temprano aparecerá un "espesialista " en la materia o tu misma cerraras el "bug"

Saludosss, tunait