Discussion :

[yanngolf]

Salut tout le monde !

Je souhaite afficher une pub de la manière suivante :

Calque noir transparent sur la page et popup centrée sur le calque.
La page du site doit donc être visible en fond.


Mon code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
 
<div class="jeuxBackground" id="jeuxBackground" name="jeuxBackground" style="display: block;"></div>
 
<div class="jeu-container" id="jeuxContainer" name="jeuxContainer" style="display: block; text-align:center">
	<div id="jeu-contenu" >
    	<div id="jeu-left"></div>
        <div id="jeu-right"></div>
    </div>
</div>

Mes styles :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
 
.jeuxBackground {
    background-color: #000;
    display: none;
    height: 100% !important;
    opacity: 0.6;
    position: fixed !important;
    width: 100%;
    z-index: 50;
}
 
 
.jeu-container {
    display: none;
    height: 100%;
    position: fixed !important;
    text-align: center;
    width: 100%;
    z-index: 80;
}
 
#jeu-contenu {
	width:900px; 
	height:370px; 
	background-color:#FFF; 
	margin-top:11%; 
	margin-left: auto; 
	margin-right: auto;
	padding-left:20px;
	padding-top:20px;
 
}
 
#jeu-left {
	width:310px; 
	height:340px; 
	background-color:#9999cd; 
	float:left;
 
}
 
#jeu-right {
	width:550px; 	
	height:340px; 
	background-color:#000; 
	margin-left:20px;
	float:left;
 
 
}

Pour être plus explicite, j'ai mis une capture...




On voit bien les bordures de la page du site.

Sur Firefox ça fonctionne niquel, la popup descend avec le scroll.
Sur IE, tout est affiché l'un en dessous de l'autre :
Fond transparent, popup, site.

Mon problème est donc la compatibilité avec IE.

Merci pour votre aide !

[Ceddoc]

pour la transparence au premier abord j'aurais tendance à dire que IE ne gère pas le opacity il faut utiliser filter: opacity ou quelque chose du genre.

[insane1]

Pour gérer l'opacity :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
	opacity : 0.6;
    -moz-opacity : 0.6;
    -ms-filter: "alpha(opacity=60)";

[yanngolf]

Super Merci pour l'opacité.

Par contre les blocs s'affichent toujours l'un en dessous de l'autre sur IE mais ça fonctionne niquel sur FF et Chrome.

Affichage sur IE :
Partie transparente puis en dessous popup et en dessous site internet