Foros del Web » Creando para Internet » CSS »

Float y párrafo con borde

Estas en el tema de Float y párrafo con borde en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/12/2004, 14:02
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Float y párrafo con borde

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
  #2 (permalink)  
Antiguo 09/12/2004, 18:55
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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
  #3 (permalink)  
Antiguo 10/12/2004, 07:38
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
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
  #4 (permalink)  
Antiguo 10/12/2004, 08:06
Ex Colaborador
 
Fecha de Ingreso: junio-2002
Mensajes: 9.091
Antigüedad: 15 años, 5 meses
Puntos: 16
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.
__________________
Josemi

Aprendiz de mucho, maestro de poco.
  #5 (permalink)  
Antiguo 10/12/2004, 08:32
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
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.
  #6 (permalink)  
Antiguo 10/12/2004, 09:03
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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
  #7 (permalink)  
Antiguo 10/12/2004, 09:18
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
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
  #8 (permalink)  
Antiguo 10/12/2004, 09:28
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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

Última edición por kahlito; 10/12/2004 a las 09:30
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 17:17.