Div debajo de Div y Divs dentro

[bartoro]

Hola a todos, estoy intentando hacer una web a base de capas y más o menos lo tengo enfocado. Solo tengo un problema que no se resolver.

La web tiene un div de contenido y otro de pie de págnia. Uno aparece debajo de otro sin problema:

<div id="Contenido" style="position:relative;width:800px;background-color:green;margin: 0 auto 0 auto">
Contenido
</div>
<div id="pie" style="width:800px;background-color:blue;margin: 0 auto 0 auto">
Pie de pagina
</div>


El problema surge cuando al intentar poner en el div de contido una tabla con una imagen de fondo a modo de div entonces el pie de página no sale debajo.

<div id="Contenido" style="position:relative;width:800px;background-color:green;margin: 0 auto 0 auto">
<div style="position:absolute;width:100px;height:100px; left:0px;top:0px;z-index:1;background-color:blue">
Aqui ponemos una imagen de fondo
</div>
<div style="position:absolute;width:100px;height:100px; left:0px;top:0px;z-index:2;background-color:blue">
<table>
<tr>
<td>
Aqui esta la tabla
</td>
</tr>
</table>
</div>
</div>
<div id="pie" style="width:800px;background-color:blue;margin: 0 auto 0 auto">
Pie de pagina
</div>

En este caso el div contenido no crece y por tanto el pie de página no queda debajo. Creo que es porque uso position absolute en los dos div dentro del "contenido" pero si no pongo el position absolute, si bien el div "pie" si queda debajo, los div internos con la imagen y la tabla quedan dentro de "contenido" pero uno debajo de otro y no uno sobre otro que es el efecto que busco.

Muchas gracias

[pzin]

Hay varias soluciones al problema, pero cada cual depende de lo que quieras hacer.

Si podrías explicar mejor, o más detalladamente, para qué necesites que estén las cosas una encima de otra… ¿Qué va a contener las capas posicionadas de forma absoluta y la tabla?

Y si, estás en lo cierto. El problema viene por las posiciones absolutas. Básicamente, porque salen del flujo del documento y la altura de estas no son tenidas en cuenta para calcular el tamaño del padre div#Contenido. Luego este no crece sino con el contenido que esté en posición estática.

[bartoro]

Iniciado por Bonez

Hay varias soluciones al problema, pero cada cual depende de lo que quieras hacer.

Si podrías explicar mejor, o más detalladamente, para qué necesites que estén las cosas una encima de otra… ¿Qué va a contener las capas posicionadas de forma absoluta y la tabla?

Y si, estás en lo cierto. El problema viene por las posiciones absolutas. Básicamente, porque salen del flujo del documento y la altura de estas no son tenidas en cuenta para calcular el tamaño del padre div#Contenido. Luego este no crece sino con el contenido que esté en posición estática.

La idea es tener, dentro de la capa "Contenido" una imagen de fondo, que variará según el contenido, y sobre esta varios <div> uno de ellos con una tabla, otros con imágenes, etc... Luego vendría la capa de "pie de página". La capa contenido variará su tamaño vertical en función de lo que se vaya mostrando.

Yo pensaba que al poner position:relative en el div contendor el position:absolute de los "hijos" lo tomaría en referencia al padre.

Gracias!!!

[pzin]

Iniciado por bartoro

La idea es tener, dentro de la capa "Contenido" una imagen de fondo, que variará según el contenido, y sobre esta varios <div> uno de ellos con una tabla, otros con imágenes, etc... Luego vendría la capa de "pie de página". La capa contenido variará su tamaño vertical en función de lo que se vaya mostrando.

Yo pensaba que al poner position:relative en el div contendor el position:absolute de los "hijos" lo tomaría en referencia al padre.

Gracias!!!

Si la cuestión es por una imagen de fondo, se le da puedes poner a div#Contenido, ¿no? Así no tienes que andar con cosas raras.

Si cuando pones una posición relativa —o cualquiera diferente a estática— los hijos —hijos que tengan una posición fija o absoluta— tomarán de referencia al padre para su posición. Pero siguen sin estar dentro del flujo natural y sus dimensiones no son tenidas en cuenta para calcular las del elemento padre.

[bartoro]

Iniciado por Bonez

Si la cuestión es por una imagen de fondo, se le da puedes poner a div#Contenido, ¿no? Así no tienes que andar con cosas raras.

Si cuando pones una posición relativa —o cualquiera diferente a estática— los hijos —hijos que tengan una posición fija o absoluta— tomarán de referencia al padre para su posición. Pero siguen sin estar dentro del flujo natural y sus dimensiones no son tenidas en cuenta para calcular las del elemento padre.

Estupendo, y al margen de una imagen de fondo, si quiero tener dentro de la capa "contenido" una imagen solapada con otra jugando con el z-index, ¿cómo se haría?

Gracias

[pzin]

Iniciado por bartoro

Estupendo, y al margen de una imagen de fondo, si quiero tener dentro de la capa "contenido" una imagen solapada con otra jugando con el z-index, ¿cómo se haría?

No entiendo qué quieres hacer. Anda lento de mente.
¿Tienes algún ejemplo o puedes poner una imagen de lo que quieres hacer?

[bartoro]

Por ejemplo, si dentro de "Contenido" pongo esto:

<img src="./images/fondomundo.png" alt="" title="" style="top:0px;left:0px;width:950px;height:790px;z-index:1"/>
<div style="top:20px;left:0px;width:950px;z-index:2">
<table style="width:100%">
<tr>
<td style="text-align:center;">
HOLA
</td>
</tr>
</table>
<table style="width:100%;">
<tr>
<td style="text-align:center;">
ADIOS
</td>
</tr>
</table>
</div>

La tabla queda debajo de la imagen y al final el <div> de "pie". Pero, si pongo position:absolute a la tabla entonces queda sobre la imagen y si esta es tan larga en vertical como la tabla luego pone el pie de página.

El tema es ver como meter otros divs dentro del div y que lo hagan crecer pero pudiendo solaparse entre ellos.

Es difícil de explicar. Sorry y gracias por la ayuda.

[pzin]

Si quieres puedes especificar fondos múltiples usando CSS.

Por ejemplo:

Código CSS:

div#Contenido {
  background-image: url(mundo.png), url(sol.png);
  background-position: center, right 100px;
}
 

Ahora si el problema es sólo el z-index, entonces dale a la tabla una posición relativa y dale un z-index mayor si necesitas que esté por encima.

[bartoro]

Muchas gracias!