Retroceder   Foros del Web > Diseño de Sitios web > CSS

Respuesta
 
Herramientas Desplegado
Antiguo 26-dic-2007, 20:42   #1 (permalink)
Snd234 no se puede cailificar en este momento
 
Avatar de Snd234
 
Fecha de Ingreso: mayo-2007
Ubicación: Frente al PC
Mensajes: 228
Enviar un mensaje por MSN a Snd234
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
Snd234 está desconectado   Responder Citando
Antiguo 27-dic-2007, 00:46   #2 (permalink)
Moderador
caricatos llegará a ser famoso muy prontocaricatos llegará a ser famoso muy prontocaricatos llegará a ser famoso muy prontocaricatos llegará a ser famoso muy prontocaricatos llegará a ser famoso muy pronto
 
Avatar de caricatos
 
Fecha de Ingreso: noviembre-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 12.218
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
caricatos está desconectado   Responder Citando
Antiguo 27-dic-2007, 08:53   #3 (permalink)
Snd234 no se puede cailificar en este momento
 
Avatar de Snd234
 
Fecha de Ingreso: mayo-2007
Ubicación: Frente al PC
Mensajes: 228
Enviar un mensaje por MSN a Snd234
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
Snd234 está desconectado   Responder Citando
Antiguo 27-dic-2007, 13:20   #4 (permalink)
Moderador HTML y CSS
webosiris llegará a ser famoso muy prontowebosiris llegará a ser famoso muy prontowebosiris llegará a ser famoso muy prontowebosiris llegará a ser famoso muy prontowebosiris llegará a ser famoso muy pronto
 
Avatar de webosiris
 
Fecha de Ingreso: noviembre-2002
Ubicación: /home/montevideo
Mensajes: 5.965
Enviar un mensaje por MSN a webosiris Enviar un mensaje por Skype™ a webosiris
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)...
__________________
Oraculus.com. Sitios web artesanales para el siglo XXI

PSD a HTML. Tu diseño. Nuestro código.
webosiris está desconectado   Responder Citando
Antiguo 27-dic-2007, 14:19   #5 (permalink)
Snd234 no se puede cailificar en este momento
 
Avatar de Snd234
 
Fecha de Ingreso: mayo-2007
Ubicación: Frente al PC
Mensajes: 228
Enviar un mensaje por MSN a Snd234
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
Snd234 está desconectado   Responder Citando
Antiguo 27-dic-2007, 16:29   #6 (permalink)
Colaborador
juaniquillo llegará a ser famoso muy prontojuaniquillo llegará a ser famoso muy prontojuaniquillo llegará a ser famoso muy prontojuaniquillo llegará a ser famoso muy pronto
 
Avatar de juaniquillo
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan
Mensajes: 3.610
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
Sólo espero escribir un artículo algún dia...
juaniquillo está desconectado   Responder Citando
Respuesta
No hay votos aún.


Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder temas
No puedes subir archivos adjuntos
No puedes editar tus mensajes

BB code is Activado
Caritas están Activado
[IMG] está Activado
Código HTML está Desactivado


La Zona horaria es GMT -6. Ahora son las 05:11.


Message Board Statistics

LinkBacks Enabled by vBSEO 3.1.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93