Discussion :

[omdafer]

Bonjour, je suis en train de faire un slider avec un formulaire qui se masque/s'affiche, avec un effet glissé quand on clique sur un lien ( en forme de bouton +/- demi cercle) juste en dessous. Ma fonction JQuery fonctionne pas de souci.

La moitié de mon cercle s'incruste dans le formulaire avec un margin-top négatif:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
a.circle {
   position: absolute;
   margin-top: -80px;
   display:block;
   height:  80px;
   width: 80px;
   text-align: center;
   border-radius: 80px; // .... etc pour autres navigateur 
   // et la technique behavior: url(/PIE.htc); pour anciens IE
}

Ces éléments sont dans un div #contenu, mais quand je masque le formulaire la partie du cercle qui sort de #contenu se superpose sur de tout ce qu’il y a au dessus de #contenu (menu, header etc…).
Et je ne veux voir que la moitié du cercle dans contenu.

j'ai essayé de mettre mes div menu etc en :

Code :

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

position: relative;

Code :

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

1
2
z-index: 9999;

et a.circle en :

Code :

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

1
2
position: relative;
z-index: -10;   // -100    - 10000 ...

Rien ne fait. Je me bats avec des z-index et des position depuis des heures. Voilà la structure css de ma page :


Avez-vous une idée de ce que je dois faire?

[omdafer]

Je ne vais quand même pas mettre des absolute un peu partout juste pour empêcher mon a.circle de se superposer aux autres éléments quand il sort du cadre de div#contenu, ce n'est pas très propre.

[omdafer]

Ah mais oui!

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
...
<div id="menu">...</div>
...
...
<div id="contenu">
   <div id="slider"> // Parent de #form et .circle
      <form id="form" ... > //Le formulaire afficher/masquer
         ...
      </form>
      <a class="circle" ... ><p>+</p></a> //Le cercle action slide absolute
   </div>
</div>
...

J'ai pas mis #slider en position "relative". Donc le .circle en position "absolute" n'a pas de parent "relative" en référence.
Le a.circle ne se balade plus n'importe où. J'ai donc :

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
#contenu{ /* En surclasse pour avoir le slide à ras */
  overflow:hidden; /* .circle peux déborder du cadre de #contenu sans se superposer  */
  padding-top:0px;
}
 
#slider{
 position:relative; /*Parent en relative*/
 margin: 0 auto 40px; /*Marge de sécu en bas pour le .circle en absolute reste visible */
 width: 442px;
}
 
#form{
 position: relative;
 background: #e4e4e4;
 padding: 20px;
 margin-top:0px;
 border-radius: 0px 0px  10px 10px;
 behavior: url(/PIE.htc); /*  Astuce coin arrondie sous IE */
 -webkik-border-radius: 0px 0px 10px 10px;
 -moz-border-radius: 0px 0px  10px 10px;
 -ms-border-radius: 0px 0px  10px 10px;
 -o-border-radius: 0px 0px  10px 10px;
 display:none;
}
 
.circle{
 background: #e4e4e4;
/* En cercle */
 -webkik-border-radius: 80px;
 -moz-border-radius: 80px;
 -ms-border-radius: 80px;
 -o-border-radius: 80px;
 border-radius: 80px;
 behavior: url(/PIE.htc); /* Prise en charge coin arrondie sous IE */
 height: 80px;
 width: 80px;
 left:184px; /* Centré sur #form */
 bottom: -30px; /* remonte la moitié du cercle inscruté dans #form
 position: absolute;
 text-align: center;
 display:block;
}
 
.circle p{ /* centré le +/- au milieu du demi cercle */
 font-size: 28px;
 color:#617789;
 text-align:center;
 padding-top:20px;
 padding-left:33px;
}

Pour le coup des z-index ne servent à rien, vu que "overflow:hidden" fait bien son boulot.