Comunidad de diseño web y desarrollo en internet online

DIV con Sombra CSS por encima de otro div

Citar            
MensajeEscrito el 13 Feb 2013 10:40 am
buenas... ese es el problema.

tengo un div por encima de otro div. el de arriba tiene una sombra creada con box-shadow

lo que me ocurre es que el div de abajo me tapa la sombra... no sé como explicarlo. Probe cambiando el z-index del de abajo en -9999 y subiendo el de arriba hasta 9999 y nada tampoco.

Por artabro

40 de clabLevel



 

soy el jefe

firefox
Citar            
MensajeEscrito el 13 Feb 2013 11:51 pm
Sube tu HTML y CSS a un JsFiddle para poderte asistir mejor.

Por Kinduff

Claber

3563 de clabLevel

21 tutoriales
3 articulos

 

web dev wizzard

chrome
Citar            
MensajeEscrito el 14 Feb 2013 10:08 am
está subido a http://www.artabria.es

de paso me decis como se podría mejorar la cosa... que siempre se puede!

Gracias!

Por artabro

40 de clabLevel



 

soy el jefe

firefox
Citar            
MensajeEscrito el 14 Feb 2013 06:05 pm
No entiendo muy bien lo que tienes pero te pongo este codigo y tu dime que te falta y que te sobra saludos
.arriba {
background:#00cc00;
width:120px;
padding:2px;
}
.abajo{
background:#cc0000;
width:120px;
padding:2px;
box-shadow:-2px -2px 5px;
}
Epero que te pueda ayudar :lol:

Por Rarufa

16 de clabLevel



 

chrome
Citar            
MensajeEscrito el 14 Feb 2013 07:00 pm
La sombra de #pase debe quedar por encima de #margen?

quita tus z-index...

y a #margen le agregas

Código CSS :

position:relative;
z-index:-1;


eso debería servir.

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 15 Feb 2013 08:10 am
Nada... no puedo ponerle position:relative porque se me desmonta la plantilla.

los div que manejo son estos:

#margen{
margin: 10px auto;
width:820px;
border: 5px solid #FFF;
z-index: -1;
}

#hoja{
width:820px;
padding-top: 10px;
padding-bottom: 10px;
background: #FFF;
filter: alpha(opacity=80); /* internet explorer */
-khtml-opacity: 0.8; /* khtml, version anterior de safari */
-moz-opacity: 0.8; /* firefox, mozilla, netscape */
opacity: 0.8; /* safari, chrome, opera */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*internet explorer 8 - gracias Andres */
z-index: -2;

}

y luego #principal que es en el que aparecen los post...

la idea no es que la sombra del slider tapara estos dos... la idea es hacer una banda lateral de 182px que flotara a la derecha todo a lo largo del body... desde los botones sociales hasta abajo de todo

la necesito para las pages, que tendrán botones de navegación a mayores... la historia es que esa 'banda' a la derecha del body, por debajo de estas dos y con toda la altura tendría position:fixed ->

problemas:
- la caja de sombra del slider
- la versión para móviles...

Por artabro

40 de clabLevel



 

soy el jefe

chrome
Citar            
MensajeEscrito el 15 Feb 2013 06:44 pm
position:relative, no mueve el objeto de lugar...

Por cierto, tienes un #hoja arriba de header y otro #hoja dentro de margin... los id's no se deben repetir


Entonces no "flotes" la banda... ponla directo con position fixed y a esa le agregas el z-index:-1;
A los que queden por arriba de la banda position:relative; no deberían necesitar z-index.

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.