Comunidad PHPeros
Lenguajes => CSS => Mensaje iniciado por: SoyJoaquin. en 22 de Julio de 2012, 03:16:57 am
-
Buenas.
Me encuentro maqueteando un diseño para una idea loca que tengo y poseo una duda que mas bien se me ha convertido en un problema al querer mantener un margen con una capa absoluta.
El problema lo he reflejado en una imagen que les mostrare a continuación:
http://img6.imageshack.us/img6/8051/dudadiseoavatar.png
El box gris superior no tiene nada de especial.
La capa amarilla que esta por debajo del naranja, es una barra con un fondo, tampoco tiene nada de especial.
Lo gris oscuro que se encuentra debajo del box amarillo y por detrás del naranja es sencillamente el body que se viene viendo debajo de todo.
La barra gris inferior (pie de pagina) cuenta con una propiedad de posición absoluta.
Mi problema viene siendo, como hago que el centro de todo (comprendido al 100%) pueda utilizarlo para crear un box gigante de 90x90% y 5% de margen entre la barra gris superior con la barra gris inferior (esta es absoluta).
Saludos.
-
Hola!
1. Que altura tiene el body? está definida o es variable?
2. El footer es de position: absolute o fixed?
-
Hola!
1. Que altura tiene el body? está definida o es variable?
2. El footer es de position: absolute o fixed?
-Todo el diseño es variable con respecto a la resolución de pantalla de cada quien...
-El footer es absoluto.
-
¿No seria bueno usar algunos margin-x?, :)
-
Buenas.
Me encuentro maqueteando un diseño para una idea loca que tengo y poseo una duda que mas bien se me ha convertido en un problema al querer mantener un margen con una capa absoluta.
El problema lo he reflejado en una imagen que les mostrare a continuación:
http://img6.imageshack.us/img6/8051/dudadiseoavatar.png
El box gris superior no tiene nada de especial.
La capa amarilla que esta por debajo del naranja, es una barra con un fondo, tampoco tiene nada de especial.
Lo gris oscuro que se encuentra debajo del box amarillo y por detrás del naranja es sencillamente el body que se viene viendo debajo de todo.
La barra gris inferior (pie de pagina) cuenta con una propiedad de posición absoluta.
Mi problema viene siendo, como hago que el centro de todo (comprendido al 100%) pueda utilizarlo para crear un box gigante de 90x90% y 5% de margen entre la barra gris superior con la barra gris inferior (esta es absoluta).
Saludos.
Escribe este código en un archivo de html aparte y observa el resultado. Ya tú ponle la altura a los div. Espero que te sirva. Con lo que sea, pregunta.
NOTA:
P. ¿Cómo dar la altura deseada al div?
R. Muy fácil. Dándole valores al height del div grisOscuro, y/o dándole valores al height del div amarillo o invisible. NUNCA los divs hijos podrán ser en su suma de alturas, mayor/es que el div padre. Si esto ocurriese el diseño quedaría estropeado.
<style>
#wrap {padding-top:20px; padding-bottom:20px; background:#CCC;}
#grisOscuro {background:#999; position:relative;}
#amarillo {background:#FF0;}
#invisible {background:#CCC;}
#naranja {background:#F90; position:absolute; top:5px; right:5px; bottom:5px; left:5px;}
</style>
<body>
<div id="wrap">
<div id="grisOscuro">
<div id="amarillo">amarillo</div>
<div id="invisible">invisible</div>
<div id="naranja">naranja</div>
</div>
</div>
-
Puedes poner código? :p
-
¿Te ayudé con lo que te dije? Comenta algo. Me gustaría saber sí o no, para prestarte más ayuda en caso negativo.
Saludos.