28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Sur certains sites, lorsqu'on s'authentifie, le fond de la page web apparaît grisé pour laisser en 1er plan la fenêtre de login. J'essaie de reproduire cet effet mais ma solution ne fonctionne pas sous IE (toute ma page est grisée).
Voici ce que j'utilise :

Définition des divs login et fenetre-gris :

#login
{
	position: fixed;
	background: transparent url(images/win-login.png) no-repeat;
	width: 408px;
	height: 254px;
	left: 50%;
	top: 350px;
	margin-left: -204px;
	margin-top: -127px;
	color: #cd7708;
	font-size: 1.4em;
	display: none;
	z-index:600;
}

#fenetre-gris
{
	position:fixed;    
	top:0;                    
	left:0;                    
	height:100%;            
	width:100%;
	display:none;
	background-color:#000;
	-moz-opacity:0.30;
	opacity:0.3;
	filter:alpha(opacity=30); 
	-khtml-opacity:0.30;
	z-index:550;
}


et le code Javascript lorsque l'on clique sur un lien :

function toggleLogin(prm)
{
	document.getElementById("fenetre-gris").style.display=prm;
	document.getElementById("login").style.display=prm;
}


prm vaut soit none, soit inline.

J'ai vu qu'il existait un bug IE avec la position relative et le z-index. J'ai en effet dans mon bloc "login" des éléments positionnés en relative mais je ne sais pas si c'est vraiment le problème ; j'ai essayé de mettre un z-index dans mes blocs relative mais ça n'y change rien.

Auriez-vous une idée ? Ca fonctionne très bien sous Firefox et Safari.

Merci pour votre aide.