Mettre un div en avant plan qui recouvre toute la page

**Etanne** · 19/11/2007, 11h39

Bonjour,

Je cherche en CSS comment mettre une div devant ma page qui recouvre la totalité la page.

J'ai cherché sur Google, et je n'ai rien trouvé

Sur Alsascréation ils proposent ce code :

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
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
<head>
 
<style type="text/css">
<!--   
*{border:0;margin:0;padding:0}
html,body{width:100%;height:100%;}
#cache {
    position:absolute; 
    z-index:100; 
    filter:alpha(opacity=60);
	  -moz-opacity: 0.6;
	  opacity: 0.6;
    background-color: red;
    width:100%;
    height:100%;
}
#cache div{
    font-size: 28px;
    color: black;
    text-align:center;
		position:absolute;
		top:45%;
    width:100%;
}
-->
</style>
 
 
 
</head>
 
<body>
 
<script type="text/javascript">
 
<!--   
 
//création du div visible seulement si javascript est activé
 
calque=document.createElement('div');calque.id="cache";
 
centre=document.createElement('div');
 
calque.appendChild(centre)
 
centre.appendChild(document.createTextNode("Veuillez patienter pendant le chargement de la page..."))
 
document.body.appendChild(calque)
 
window.onload=function(){}
 
-->
 
</script>
<p>contenu de la page</p>
</body>
 
</html>

Mais hélas la calque n'est pas capable d'avoir la taille de la page, si celle-ci est scrollable.

Il existe une solution ou dois-je me tourner vers le javascript ?

Bonne journée,
Florian

**LeXo** · 19/11/2007, 11h45

quelque chose de dynamique qui fasse un écran de chargement ?

en javaScript ou peut etre java

tu voudrais un truc comment ?
comme sur ce site quand tu clic sur le bouton de connexion ?

ecran

**Bisûnûrs** · 19/11/2007, 12h05

Ou Window Prototype en Javascript :

http://prototype-window.xilinus.com/samples.html

**Etanne** · 19/11/2007, 12h23

Envoyé par LeXo

quelque chose de dynamique qui fasse un écran de chargement ?

en javaScript ou peut etre java

tu voudrais un truc comment ?
comme sur ce site quand tu clic sur le bouton de connexion ?

ecran

Voila, c'est exactement ce que je désire. L'utilisation de ce calque n'est pas pour la chargement, mais pour que l'utilisateur ne puisse pas cliquer derrière un pop-up (qui est aussi un div).

Je vais essayer de décortiquer le code, si jamais tu sais où je peux trouver un tuto là dessus, pourrais-tu m'indiquer où le trouver ?

Merci.
Florian

**Etanne** · 19/11/2007, 12h28

Mince, l'effet fonctionne avec FireFox, mais pas avec IE7

**Candygirl** · 19/11/2007, 12h38

Envoyé par Etanne

Je cherche en CSS comment mettre une div devant ma page qui recouvre la totalité la page.

...

Mais hélas la calque n'est pas capable d'avoir la taille de la page, si celle-ci est scrollable.

Il existe une solution ou dois-je me tourner vers le javascript ?

Normalement en virant le height du body et le remplaçant par un min-height tu devrais obtenir l'effet voulu sur tous les navigateurs récents (IE7 compris), par contre le javascript sera nécessaire pour IE6-:

Code :

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

1
2
3
 
html {height:100%;}
body {min-height:100%;position:relative;}

Edit: il faut aussi ajouter un position:relative sur le body afin qu'il devienne la référence pour le positionnement absolu en lieu et place de la fenêtre.

**Etanne** · 19/11/2007, 13h53

Envoyé par Bisûnûrs

Ou Window Prototype en Javascript :

http://prototype-window.xilinus.com/samples.html

Il utilise des claque devant, mais il y a un problème avec la scollbar avec IE7

Envoyé par Candygirl

Normalement en virant le height du body et le remplaçant par un min-height tu devrais obtenir l'effet voulu sur tous les navigateurs récents (IE7 compris), par contre le javascript sera nécessaire pour IE6-:

Code :

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

1
2
3
 
html {height:100%;}
body {min-height:100%;}

Je vais essayer de faire un script qui sera utiliser par tous les navigateurs (FF,IE7 et IE6).

Florian

**Etanne** · 19/11/2007, 14h39

Et voila

Compatible IE6, IE7, et FF !.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
  <style type="text/css">
    html, body {
      margin: 0;
    }
 
    div.forground {
      position: fixed;
      background-color: black;
      width: 100%;
      height: 100%;
      filter:alpha(opacity=40);
      -moz-opacity: 0.4;
    }
  </style>
 
  <!--[if lte IE 6]>
  <style type="text/css">
  html, body
    {
    height: 100%;
    }
  div.forground {
    position: absolute;
  }
  </style>
  <![endif]-->
 
 
  </head>
 
  <body>	
 
    <div class="forground">
    &nbsp;
    </div>
 
   <!-- TEXTE POUR REMPLIR -->
    test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
 
  </body>
</html>

**Candygirl** · 19/11/2007, 15h20

Envoyé par Etanne

Compatible IE6, IE7, et FF

Sur IE6 quand la page dépasse les 100% ça m'étonne beaucoup

Perso je ferais du genre (j'avais oublié de spécifié l'ajout du position:relative dans mon message ci-dessus que je vais éditer):

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
  <style type="text/css">
    html, body {
      margin: 0;
    }
 
		html {height:100%;}
		body {min-height:100%;position:relative;}
 
    div.forground {
      position: absolute;
      background-color: black;
      width: 100%;
      height: 100%;
      filter:alpha(opacity=40);
      opacity:0.4;
      -moz-opacity: 0.4;
    }
  </style>
 
  <!--[if lte IE 6]>
  <style type="text/css">
  div.forground {
    height:expression(document.body.clientHeight + "px");
  }
  </style>
  <![endif]-->
 
 
  </head>
 
  <body>	
 
    <div class="forground">
    &nbsp;
    </div>
 
   <!-- TEXTE POUR REMPLIR -->
    test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
 
  </body>
</html>

Edit: ne pas oublier de définir la vraie propriété css3 opacity ou opera et safari risquent d'afficher un écran noir...

**Etanne** · 21/11/2007, 09h30

Salut,

En local sur mon poste, avec IE6 (une version de MultipleIEs) je n'avais pas de soucis. Mais merci quand même

. Je n'ai pas cherché la compatibilité avec d'autres navigateurs car ce script est pour un site interne où le navigateur peut être que FF, IE6 ou IE7.

Merci !
Florian

**Candygirl** · 21/11/2007, 10h55

Envoyé par Etanne

En local sur mon poste, avec IE6 (une version de MultipleIEs) je n'avais pas de soucis.

Dans les mêmes conditions chez moi (en local, multiple IE) le cadre gris s'arrête à 100% de la hauteur de la fenêtre et donc il manque un bout lors du scrolling ce qui est d'ailleurs le comportement normal de IE6 dans cette situation à ma connaissance.

Mais peut-être avais-tu ajouté du js à ton code et ne l'avais-tu aps posté?

Mettre un div en avant plan qui recouvre toute la page

CSS

Discussions similaires

Partager

Partager