Fondo de capa que se desplaza con el contenido

coke_135 · #1 (**permalink**) 30/05/2009, 17:28

Hola a todos,

estoy teniendo un problema que no acabo de solucionar y no se me ocurre como hacerlo.

Tengo una capa con una imagen de fondo, pero cuando a esta capa le meto un párrafo con un margen superior de 40px (por ejemplo), el fondo se me desplaza 40px con el párrafo.

Lo más curioso del tema es que si a la capa con fondo le asigno un borde de 1px, el fondo y la capa se mantienen en su posición.

Un ejemplo sencillo de lo que tengo sería:

Código HTML:

<div id="img_cabezara">IMAGENES...</div>
<div id="menu">MENU...</div>
<div id="capa_con_fondo">
     <p>Párrafo con margin-top:40px</p>
</div>

Y el CSS de capa_con_fondo sería:

Código HTML:

#capa_con_fondo{
	height: 428px;
	width: 828px;
	margin: 0px auto;
	background: url('../img/fondo_cuerpo.png') no-repeat;
}

Si al párrafo le pongo margen superior, el fondo se desplaza. Y como ya he dicho, si le añado un border: 1px, el fondo sigue en su sitio.

¡Gracias por la ayuda!

WillxD · #2 (**permalink**) 30/05/2009, 18:15

Estas haciendo un mal uso del margin, lo que debes usar es la propiedad "padding"

coke_135 · #3 (**permalink**) 31/05/2009, 07:23

Hola WillxD, gracias por contestar.

No estoy de acuerdo con tu afirmación. Debería funcionar igual darle margin a la capa de dentro que padding a la contenedora. El resultado debería ser el mismo y el objetivo también.

No es un mal uso del margin. Quiero darle un margen superior al párrafo y por tanto uso margin.

Si uso padding, el resultado es satisfactorio por arriba, pero entonces las capas siguientes se desplazan junto con el padding superior y comienzan los probelmas en IE y otros navegadores que interpretan mal los modelados de cajas.

Gracias igualmente.

coke_135 · #4 (**permalink**) 17/11/2009, 12:46

Hola,

resubo el tema porque vuelo a encontrarme con el mismo problema. En su momento lo solucioné poniendo el borde, pero ahora no puedo hacerlo así.

¿Alguien puede ayudarme esta vez?

¡Gracias!

kseso? · #5 (**permalink**) 17/11/2009, 14:16

Algunas precisiones previas:
Margin: indica el espacio de separación entre un elemento y los adyacentes.
Padding: indica el espacio de separación entre el límite de un elemento y los elementos contenidos dentro de él.

Esta precisión es importante porque no todos los navegadores hacen uso del modelo de caja estándar.
Quedémonos con los elementos implicados:

Código html:

Ver original<body>
     <div id="capa_con_fondo">
            <p>Párrafo con margin-top:40px</p>
     </div>
</body>

Fíjate que en ejemplo cuando añades el margin-top al párrafo, lo que haces es desplazar el div #caja_con_fondo en la vertical, manteniendo el tamaño de su la altura., esto es, el párrafo se sale de los límites de su caja, choca contra el body y fuerza a todo a bajar. Esto en fierefox 3.5, opera 10, chrome y safary en windows, producto del modelo de caja estandar. En ie7 como implementa otro modelo, pues no ocurre.

Sin profundizar más, creo que deberías utilizar un padding-top en el elemento contenedor en lugar del margin en el párrafo, como te dijeron en su momento. o en el párrafo (p) el paddin-top.

Pero si necesitas/quieres añadir ese margin-top al párrafo tienes dos opciones para evitar ese desplazamiento:
1º= añadir "padding-top: 1px;" a la #capa_con_fondo.
2º= la que más me convence: añadir "overflow: hidden;" a la #capa_con_fondo.

Un saludo

coke_135 · #6 (**permalink**) 17/11/2009, 15:23

Gracias por contestar kseso.

- Si uso padding-top en el contenedor, sigue desplazándose la capa inferior (lo había solucionado con un margin negativo igual al padding superior).
- Si le coloco un margin-top al párrafo y un overflow:hidden, se soluciona.
- Si le coloco un padding-top al párrafo, también funciona. Pero creo que esta opción no sería del todo correcta.

Si crees que es más correcta la opción de darle padding al contenedor, ¿cómo crees que lo solucionaría? Siempre ha usado margin para estas cosas porque los padding suelen darme bastantes dolores de cabeza.

Un saludo y gracias.

kseso? · #7 (**permalink**) 17/11/2009, 15:30

Me remito a lo dicho en mi comentario anterior:

Cita:

Iniciado por kseso?

Pero si necesitas/quieres añadir ese margin-top al párrafo tienes dos opciones para evitar ese desplazamiento:
1º= añadir "padding-top: 1px;" a la #capa_con_fondo.
2º= la que más me convence: añadir "overflow: hidden;" a la #capa_con_fondo.

Tú eliges cual te es más conveniente.

coke_135 · #8 (**permalink**) 17/11/2009, 16:07

kseso, ya te he entendido y leido en tu anterior comentario. De hecho como te digo lo he solucionado añadiendo overflow:hidden a la capa contenedora.

Pero dices que lo de añadir margen al elemento no sería lo correcto y me interesaba saber como se haría bien añadiendo el padding al contenedor.

No obstante, da igual. Gracias por tu ayuda. Mi problema está resuelto, bien o regular, pero resuelto :).

Un saludo

kseso? · #9 (**permalink**) 17/11/2009, 16:54

Disculpa entonces, Coke, fui yo quien no entendió.

Como te decía, el "paddin" para mantener una distancia entre el "border" del padre y sus hijos y el "margin" para que los hermanos mantengan la distancia entre sí.

Entonces, añadiría un "padding-top" al padre ("capa_con_fondo" en tu caso) para dejar ese espacio entre su "border" superior y el primer párrafo; y si necesitas separar verticalmente entre sí los párrafos alojados en él, un "margin-bottom" a ellos ( a los párrafos).
Aunque en el caso de los párrafos, hay otra propiedad para separar entre sí a todas las líneas y cada una que los conforman: "line-height" (con ella en tu ejemplo tampoco sería necesario utilizar el "overflow")

Y una precisión que supongo que tú sí conoces, pero para los posibles lectores futuros del tema):
Como a la caja "#capa_con_fondo" le tienes una altura declarada, cuando el contenido rebase ese límite, simplemente desaparecerá por el valor "hidden". Así que mejor usar el "overflow: auto" para favorecer la aparición del scroll.

Un saludo