Foros del Web » Creando para Internet » CSS »

Opacity+div anidados y visibility+anidados

Estas en el tema de Opacity+div anidados y visibility+anidados en el foro de CSS en Foros del Web. Si anido dos divs y en el primero establezco una opacidad, aunque en el hijo ponga opacity 1 se mantiene la del padre. Para intentar ...
  #1 (permalink)  
Antiguo 05/10/2009, 13:38
Avatar de caneva  
Fecha de Ingreso: junio-2006
Ubicación: Sevilla (España)
Mensajes: 81
Antigüedad: 11 años, 6 meses
Puntos: 1
Opacity+div anidados y visibility+anidados

Si anido dos divs y en el primero establezco una opacidad, aunque en el hijo ponga opacity 1 se mantiene la del padre. Para intentar solucionarlo desanide los divs y funcionaba, pero no me convence la opción así que pregunto por si hay alguna forma de solucionarlo más "correcta".

Por otro lado para evitar tener que ocultar ambas "capas" mediante javascript:capa.style.... decidí contener a ambos divs en otro, llamado "ventana_form_nuevo_cliente" y establecer en el la visibilidad en false por defecto, estando dicho parámetro ausente en los dos hijos porque mi idea es que lo heredaran del padre. Lo curioso es que aunque visibility esta inicializado en hidden al cargar la página muestra todas las capas, es decir como si hubiera estado en visible. Revisando el CSS que ha cargado el navegador con firedebug veo que ha ignorado completamente la linea de visibility=hidden; vamos es que ni aparece, ¡se la ha comido!.... me pregunto, ¿qué ocurre?

Código PHP:
<div id="ventana_form_nuevo_cliente">
  <
div id="ventana_fnc_fondo"></div>
  <
div id="ventana_fnc_contenido">Contenido de la ventana</div>
</
div
Código PHP:
BODY 

    
margin0
    
font-familyVerdanaArialHelveticasans-serif;
}

/*MENÚ*/
#menu { float: left; border:1px solid #FF0000; margin:0; padding:0; background:#6699FF; }
#menu ul li { display:inline; }
#menu ul { padding-left: 0; }

/*CUERPO CENTRAL*/
#cuerpocentral 
{
    
clear:both
    
text-align:left;
    
border-top:1px solid #c9d7f1;
    
margin-left:auto;
    
margin-right:auto;
}

#ventana_form_nuevo_cliente
{   
  
visibilityfalse;
}

#ventana_fnc_fondo
{
  
positionabsolute;
  
filteralpha(opacity=50);
  
opacity0.5;
  
width100%;
  
height100%;
  
top0;
  
left0;
  
background-color#000000;
  
z-index1;
}

#ventana_fnc_contenido
{  
  
background-color#CCCCCC; 
  
positionabsolute;
  
filteralpha(opacity=100);
  
opacity1;
  
top50%;
  
left50%;
  
width300px;
  
height500px;
  
margin-left: -150px;
  
margin-top: -250px;
  
z-index2;

Por otro lado me planteo otra duda ¿qué sería mejor crear un objeto "ventanas" mediante clases de php o mediante clases js? Lo digo porque estoy pensando crear un constructor para reutilizar el código de las ventanitas y demás.. añadirle acciones, etc..

Gracias por tu tiempo.
__________________
Cita:
"El camino empieza renunciando al control, y volviéndose flexibles."
  #2 (permalink)  
Antiguo 05/10/2009, 15: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
Respuesta: Opacity+div anidados y visibility+anidados

Ocurre que, según has puesto en tu código CSS, visibility false no existe, debiendo ser hidden:
Cita:
#ventana_form_nuevo_cliente
{
visibility: hidden;
}
  #3 (permalink)  
Antiguo 05/10/2009, 15:56
Avatar de caneva  
Fecha de Ingreso: junio-2006
Ubicación: Sevilla (España)
Mensajes: 81
Antigüedad: 11 años, 6 meses
Puntos: 1
Respuesta: Opacity+div anidados y visibility+anidados

Cita:
Iniciado por Mikmoro Ver Mensaje
Ocurre que, según has puesto en tu código CSS, visibility false no existe, debiendo ser hidden:
¡Aish, vaya error tonto! es lo que tiene mezclar tantos lenguajes uno acaba loco :S.

¿A las otras preguntas nadie tiene nada que decir? :)
__________________
Cita:
"El camino empieza renunciando al control, y volviéndose flexibles."
  #4 (permalink)  
Antiguo 05/10/2009, 16:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Opacity+div anidados y visibility+anidados

Sobre opacity.

Si no quieres/puedes asumir la herencia, tienes, entre otras, dos opciones:
--> simularlo en base al posicionamiento como se comenta en el #4 del enlace anterior.
--> Utilizar el valor de css3 RGBA para background: rgba + css

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 23:34.