Foros del Web » Creando para Internet » CSS »

Problema con z-index

Estas en el tema de Problema con z-index en el foro de CSS en Foros del Web. Estimados: Recurro a ustedes para buscar solución y consuelo frente a semejante drama. Tengo dos contenedores (div) de igual tamaño y posición que se superponen ...
  #1 (permalink)  
Antiguo 14/03/2007, 16:43
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Problema con z-index

Estimados:

Recurro a ustedes para buscar solución y consuelo frente a semejante drama.

Tengo dos contenedores (div) de igual tamaño y posición que se superponen mediante el uso de z-index, requisito necesario para que el objetivo de diseño se cumpla. Hasta ahí ningún problema.

Datos necesarios: En el contenedor superior (que llamaremos amistosamente "capa 1") tengo texto y otra información dinámica. En la capa inferior ("capa 0") tengo sólo un fondo.

EL PROBLEMA: Necesito que cuando la "capa 1" crezca debido a su contenido, la "capa 0" también crezca, lo que actualmente no sucede por ser contenedores independientes el uno del otro.

MAS INFO: Debido a las características, no es posible meter la "capa 1" dentro de la "capa 0", deben permanecer independientes.

LO QUE SE BUSCA IDEALMENTE:
Una solución mediante CSS. Sé que se puede hacer mediante JavaScript, pero no es la idea. El ideal es solucionar todo mediante hojas de estilo u otra solución potente y rápida para los distintos navegadores.

Muchísimas gracias a todos los que me puedan ayudar ya que llevamos un buen rato machucandonos la cabeza con esto.

Saludos a todos!

codigo css:
Código PHP:
#main-content {
        
color#666666;
        
floatleft;
        
font-size12px;
        
heightauto;
        
width701px;
        
margin0 auto 0 auto;
        
padding0;


#main-center {
        
background-colortransparent;
        
background-imageurl(imagenes/pattern3.jpg);
        
background-positioncenter;
        
background-repeatrepeat-y;
        
position:relative;
        
margin0 auto 12px auto;
        
padding0;
        
width701px;
        
min-height422px;
        
heightauto !important;
        
height422px;
        
z-index:0;
}

#main-center-z {
        
background-colortransparent;
        
position:absolute;
        
top120px;
        
width701px;
        
min-height422px;
        
heightauto !important;
        
height422px;
        
margin0 auto 0 auto;
        
padding0;
        
z-index:1;

codigo html:
Código PHP:
<div id="main-content" >
<
div id="main-center-z">
    <
p>Aquí va el contenido del centro</ p>
    <
p>Probando alto centro</ p>
    <
p>Probando 2</ p>
    <
p>Probando 3</ p>
    </
div>
<
div id="main-center"></div>
</
div
  #2 (permalink)  
Antiguo 14/03/2007, 18:25
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Re: Problema con z-index

Ya que al parecer mi pregunta anterior no tuvo muchas respuestas, lo planteo de la siguiente forma alternativa (otra propuesta y otra pregunta):

Imaginemos que tengo un contenedor padre llamado "content", el cual a su vez tiene dos contenedores hijos: "div-1" y "div-2".

Sabemos que si "div-2" aumenta su altura, el padre aumentará la altura con él.

La pregunta es: Dado lo anterior... ¿Puede el padre obligar a "div-1" a aumentar su altura en la medida que la de él aumente? (y por ende crecer cada vez que se modifica la altura de "div-2")

Muchísimas gracias por los comentarios, ayudas, etc.

PD: El ideal es hacerlo mediante CSS y no tener que utilizar JavaScript.
  #3 (permalink)  
Antiguo 14/03/2007, 18:55
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: Problema con z-index

Yo creo que lo había entendido la primera vez, pero me parece imposible.
Creo que si una no está dentro de la otra, difícilmente se va a poder hacer crecer una según crezca la otra, pero en fin, quizá a alguien se le ocurra algo.

Mikel.

P.D.: además, ni me imagino por qué tienes que hacerlo así a la fuerza. Si te apetece lo explicas un poco (y si puedes, por el curro me refiero).
  #4 (permalink)  
Antiguo 14/03/2007, 20:10
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Re: Problema con z-index

la idea es la siguiente:

Necesito dos capas una sobre puesta de la otra, la sobrepuesta o la capa que esta más al frente es la de contenido (main-center-z) muestra solo el texto de contenido y fondo transparente, la otra capa es la que muesta "gráfica", me refiero a que va ha estar redondeada los bordes mediante una librería javascript y ademas tendrá el fondo de imagen. Este fondo se mostrará en la capa sobre-puesta.
  #5 (permalink)  
Antiguo 15/03/2007, 13:42
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: Problema con z-index

No sé con qué librería vas a hacer lo de las esquinas redondeadas, pero yo te muestro un ejemplo de lo que entiendo que quieres hacer, hecho con prototype y openrico.

http://www.menoslobos.com/mikel/forosdelweb/zsamer.html

En el ejemplo verás que efectivamente una capa está dentro de otra; hay una capa con un fondo que se repite horizontalmente (un degradado), y es la que recibe los bordes redondeados. Dentro de ella, hay otra con el texto. Esta segunda es la que tiene un alto mínimo de 422px (como en tu ejemplo), y es la que crece con su contenido y la que, a su vez, hace crecer a su contenedora, la que tiene el fondo con el degradado.

No sé si esto se acercará a lo que buscabas, Ya contarás.

Mikel.
  #6 (permalink)  
Antiguo 15/03/2007, 21:13
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Re: Problema con z-index

muchas gracias, no sabía que openrico tambien redondea los contenedores.
  #7 (permalink)  
Antiguo 16/03/2007, 03:02
Avatar de Shade  
Fecha de Ingreso: noviembre-2006
Mensajes: 262
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Problema con z-index

Poderse se puede xD

http://www.alistapart.com/articles/multicolumnlayouts

Ahi vienen diferentes ejemplos de divs que crecen al mismo tiempo. Muy muy muy buena info, ya lo vereis.
  #8 (permalink)  
Antiguo 16/03/2007, 03:22
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: Problema con z-index

Si, esa misma solución la he propuesto en algún otro hilo cuando se necesitaba algo así, pero este no era el caso. Lo que zsamer necesita es algo completamente distinto, creo.

Mikel.
  #9 (permalink)  
Antiguo 16/03/2007, 03:40
Avatar de Shade  
Fecha de Ingreso: noviembre-2006
Mensajes: 262
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Problema con z-index

Cita:
Iniciado por zsamer Ver Mensaje
Ya que al parecer mi pregunta anterior no tuvo muchas respuestas, lo planteo de la siguiente forma alternativa (otra propuesta y otra pregunta):

Imaginemos que tengo un contenedor padre llamado "content", el cual a su vez tiene dos contenedores hijos: "div-1" y "div-2".

Sabemos que si "div-2" aumenta su altura, el padre aumentará la altura con él.

La pregunta es: Dado lo anterior... ¿Puede el padre obligar a "div-1" a aumentar su altura en la medida que la de él aumente? (y por ende crecer cada vez que se modifica la altura de "div-2")

Muchísimas gracias por los comentarios, ayudas, etc.

PD: El ideal es hacerlo mediante CSS y no tener que utilizar JavaScript.
Segun esto... creo que el necesita algo como:

http://www.alistapart.com/d/multicol...thContent.html

esa idea mas o menos (pueden probar aumentar el contenido de el div con los <li> y veran como el resto aumenta.

Hay un div container que tiene al menu, el centro y la columna de la derecha. Y todos aumentan respecto al resto.
  #10 (permalink)  
Antiguo 16/03/2007, 04:18
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: Problema con z-index

Hola, Shade.
Tienes razón en que ese tipo de solución es muy práctica cuando debes tener una capa al lado de la otra, pero creo que no es el caso; fíjate lo que dijo en su primer mensaje:

Cita:
Iniciado por zsamer Ver Mensaje
Estimados:
Tengo dos contenedores (div) de igual tamaño y posición que se superponen mediante el uso de z-index, requisito necesario para que el objetivo de diseño se cumpla.
Dos contenedores de igual tamaño y posición, superpuestos con z-index, ya que la idea es que uno lleve el fondo gráfico y el otro el contenido.

Creo que con la solución que aportas no es posible hacer eso, Además, mientras no se pueda meter gráficos en los bordes (CSS3), no podría hacer que el truco del borde aportara un gráfico de fondo a la estructura. O al menos es lo que creo.

Mikel.
  #11 (permalink)  
Antiguo 16/03/2007, 04:32
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: Problema con z-index

Piensa si se podría hacer esto con la solución que comentas, que además tiene la complicación de tener que redondear los bordes del contenedor principal con una librería Javascript.

Cita:
Iniciado por zsamer Ver Mensaje
la idea es la siguiente:

Necesito dos capas una sobre puesta de la otra, la sobrepuesta o la capa que esta más al frente es la de contenido (main-center-z) muestra solo el texto de contenido y fondo transparente, la otra capa es la que muesta "gráfica", me refiero a que va ha estar redondeada los bordes mediante una librería javascript y ademas tendrá el fondo de imagen. Este fondo se mostrará en la capa sobre-puesta.
Creo que tiene bastante poco que ver.

Mikel.
  #12 (permalink)  
Antiguo 16/03/2007, 13:02
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Re: Problema con z-index

holas,

Mikmoro me entendio perfecto mi problema, no busco implementar concepto de columnas igual tamaño(eso es para casos de columnas que flotan una al lado de la otra), mi problema es otro, es otro el concepto, ya que estoy trabajando con posiciones y z-index.

Estoy trabajando con dos capas, las cuales la manejo con z-index: 0 y otra z-index: 1.

Ok, ahora en la capa z-index: 1 va a tener el contenido "dinámico" con fondo transparent, hasta ahí todo bien, ahora la otra capa se encargará de dar un fondo y esquinas redondeadas.

La idea es tener la primera capa detrás de la segunda capa para que de formato (fondo y esquinas redondeadas) al texto (contenido dinámico) de la 2º capa.

Ahora teniendo las dos capas funcionando, necesito que si crece la capa de contenido (segunda capa z-index:1) también crezca la 1º capa z-index:0.
  #13 (permalink)  
Antiguo 16/03/2007, 13:10
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: Problema con z-index

¿No te ha servido de referencia mi ejemplo de openrico? Quiero decir, para, viendo el concepto, poder adaptarlo a tu caso.

Mikel.
  #14 (permalink)  
Antiguo 16/03/2007, 13:28
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Re: Problema con z-index

Si lo revicé, buen ejemplo.

El unico problema es que necesito que el texto del contenedor de contenido esté pegado (sin margen) al top del contenedor que contiene el fondo y esquinas redondeadas.

La idea es que no exista margen top en el texto.
  #15 (permalink)  
Antiguo 16/03/2007, 13:36
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: Problema con z-index

Pero eso no es ningún problema: siguiendo mi ejemplo, elimina la línea:

padding-top: 10px;

del selector #texto y añade por ejemplo:

margin-top: -8px;

Y se pegará arriba, además de que todo sigue funcionando bien.

Mira el ejemplo:

http://www.menoslobos.com/mikel/foro...b/zsamer2.html

Mikel.
  #16 (permalink)  
Antiguo 16/03/2007, 19:08
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Re: Problema con z-index

excelente mikmoro, un maestro.

muy buena solución y muy agradecido.

saludos.
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 17:24.