[résolu] Probleme d'opacité (z-index)

Désolé pour la redondance, je viens de ce post mais lorsque je veux ajouter mon message il me dit que c fermé


Bonjour,

J'ai moi aussi le meme probleme, j'ai pourtant suivi tous vos conseils.

Voici mon code html

<div id='login'>
   <div id='login_haut'>
	TITRE
   </div>
   <div id='login_bas'>
	CONTENU
   </div>
</div>

<div id='transparent'></div>

Et mon CSS :

#login
{
	position:absolute;
	z-index:0;
	left:50%;
	top:50%;
	margin-top:-150px;
	margin-left:-150px;
	width:300px;
	height:300px;
}
#transparent
{
	position:absolute;
	z-index:1;
	height:100%;
	width:100%;
	background-color:#CACACA;
	filter: alpha(opacity=50);  
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

Et voici le résultat

En clair je veux grisser tout le fond de mon site pour ouvrir une petit fenetre (div) qui elle n'est pas grisée. Mais malgré que je fait sortir ce div en z-index:0, tout est grisé...

grrrrr

Merci d'avance

Stéphane
Modifié par ghostleretour (04 Mar 2007 - 18:20)

Salut,

Pour faire ressortir la fenêtre de login au-dessus du reste de la page, il faut lui donner un z-index supérieur au cadre transparent

Par ailleurs, il vaut mieux éviter d'utiliser les marges négatives pour centrer tes éléments horizontalement, car tu risques de rendre une partie ton contenu inaccessible lorsque la page est redimmensionnée. Ce n'est pas bien grave ici, mais c'est une bonne habitude à prendre, d'autant que tu n'en as pas besoin :

#transparent {
   position: relative;
   width: 100%;
   height: 100%;
   z-index: 1;
   /* Transparence */
   ...
}
#login {
   width: 300px;
   height: 300px;
   position: absolute;
   top: 50%;
   margin: -150px auto 0 auto;
   z-index: 99;
}

oups quel con... lol

Et j'ai cherché hier soir pendant au moins 1 heure lollll

Merci beaucoup ^^

Stéphane