Discussion :

[niboro14]

Bonjour,

Je suis en train de créer un site et je vous demande de l'aide car je cale à un endroit

J'ai 2 div l'un en dessous de l'autre, j'ai appliqué la propriété -moz-box-shadow sur le premier (oui je suis sous firefox).

L'ombre s'affiche bien sur les cotés mais pas sur le 2è div...

J'ai essayé de l'enlever pour voir et l'ombre s'affiche bien partout.

Dès que je remet le 2è div, l'ombre disparait dessous...

Pouvez-vous m'aider ?

Merci d'avance.

[math55]

Salut,

j'ai essayé ce que tu dis et je n'ai aucun problème.

Code :

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

1
2
3
4
5
<div style="height:100px; -moz-box-shadow: black 0 0 5px; width:400px">
</div>
<br />
<div style="height:100px; -moz-box-shadow: black 0 0 5px; width:400px">
</div>

Si tu as toujours un problème, il nous faudrait plus d'information. Est-ce que tu pourrais mettre ton code source ici?

Si tu as trouvé le problème, et bien, mets ton sujet résolu!

[niboro14]

D'abord merci pour ta réponse

En fait le 2è div n'a pas d'ombre mais une couleur de fond (blanc).

Mon code html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div id="menu">
  <a href="#" class="lienMenuActif">Lien 1</a>
  <a href="#">Lien 2</a>
  <a href="#">Lien 3</a>
  <a href="#">Lien 4</a>
  <a href="#">Lien 5</a>
</div>
<div id="corps">
  Corps de la page
</div>

Et mon code css :

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
 
div#menu
{
  padding: 0px;
  height: 43px;
  background: url(img/fondsLiensMenu.png) repeat-x 0px 0px;
  border-left: 1px rgb(0,0,0) solid;
  border-right: 1px rgb(0,0,0) solid;
  margin-bottom: 0px;
  width: 800px;
  margin: auto;
  border-left: 1px rgb(0,0,0) solid;
  border-right: 1px rgb(0,0,0) solid;
  -moz-box-shadow: 0px 0px 5px rgb(0,0,0);
  -webkit-box-shadow: 0px 0px 5px rgb(0,0,0);
  box-shadow: 0px 0px 5px rgb(0,0,0);
}
div#corps
{
  padding: 0px;
  background-color: rgb(255,255,255);
  border-bottom: 1px rgb(0,0,0) solid;
  width: 800px;
  margin: auto;
  border-left: 1px rgb(0,0,0) solid;
  border-right: 1px rgb(0,0,0) solid;
  -moz-box-shadow: 0px 0px 5px rgb(0,0,0);
  -webkit-box-shadow: 0px 0px 5px rgb(0,0,0);
  box-shadow: 0px 0px 5px rgb(0,0,0);
}

Ces 2 div sont "collés" l'un au dessus de l'autre.

[math55]

Voici ce que j'obtiens avec ton code source



Selon ce que j'ai pu comprendre, dans ton cas, l'ombre n'apparait pas autour du second div ce qui voudrait dire que je ne suis pas capable de répéter ton problème. J'attends ta réponse s'il y a quelque chose que j'ai mal compris!

[niboro14]

Attends en meme temps je me suis trompé

le code css de "corps" est :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
div#corps
{
  padding: 0px;
  background-color: rgb(255,255,255);
  border-bottom: 1px rgb(0,0,0) solid;
  width: 800px;
  margin: auto;
  border-left: 1px rgb(0,0,0) solid;
  border-right: 1px rgb(0,0,0) solid;
}

Désolé...

[math55]

Donc, ton problème, c'est que le deuxième div est trop près de l'autre ce qui fait que tu ne vois pas l'ombre, même s'il y en a une.

Pour régler ce problème, tu peux mettre un

Code :

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

background-color:transparent

au style de ton deuxième div.

Si tu peux pas faire ça, tu peux aussi forcer ton premier div à être par-dessus ton second div, en plaçant ce bout de code dans le style du premier div

Code :

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

1
2
position:relative;
z-index:1;

le z-index permet de donner la priorité à certains éléments pour qu'il s'affiche par-dessus un autre. C'est la profondeur d'un élément. Par défaut, la profondeur est à 0, donc en mettant une profondeur de 1, ça le met par-dessus l'autre. Si tu es bon en math, tu peux imaginer ça comme étant l'axe des Z perpendiculaire à ton écran. Derrière l'écran, il y a les coordonnées négatives et, devant, les coordonnées positives.

Voilà! si tu as d'autres questions, gêne-toi pas!