Foros del Web » Creando para Internet » CSS »

enviar capa absoluta al fondo...

Estas en el tema de enviar capa absoluta al fondo... en el foro de CSS en Foros del Web. Hola, queria consultar si es posible enviar una capa con posicion absoluta al fondo. Mejor lo explico con un ejemplo... http://www.kibit.cl/ejemplos/css/tags.html En esa pagina tengo ...
  #1 (permalink)  
Antiguo 26/12/2007, 21:42
Avatar de Snd234  
Fecha de Ingreso: mayo-2007
Ubicación: Frente al PC
Mensajes: 413
Antigüedad: 10 años, 6 meses
Puntos: 2
enviar capa absoluta al fondo...

Hola, queria consultar si es posible enviar una capa con posicion absoluta al fondo. Mejor lo explico con un ejemplo...

http://www.kibit.cl/ejemplos/css/tags.html

En esa pagina tengo el siguiente codigo:

Código:
<div id="tags">
    <div id="tags_main">
        <div id="tags_top"></div>
        <div id="tags_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
    <div id="tags_bottom"></div>
</div>
Y el siguiente estilo:
Código:
#tags {
    width: 730px;
    margin: 0px auto;
}

#tags_content {
    padding: 0px 16px;
}

#tags_top {
    height: 32px;
    width: 730px;
    background-image: url(images/tags_top_bg.png);
    background-position: top;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 2;
}

#tags_main {
    background-image: url(images/tags_main_bg.png);
    background-position: top;
    background-repeat: repeat-y;
}

#tags_bottom {
    height: 10px;
    background-image: url(images/tags_bottom_bg.png);
    background-position: center;
    background-repeat: no-repeat;
}
El problema, es que quiero enviar la capa #tags_top al fondo para que el texto que tiene la capa #tags_content se vea por encima, y de esa forma el degrado quede siempre arriba y el texto comienze desde alli...

Es posible solucionarlo?
__________________
KIBIT.cl
  #2 (permalink)  
Antiguo 27/12/2007, 01:46
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: enviar capa absoluta al fondo...

Hola:

Al ponerle un z-index superior, estás poniendo la capa al frente... y por la distribución de tus capas, simplemente bastaría quitando ese estilo...

Pruébalo y nos cuentas.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 27/12/2007, 09:53
Avatar de Snd234  
Fecha de Ingreso: mayo-2007
Ubicación: Frente al PC
Mensajes: 413
Antigüedad: 10 años, 6 meses
Puntos: 2
Re: enviar capa absoluta al fondo...

Pero el z-index se aplica en caso de bajer 2 o mas capas con posicion absoluta, en este caso solo tengo una...
__________________
KIBIT.cl
  #4 (permalink)  
Antiguo 27/12/2007, 14:20
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Re: enviar capa absoluta al fondo...

Cita:
Iniciado por Snd234 Ver Mensaje
Pero el z-index se aplica en caso de bajer 2 o mas capas
no, todos los elementos tienen z-index, aún aquellos en donde no los tienen explícito el navegador aplica un z-index auto, que es igual al z-index del elemento padre.

ponle un z-index negativo y ya estaría (aunque igual creo que usar 5 capas para lo que estas haciendo es complicarse demasiado)...
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #5 (permalink)  
Antiguo 27/12/2007, 15:19
Avatar de Snd234  
Fecha de Ingreso: mayo-2007
Ubicación: Frente al PC
Mensajes: 413
Antigüedad: 10 años, 6 meses
Puntos: 2
Re: enviar capa absoluta al fondo...

Es que... de que otra forma se podria hacer?
La idea es que el contenido cresca y el fondo se siga manteniendo, el color y borde de la imagen...

Su fuera el contenido fijo solo podria una capa y la imagen de fondo y listo pero en este caso es dinamico...
__________________
KIBIT.cl
  #6 (permalink)  
Antiguo 27/12/2007, 17:29
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: enviar capa absoluta al fondo...

El problema que tienes es algo que nunca he podido resolver, pero te puedo dar una de las alternativa de las cuales me he tenido que valer debido a ese mismo problema. Puedes usar márgenes negativos en el div del contenido. Solo tienes que cambiar estos dos classes:
Código HTML:
#tags_content {
    margin-top:-25px;
    padding: 0px 16px;
}

#tags_top {
    height: 32px;
    background-image: url(images/tags_top_bg.png);
    background-position: top;
    background-repeat: no-repeat;
}
yo le puse -25px como ejemplo pero tu puedes ponerle cuanto necesites.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
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 00:57.