Foros del Web » Creando para Internet » CSS »

Sombra con imagenes a los laterales de un div

Estas en el tema de Sombra con imagenes a los laterales de un div en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 29/11/2010, 09:48
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Sombra con imagenes a los laterales de un div

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
  #2 (permalink)  
Antiguo 29/11/2010, 10:25
Avatar de Anya82
Colaborador
 
Fecha de Ingreso: noviembre-2007
Ubicación: tij.bc.mx
Mensajes: 1.269
Antigüedad: 10 años
Puntos: 196
Respuesta: Sombra con imagenes a los laterales de un div

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.
__________________
¿Ya se enteraron? Grandes y maravillosas noticias... ¡Google no te cobra por búsqueda!
  #3 (permalink)  
Antiguo 29/11/2010, 13:27
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: Sombra con imagenes a los laterales de un div

Bien, gracias.

Y serían 3 divs??

<div id="fondo">

<div id="contenedor">

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

</div>
</div>
  #4 (permalink)  
Antiguo 29/11/2010, 13:58
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Sombra con imagenes a los laterales de un div

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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #5 (permalink)  
Antiguo 29/11/2010, 14:04
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: Sombra con imagenes a los laterales de un div

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?
  #6 (permalink)  
Antiguo 29/11/2010, 14:17
 
Fecha de Ingreso: noviembre-2010
Mensajes: 2
Antigüedad: 7 años
Puntos: 0
Respuesta: Sombra con imagenes a los laterales de un div

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
  #7 (permalink)  
Antiguo 29/11/2010, 17:55
Avatar de Anya82
Colaborador
 
Fecha de Ingreso: noviembre-2007
Ubicación: tij.bc.mx
Mensajes: 1.269
Antigüedad: 10 años
Puntos: 196
Respuesta: Sombra con imagenes a los laterales de un div

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:
Ver original
  1. #container {
  2. width: 1092px;          /*espacio que ocupa la imagen de fondo*/
  3. min-height: 600px;
  4. height: 100&#37; auto !important;    /*para que definir height dos veces?*/
  5. background: url("img/shadow.png") repeat-y;    /*imagino que quieres que la sombra se vea tooodo hacia abajo*/
  6. padding: 49px;    /*el espacio que separara el area de 1092px del centro donde ira el contenido*/
  7. margin: 0 auto;
  8. text-align: left;   /*aqui te ahorras definir 3 veces la posicion del texto, si en realidad solo quieres que este a la izquierda*/
  9. }
  10.  
  11.  
  12. /*este estilo no lo entiendo muy bien*/
  13. #content {
  14. width: 911px;
  15. margin: 0 auto;
  16. padding-top: 40px;
  17. position: relative;
  18. display: block;
  19. }
__________________
¿Ya se enteraron? Grandes y maravillosas noticias... ¡Google no te cobra por búsqueda!
  #8 (permalink)  
Antiguo 30/11/2010, 09:26
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: Sombra con imagenes a los laterales de un div

Cita:
Iniciado por Anya82 Ver Mensaje
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:
Ver original
  1. #container {
  2. width: 1092px;          /*espacio que ocupa la imagen de fondo*/
  3. min-height: 600px;
  4. height: 100% auto !important;    /*para que definir height dos veces?*/
  5. background: url("img/shadow.png") repeat-y;    /*imagino que quieres que la sombra se vea tooodo hacia abajo*/
  6. padding: 49px;    /*el espacio que separara el area de 1092px del centro donde ira el contenido*/
  7. margin: 0 auto;
  8. text-align: left;   /*aqui te ahorras definir 3 veces la posicion del texto, si en realidad solo quieres que este a la izquierda*/
  9. }
  10.  
  11.  
  12. /*este estilo no lo entiendo muy bien*/
  13. #content {
  14. width: 911px;
  15. margin: 0 auto;
  16. padding-top: 40px;
  17. position: relative;
  18. display: block;
  19. }
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...
  #9 (permalink)  
Antiguo 30/11/2010, 10:09
Avatar de Anya82
Colaborador
 
Fecha de Ingreso: noviembre-2007
Ubicación: tij.bc.mx
Mensajes: 1.269
Antigüedad: 10 años
Puntos: 196
Respuesta: Sombra con imagenes a los laterales de un div

si quieres que este centrado el texto, pues solo cambia el text-align: center
__________________
¿Ya se enteraron? Grandes y maravillosas noticias... ¡Google no te cobra por búsqueda!

Etiquetas: imagenes, sombra
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:23.