Foros del Web » Creando para Internet » CSS »

z-index, problemas con gif o png

Estas en el tema de z-index, problemas con gif o png en el foro de CSS en Foros del Web. Buenas gente; tengo 3 capas: Código: body { background:url(../img/fons.gif) center repeat-y; text-align:center; z-index:3; } #centrarcapes{ width:900px; margin:0 auto; text-align:left; margin-top:-50px; z-index:4; } #capadarrera{ position:relative; top:175px; ...
  #1 (permalink)  
Antiguo 10/03/2008, 14:43
 
Fecha de Ingreso: agosto-2007
Mensajes: 44
Antigüedad: 10 años, 3 meses
Puntos: 0
z-index, problemas con gif o png

Buenas gente;

tengo 3 capas:

Código:
body {
background:url(../img/fons.gif) center repeat-y;
text-align:center;
z-index:3;
}

#centrarcapes{
width:900px;
margin:0 auto;
text-align:left;
margin-top:-50px;
z-index:4;
}

#capadarrera{
position:relative;
top:175px;
width:100%;
height:50px;
background-color:#564b18;
}
y me gustaria que me quedase asi:

y esto es lo que consigo

http://www.thewilfamily.com/prueba/prueba.html

No consigo que capa "capadarrera" quede por detrás de body ni de "centrarcapes".
He probado con la propiedad z-index, pero no funciona bien, me oculta completamente la capa "capadarrera" y no se muestra....

Es cosa del gif que hace de fondo en el body? o que hago mal?

Gracias a [email protected] por vuestro tiempo
  #2 (permalink)  
Antiguo 10/03/2008, 15:09
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: z-index, problemas con gif o png

te sugiero que uses una imagen pequeña imagen (de el alto que quieras y dos pixels de ancho) en el body y la repitas horizontal. De esa forma no tienes que tener ese div extra (capadarrera).
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #3 (permalink)  
Antiguo 10/03/2008, 16:03
 
Fecha de Ingreso: agosto-2007
Mensajes: 44
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: z-index, problemas con gif o png

Vale, la puedo hacer más pequeña de alto, pero no de ancho, ya que el ancho hace de interior del contenedor para el texto. Pero, ¿en que formato (gif, png, jpg) pongo el background del body para que me transparente la capa "capadarrera"?

Mi css ---> http://www.thewilfamily.com/prueba/medias/css/layout.css

Muchas gracias
  #4 (permalink)  
Antiguo 10/03/2008, 21:07
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: z-index, problemas con gif o png

puede ser en cualquier formato ya que no va a tener transparencia.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #5 (permalink)  
Antiguo 11/03/2008, 01:07
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: z-index, problemas con gif o png

Hola, Guillegm.
Yo diría que el problema es el siguiente: tienes el gráfico de la sombra de tu página como fondo de la etiqueta body, y estás usando una caja (capadarrera), que desborda por los laterales. Pues bien, la cosa es que no creo que con z-index puedas llevar una caja detrás del body porque en ese caso desaparecerá del todo, y si lo consiguieras, como la sombra no es transparente, tapará esa zona de blanco sombreado.

Lo primero que necesitas para conseguir el efecto que buscas es que la sombra sea transparente, o bien, hacer un gráfico con la parte verde que desborda por los laterales (con su trocito de sombra), y colocarla de fondo del body , haciendo un contenedor principal que sea quien tenga la sombra de fondo.

Espero haberme explicado bien.

Mikel.
  #6 (permalink)  
Antiguo 11/03/2008, 03:15
 
Fecha de Ingreso: agosto-2007
Mensajes: 44
Antigüedad: 10 años, 3 meses
Puntos: 0
De acuerdo Re: z-index, problemas con gif o png

Cita:
Iniciado por Mikmoro Ver Mensaje
Hola, Guillegm.
Yo diría que el problema es el siguiente: tienes el gráfico de la sombra de tu página como fondo de la etiqueta body, y estás usando una caja (capadarrera), que desborda por los laterales. Pues bien, la cosa es que no creo que con z-index puedas llevar una caja detrás del body porque en ese caso desaparecerá del todo, y si lo consiguieras, como la sombra no es transparente, tapará esa zona de blanco sombreado.
Gracias por la explicación, entiendo el problema.
Cita:
Iniciado por Mikmoro Ver Mensaje
Lo primero que necesitas para conseguir el efecto que buscas es que la sombra sea transparente,
con un png, y, poniendolo de fondo en el body? o con un gif? (lo digo por iexplore)
Cita:
Iniciado por Mikmoro Ver Mensaje
o bien, hacer un gráfico con la parte verde que desborda por los laterales (con su trocito de sombra), y colocarla de fondo del body , haciendo un contenedor principal que sea quien tenga la sombra de fondo.
pero solo necesito que se vea el fondo verde en una parte del documento, en el top:175px; y si hago un gráfico con sombra y el fondo verde, se verá así en todo el body...
Entonces,
hago un png o gif con el fondo transparente?
si la caja capadarrera desborda por los lados, entonces se verá el verde de capadarrera por los lados y el fondo de body por encima?

Muchas gracias a todos; en especial mikmoro y a juaniquillo
  #7 (permalink)  
Antiguo 11/03/2008, 03:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: z-index, problemas con gif o png

Mira, creo que lo puedes solucionar de esta manera, tocando lo menos posible:

- coge este grafico


y súbelo a su sitio (/img/etc.)

- Ahora, cambia un par de clases en tu archivo layout.css:

#capadarrera { position: relative;
top: 175px;
width: 100%;
height: 50px;
background-color: rgb(86, 75, 24);
background-image: url(../img/fons1.png);
background-position: center top;
z-index: 0;
}

#contenidor { margin: -45px auto auto;
text-align: left;
width: 900px;
z-index: 10;
position: relative;
}

Pruébalo así. Creo que con esos 2 cambios bastará.
Ya contarás.
Mikel.

Última edición por Mikmoro; 13/03/2008 a las 20:13
  #8 (permalink)  
Antiguo 11/03/2008, 06:17
 
Fecha de Ingreso: agosto-2007
Mensajes: 44
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: z-index, problemas con gif o png

Salgo de trabajar a las 15:00, cuando coma y llegue a mi casa lo pruebo, pero creo que he pillado tu solución.
Luego lo pongo en práctica. Muchas gracias por tu tiempo.

Edito: Ha funcionado, muchas gracias Mikmoro, por darme la solución y por hacermela entender.

un 10

Última edición por guillegm; 11/03/2008 a las 13:29
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 09:47.