Foros del web, para los que viven de bits

vicgar20 · 16-oct-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 · 16-oct-2006, 03:02

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

Salu2

vicgar20 · 16-oct-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 · 16-oct-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 · 16-oct-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 · 16-oct-2006, 15:52

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

opeth · 17-oct-2006, 00:07

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

saludos

ida_creativa · 17-oct-2006, 02:05

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

opeth · 17-oct-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

16-oct-2006, 02:42	#1 (permalink)
vicgar20 Fecha de Ingreso: junio-2006 Mensajes: 10	capas dentro de otra capa 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.

16-oct-2006, 04:08	#4 (permalink)
opeth Fecha de Ingreso: junio-2004 Ubicación: Distrito Federal, México Mensajes: 338	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; } __________________ Mi blog Última edición por opeth; 16-oct-2006 a las 04:15.

17-oct-2006, 00:07	#7 (permalink)
opeth Fecha de Ingreso: junio-2004 Ubicación: Distrito Federal, México Mensajes: 338	pienso más o menos igual que Rafael no has intentado con min-height saludos __________________ Mi blog

17-oct-2006, 02:20	#9 (permalink)
opeth Fecha de Ingreso: junio-2004 Ubicación: Distrito Federal, México Mensajes: 338	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 __________________ Mi blog

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado

16-oct-2006, 03:02	#2 (permalink)
karide Fecha de Ingreso: septiembre-2005 Ubicación: Ourense Mensajes: 16	Podrías postear algo de codigo, creo que asi seria más facil poder responderte. Salu2

16-oct-2006, 03:45	#3 (permalink)
vicgar20 Fecha de Ingreso: junio-2006 Mensajes: 10	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: <body> <div id="cGeneral"> <div id="cMenuSuperior"> <div id="cMenuItem1"> <img src="victor_icons/Compras.png"> </div> </div> </div>

16-oct-2006, 04:24	#5 (permalink)
vicgar20 Fecha de Ingreso: junio-2006 Mensajes: 10	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.

16-oct-2006, 15:52	#6 (permalink)
Rafael Fecha de Ingreso: marzo-2003 Mensajes: 1.052	Si, pero es un abuso posicionar todo absolutamente, deja que algunas cosas fluyan y estén juntitas solitas.

17-oct-2006, 02:05	#8 (permalink)
ida_creativa Fecha de Ingreso: octubre-2006 Mensajes: 22	wenas, he visto varias veces el concepto "min-height" exactamente q es es min? una forma de reducir "margin"? grache!