Sombra con imagenes a los laterales de un div

[opzina]

Hola,

Necesito hacer un div con sombra a los laterales.

Lo que pensé:

1- Fondo con ancho y alto con sombra a los laterales.

2. 3 div con float: el div del centro es donde va el contenido y el div derecho y el izquierdo las sombras. Algo así: | contenido | (donde las barras verticvales son la sombra)


Cual es la mejor opción? existe alguna otra alternativa. Con CSS3 probé pero no logré eliminar las sombras en el top y el bottom y, a demás, no se vería en todos los navegadores.

Saludos

[Anya82]

Yo creo que tu primera opcion es mejor, ya que la segunda volveria un poco "sucia" tu estructura html.
En varias paginas he visto que usan y recomiendan la primera opcion.

Suerte y saludos.

[opzina]

Bien, gracias.

Y serían 3 divs??

<div id="fondo">

<div id="contenedor">

<div id="contenido"> Contenido de la web </div>

</div>
</div>

[ArturoGallegos]

si tu div tendrá un ancho fijo definido, yo optaría por un solo div a este le aplico una imagen que simule la sombra como background y un padding para evitar el contenido se empalme con la sombra

[opzina]

Yo he hecho esto:

#shadow {
width: 1092px;
min-height: 600px;
height: 100%;
height: auto !important;
background: url("img/shadow.png") no-repeat;
margin: 49px auto;
text-align: center;
}

#container {
width: 990px;
margin: 0 auto;
min-height: 600px;
height: 100%;
height: auto !important;
text-align: center;
background-color: #FFFFFF;
}

#content {
width: 911px;
margin: 0 auto;
padding-top: 40px;
text-align: left;
position: relative;
display: block;
}

Me parece como mucho 3 divs, pero de esta manera lo veo bien.
¿De que manera podría simplificarlo?

[manc3b0]

Quizás es una idea muy estupida, pero jugando con la propiedad border y el color de fondo que hayas elegido, ¿no podrias emular una especie de sombra? No lo he probado, pero nse... con el border-bottom y el border-right, con un style groove...hmm luego pruebo.

Pero bueno, y si crearas dos div, uno de ellos desplazado algun pixel de la posicion del otro, ¿no?


Tambien puedes tirar de los estándares de los navegadores más actuales, con las propiedades que incluyen de CSS3.

Código:

-webkit-box-shadow: 2px 2px 5px #dee6ee; (Google)
-moz-box-shadow: 2px 2px 5px #dee6ee; (Ff)

Aqui la explicación:
http://dev.w3.org/csswg/css3-background/#the-box-shadow

Esto es lo que he usado yo, pero claro, es un tema peliagudo, aparte en IE creo que tienes que tirar de un filtro específico, creo que se llama shadow(no lo probe)



Un saludo

[Anya82]

que tu imagen mida de ancho 1092, y sea un png, para que asi, en caso de tener un fondo con patron o textura, te lo respete. creo que puedes unir los primeros dos estilos #shadow y #container. En lugar de tener un div mas chico dentro de uno mas grande, utiliza padding para definir el espacio que separa la orilla del fondo, con el area de contenido:

Código CSS:

#container {
width: 1092px;          /*espacio que ocupa la imagen de fondo*/
min-height: 600px;
height: 100% auto !important;    /*para que definir height dos veces?*/
background: url("img/shadow.png") repeat-y;    /*imagino que quieres que la sombra se vea tooodo hacia abajo*/
padding: 49px;    /*el espacio que separara el area de 1092px del centro donde ira el contenido*/
margin: 0 auto;
text-align: left;   /*aqui te ahorras definir 3 veces la posicion del texto, si en realidad solo quieres que este a la izquierda*/
}
 
 
/*este estilo no lo entiendo muy bien*/
#content {
width: 911px;
margin: 0 auto;
padding-top: 40px;
position: relative;
display: block;
}
 

[opzina]

Iniciado por Anya82

que tu imagen mida de ancho 1092, y sea un png, para que asi, en caso de tener un fondo con patron o textura, te lo respete. creo que puedes unir los primeros dos estilos #shadow y #container. En lugar de tener un div mas chico dentro de uno mas grande, utiliza padding para definir el espacio que separa la orilla del fondo, con el area de contenido:

Código CSS:

#container {
width: 1092px;          /*espacio que ocupa la imagen de fondo*/
min-height: 600px;
height: 100% auto !important;    /*para que definir height dos veces?*/
background: url("img/shadow.png") repeat-y;    /*imagino que quieres que la sombra se vea tooodo hacia abajo*/
padding: 49px;    /*el espacio que separara el area de 1092px del centro donde ira el contenido*/
margin: 0 auto;
text-align: left;   /*aqui te ahorras definir 3 veces la posicion del texto, si en realidad solo quieres que este a la izquierda*/
}
 
 
/*este estilo no lo entiendo muy bien*/
#content {
width: 911px;
margin: 0 auto;
padding-top: 40px;
position: relative;
display: block;
}
 

Si yo supongo que se tiene que poder simplificar el código de esos 3 divs. Pero esto que me indicas me tira el contenido a la izquierda...

[Anya82]

si quieres que este centrado el texto, pues solo cambia el text-align: center