slider Jquery / Image par dessus en cadre [Résolu]

[radicaldreamer]

Bonjour,

J'ai un problème pour le positionnement d'un "cadre" (image) par dessus un slider en jQuery.

Le problème est que soit le calque ne se met pas sur l'image mais en dessous ou bien que le cadre apparait en dessous et non au dessus du slider. Pourtant, j'ai bien modifié la valeur du z-index, changé positionné le tout. Rien y fait.

J'ai vérifié les valeurs z-index du slider et ça va maximum à 20 donc j'ai mis mon autre div à 50 et toujours rien...

Un coup de pouce serait-grandement apprécié.

voici le code:

Code CSS :

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
#content{
  width:970px;
  margin:0 auto;
  background:lightblue; /* #fdfbfb */
  margin-top:20px;
}
 
#page{
  width:70%;
  color:yellow;
  float:left;
}
 
#menu_right{
  width:30%;
  height:10px;
  float:right;
  display:block;
  background:red;
}
 
 
 
/*
	Slideshow
*/
 
#slides {
	position:relative;
	z-index:0;
}
 
/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/
 
.slides_container {
  z-index:1;
	width:675px;
	overflow:hidden;
	position:relative;
	display:none;
 
}
 
/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/
 
.slides_container a {
	width:675px;
	height:275px;
	display:block;
}
 
.slides_container a img {
	display:block;
}
 
/*
	Next/prev buttons
*/
 
#slides .next,#slides .prev {
	position:relative;
	top:107px;
	left:-39px;
	width:24px;
	height:43px;
	display:block;
	z-index:1;
}
 
#slides .next {
	left:585px;
}
 
/*
	Pagination
*/
 
.pagination {
	margin:26px auto 0;
	width:100px;
}
 
.pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
}
 
.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-position:0 0;
	float:left;
	overflow:hidden;
}
 
.pagination li.current a {
	background-position:0 -12px;
}
 
#layerStyle{
  width:675px;
  height:265px;
  background:red url(../images/top_slide.png);
  position:relative;
  display:block;
}

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
  <div id="content">
 
      <div id="page">
        <div id="slides">
          <div class="slides_container">
            <a href="http://www.flickr.com/photos/jliba/4665625073/" target="_blank"><img src="./images/slide/emeline.jpg" width="675" height="265" alt="Slide 1"></a>
            <a href="http://www.flickr.com/photos/jliba/4665625073/" target="_blank"><img src="./images/slide/Hopla-Komm.jpg" width="675" height="265" alt="Slide 1"></a>
            <a href="http://www.flickr.com/photos/jliba/4665625073/" target="_blank"><img src="./images/slide/emeline.jpg" width="675" height="265" alt="Slide 1"></a>
            <a href="http://www.flickr.com/photos/jliba/4665625073/" target="_blank"><img src="./images/slide/Hopla-Komm.jpg" width="675" height="265" alt="Slide 1"></a>
          </div>
        </div>
        <div id="layerStyle"></div>
    </div>
    <div id="menu_right">
 
    </div>
	<div style="clear:both;">
	</div>

Edit: solution alternative qui fonctionne: au lieu de mettre une div avec un background, j'ai mis l'image en dur <img> puis position absolute, zindex 999