Autor Tema: Duda con margen a una capa absoluta.  (Leído 1283 veces)

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Duda con margen a una capa absoluta.
« 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.
« Última modificación: 22 de Julio de 2012, 03:18:31 am por SoyJoaquin. »
Twitter: @JoakoM010



Comunidad PHPeros

Duda con margen a una capa absoluta.
« en: 22 de Julio de 2012, 03:16:57 am »

Desconectado AlejoSketch

  • PHPero Avanzado
  • ****
  • Mensajes: 339
  • Karma: 12
  • Sexo: Masculino
  • Aprendiendo algo nuevo cada día!
    • Ver Perfil
Re:Duda con margen a una capa absoluta.
« Respuesta #1 en: 22 de Julio de 2012, 03:41:08 am »
Hola!

1. Que altura tiene el body? está definida o es variable?
2. El footer es de position: absolute o fixed?
« Última modificación: 22 de Julio de 2012, 03:43:01 am por AlejoSketch »


Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:Duda con margen a una capa absoluta.
« Respuesta #2 en: 22 de Julio de 2012, 04:23:01 am »
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.
Twitter: @JoakoM010



Desconectado lDromedario

  • PHPerit@
  • *
  • Mensajes: 11
  • Karma: 0
  • Sexo: Masculino
  • Altruista en general :)
    • Ver Perfil
    • HabboTree
Re:Duda con margen a una capa absoluta.
« Respuesta #3 en: 04 de Septiembre de 2012, 01:10:21 am »
 ¿No seria bueno usar algunos margin-x?, :)
« Última modificación: 04 de Septiembre de 2012, 01:45:58 am por lDromedario »
>=> [link=www.twitter.com/DromedarioH]@DromedarioH[/link]

Desconectado maska

  • PHPer@ Fijo
  • ***
  • Mensajes: 126
  • Karma: 2
  • Nuev@ PHPer@
    • Ver Perfil
Re:Duda con margen a una capa absoluta.
« Respuesta #4 en: 28 de Octubre de 2012, 13:12:03 pm »
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.

Código: [Seleccionar]
<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>
« Última modificación: 28 de Octubre de 2012, 13:34:41 pm por maska »

Desconectado Mixvice

  • PHPero Experto
  • *****
  • Mensajes: 687
  • Karma: 32
  • Sexo: Masculino
  • ¡Y Tu Papá Tambien!
    • Ver Perfil
    • Tuhabbo
Re:Duda con margen a una capa absoluta.
« Respuesta #5 en: 28 de Octubre de 2012, 19:32:58 pm »
Puedes poner código? :p

Desconectado maska

  • PHPer@ Fijo
  • ***
  • Mensajes: 126
  • Karma: 2
  • Nuev@ PHPer@
    • Ver Perfil
Re:Duda con margen a una capa absoluta.
« Respuesta #6 en: 01 de Noviembre de 2012, 19:13:37 pm »
¿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.