Efecto sombra con cuatro capas

kirkem · #1 (**permalink**) 05/02/2007, 04:52

Hola buenos días. Ando un poco perdido, os cuento mi problema. Quiero realizar una web que tenga efecto sombra.
Para las sobras utilizo cuatro capas, una superior, una inferior, una lateral izquierda y otra lateral derecha (Hay otra central entre las dos laterales para el contenido de la web). Todas ellas tienen una imagen que hace el efecto de la sombra. El problema está en las imagenes laterales ya que estas capas no tiene un alto fijo, deben alargarse o encogerse en funcion del contenido de la página, y si no se lo pongo no me muestra la imagen que hace el efecto sombra.
Tengo puesto un   (espacio) en cada capa para que me muestre algo ya que de lo contrario la capa no se vería y tampoco se vería la imagen no se si me explico.

Lo que quiero es que la capas donde están las sombras laterales se redimensionen en función de la capa principal que muestra el contenido de la página web.

Este es el código de la web por ahora:

<body bgcolor="#CCCCCC">
<div style="width:983px; margin:auto;">
<div style="background-image:url(images/sombra_top.gif); height:16px;"></div>
<div style="background-image:url(images/sombra_left.gif); width:5px; float:left;"> </div>
<div style="background-image:url(images/sombra_right.gif); width:5px; float:right;"> </div>
<div style="width:973px; margin:auto; background-color:#FFFFFF;">Aquí va el contenido principal de la página<br />Más contenido<br />Más contenido<br />Mas contenido</div>
<div style="background-image:url(images/sombra_footer.gif); height:16px; clear:both;"></div>
</div>
</body>

En esta dirección pueden ver la página en cuestión y pueden bajar las imágenes y probar a quitar los   para ver mejor lo que explico: w w w.iiesa.es/v3/capas.htm (quiten los espacios entre las w)

Por cierto si esta página la visualizan en Explorer en un completo desastre. Se ve peor y más descolocado que en Firefox y Opera.

Muchas gracias a todos y a ver si me pueden ayudar. Un saludo

Mikmoro · #2 (**permalink**) 05/02/2007, 09:37

Ya que tu caja central tiene un tamaño fijo de 983px, lo que podrías hacer es hacer una imagen con un ancho de 983px de ancho y 5 px de alto, que incluya las dos sombras laterales, y colocarla como fondo de tu caja principal, repitiéndola en sentido vertical. Incluso puedes añadir la sombra superior en esa imagen.
Ahorrarías mucho código y es más sencillo. Si no tienes claro cómo hacerlo luego te paso un ejemplo.

Mikel.

kirkem · #3 (**permalink**) 05/02/2007, 11:52

Mucha gracias Mikel, me ha servido bastante, no armo tanto follón y la verdad es que es mucho más simple como tu me has dicho. Ahora tengo este otro problema. Mirando la web de nuevo lo podrás ver. Dentro de la capa donde va el contenido ahora tengo otras tres capas más maquetadas en tres columnas. Verás el problema en seguida observando la capa de la izquierda. A ver si me puedes ayudar. El estilo lo puedes ver mirando el código fuente de la web.

Muchisimas gracias y ya me contarás.

Mikmoro · #4 (**permalink**) 05/02/2007, 15:51

Puedes probar anadiendo un corte al final de la caja del menú. Añade una caja como esta:

<div class="corte"></div>

justo antes de que cierre la caja del menú:

<div class="corte"></div>
</div>
<div class="sombra_footer"></div>

y luego añade esa clase a tu css de esta manera:

.corte { clear: both;}

Creo que funcionará como quieres.

Mikel.

kirkem · #5 (**permalink**) 06/02/2007, 02:25

Muchas gracias Mikel. Funciona perfectamente. He aprendido mucho en estos días de investigación y con tus consejos.

kirkem · #6 (**permalink**) 06/02/2007, 03:18

Hola de nuevo Mikel. La cosa va avanzando bastante rapido pero podría ser que la columna de la derecha fuera tan alta como la de la izquierda y viceversa. Es decir que si crece una que crezca la otra y viceversa. O que las dos tengan el mismo alto pero no puedo poneselo fijo ya que aunque en un principio si lo sepa, luego dependiendo del usuario logueado el menú cambiará y se hará mas grande o pequeño y entonces se descuadrará la página. Si vas a la web observarás lo que digo, en la columna de la derecha el border no llega a conectar con el borde inferior que hay en horizontal. Muchas gracias tiaco!

Mikmoro · #7 (**permalink**) 08/02/2007, 12:27

Hola, Kirkem.
Yo creo que si ninguna de las cajas tiene tamaño porque todas crecen dinámicamente (las tres: la contenedora y las dos laterales), al menos para IE no es posible hacer que crezcan por igual, o que una crezca en función del contenido de la otra. El problema es que si la caja contenedora de las dos laterales no tiene tamaño definido, aunque pongas a las otras que tengan un 100% de la contenedora, no se pueden redimensionar porque sería el 100% de "nada".

Creo que la única solución para que las laterales crezcan, una en función de la otra, para explorer, es que la contenedora tenga el tamaño definido.

Siento no poder ayudarte más. Igual alguien conoce alguna solución.

Mikel.