capas dentro de otra capa

vicgar20 · #1 (**permalink**) 16/10/2006, 02:42

Hola,

Tengo una página diseñada mediante capas div. Hay una general y luego unas subcapas donde pongo todo el contenido.

Cada una de las capas está definida de manera absoluta.

El problema reside en la altitud de la capa general, puesto que esta debería ajustarse al contenido de dicha capa, pero no es asi. Supongo que es porquéel contenido de dicha capa, sólo son otras capas que es donde está el contenido real (menus, imagenes, etc...).

Como puedo solucionar el problema de la altitud de la capa general para que ajuste la altitud al contenido de las otras capas?

Saludos y gracias de antemano.

karide · #2 (**permalink**) 16/10/2006, 03:02

Podrías postear algo de codigo, creo que asi seria más facil poder responderte.

Salu2

vicgar20 · #3 (**permalink**) 16/10/2006, 03:45

ok...

primero el css donde defino las propiedades de las capas:

Cita:

#cGeneral{
position:absolute;
border-style:solid;
border-width:1px;
top:2%;
left:2%;
width:96%;
overflow:visible;
}
#cMenuSuperior{
position:absolute;
top:0px;
left:0px;
width:100%;
height:63px;
}
#cMenuItem1{
position:absolute;
top:0x;
left:0px;
width:60px;
height:63px;
vertical-align:middle;
border-style:solid;
border-width:1px;
}

Y ahi va la implementación de dichas capas:

Cita:

opeth · #4 (**permalink**) 16/10/2006, 04:08

si no me falla es porque al poner position:absolute a tus divs pierden el flujo normal del documento o sea ya no ocupan el espacio que deberían tener normalmente así que tus menusSuperio y Menuitem ya no ocupan espacio dentro de tu cgeneral solo usan este como referencia para su nueva posición ¿no se si me explico?

por ejemplo si pones dentro un parrafo (puede ser cualquier cosa) si no colocas este con position: absolute veras comotu div c General baja hasta donde termina el parrafo porque este no sale del "flujo normal" ocupa todavia su espacio.

Cita:

<div id="cGeneral">
<div id="cMenuSuperior">
<div id="cMenuItem1">
<img src="victor_icons/Compras.png">
</div>
</div>
<p>sadfsdfsadf</p>
</div>

bueno espero no haberte confundido no estaría mal que leyeras este articulo
Absolutamente relativo o este CSS Positioning

Saludos

aunque viendolo bien solo colocando la altura a tu div general se puede arreglar aunque no entiendo porque usas overflow:visible;

Cita:

#cGeneral{
position:absolute;
border-style:solid;
border-width:1px;
top:2%;
left:2%;
width:96%;
height: 63px;
overflow:visible;
}

vicgar20 · #5 (**permalink**) 16/10/2006, 04:24

Lo del overflow:visible no tiene importancia, es solo una prueba. En realidad no debería estar.

En cuanto a lo de ponerle una alura al div general, creo que no es buena idea puesto que el contenido será dinámico y no se lo que va a ocupar. Por lo tanto quiero que se ajuste a lo que haya dentro.

Si no entiendo mal, el problema se solucionaría quitándole el position:absolute?

Es que si no se lo pongo, muchas veces me da problemas.

Gracias por tu respuesta.

Saludos.

Rafael · #6 (**permalink**) 16/10/2006, 15:52

Si, pero es un abuso posicionar todo absolutamente, deja que algunas cosas fluyan y estén juntitas solitas.

opeth · #7 (**permalink**) 17/10/2006, 00:07

pienso más o menos igual que Rafael no has intentado con min-height

saludos

ida_creativa · #8 (**permalink**) 17/10/2006, 02:05

wenas, he visto varias veces el concepto "min-height" exactamente q es es min? una forma de reducir "margin"?
grache!

opeth · #9 (**permalink**) 17/10/2006, 02:20

con min-height restringes la altura minima por lo general de divs pero puedes aplicarlo a otros elementos menos a losw elementos de línea pero por desgracia IE no lo soporta desde la versión 6 para abajo aunque en el foro puedes buscar la solucón.

aquí puedes encontar información min-height