Discussion :

[jbidou88]

Bonjour,

Je souhaite afficher un div par-dessus mon contenu afin d'afficher des informations. J'ai deux soucis ; le premier est que lorsque j'affiche la div class infos, elle poussent le contenu et ne s'affiche pas par-dessus le contenu. et le deuxième est qu'elle apparaît toujours à la même place et non pas sous la div en question.

Voici mon 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
	<div id="main">
 
		<div class="categorie" id="reestCompany">
			<h2>Reest Company</h2>
			<div class="photo">
				<img alt="Photo" src="galerie/reestcompany/vignettes/v1.jpg" />
				<h3>Underground</h3>
			</div>
			<div class="infos">
   				<dl>
   					<dt>Description</dt>
    				<dd>Cette photo a été prise à la gare de Porrentruy (JU).</dd>
    				<dt>Date</dt>
    				<dd>12 janvier 2010</dd>
    				<dt>Auteur</dt>
    				<dd>Martin Guélat</dd>
    				<dt>Appareil photo</dt>
    				<dd>Nikon 5D</dd>
    				<dt>Dimension</dt>
    				<dd>400x202</dd>
				</dl>
			</div>
 
			<div class="photo">
				<img alt="Photo" src="galerie/reestcompany/vignettes/v2.jpg" />
				<h3>Underground</h3>
			</div>
			<div class="infos">
   				<dl>
   					<dt>Description</dt>
    				<dd>Cette photo a été prise à la gare de Porrentruy (JU).</dd>
    				<dt>Date</dt>
    				<dd>12 janvier 2010</dd>
    				<dt>Auteur</dt>
    				<dd>Martin Guélat</dd>
    				<dt>Appareil photo</dt>
    				<dd>Nikon 5D</dd>
    				<dt>Dimension</dt>
    				<dd>400x202</dd>
				</dl>
			</div>
 
			<div class="photo">
				<img alt="Photo" src="galerie/reestcompany/vignettes/v3.jpg" />
				<h3>Underground</h3>
			</div>
			<div class="infos">
   				<dl>
   					<dt>Description</dt>
    				<dd>Cette photo a été prise à la gare de Porrentruy (JU).</dd>
    				<dt>Date</dt>
    				<dd>12 janvier 2010</dd>
    				<dt>Auteur</dt>
    				<dd>Martin Guélat</dd>
    				<dt>Appareil photo</dt>
    				<dd>Nikon 5D</dd>
    				<dt>Dimension</dt>
    				<dd>400x202</dd>
				</dl>
			</div>
 
			<div class="photo">
				<img alt="Photo" src="galerie/reestcompany/vignettes/v4.jpg" />
				<h3>Underground</h3>
			</div>
			<div class="infos">
   				<dl>
   					<dt>Description</dt>
    				<dd>Cette photo a été prise à la gare de Porrentruy (JU).</dd>
    				<dt>Date</dt>
    				<dd>12 janvier 2010</dd>
    				<dt>Auteur</dt>
    				<dd>Martin Guélat</dd>
    				<dt>Appareil photo</dt>
    				<dd>Nikon 5D</dd>
    				<dt>Dimension</dt>
    				<dd>400x202</dd>
				</dl>
			</div>
 
		</div>
	</div>

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
* {
	padding: 0;
	margin: 0;
}
 
body {
	background: url(../img/bg.png) repeat-x #ffffff;
	font-family: Verdana;
	font-size: .8em;
}
 
#main {
	width: 940px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
}
 
.categorie {
	border: 1px #999999 solid;
	background-color: #333333;
	margin-top: 20px;
	overflow: hidden;
}
 
.categorie:first-child {
	margin-top: 0;
}
 
.photo {
	background-color: #ffffff;
	margin: 14px;
	padding: 2px;
	width: 200px;
	height: 180px;
	float: left;
}
 
.infos {
	position: relative;
	background-color: #ffffff;
	margin: 14px;
	padding: 2px;
	width: 200px;
	display: none;
}
 
.photo:hover + .infos
{
    clear: left;
    display: block;
}

Merci pour votre aide

[Meloooo]

Salut,
Essayes de mettre un z-index à ta class infos :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
.infos {
	position: relative;
	background-color: #ffffff;
	margin: 14px;
	padding: 2px;
	width: 200px;
	display: none;
        z-index:1;
 
}

Ce qui permet de mettre les informations "en premier plan" c'est à dire par dessus ton contenu

[jbidou88]

Merci, mais ça ne change rien avec le z-index, j'ai mis la position de la class infos en absolute. ça fonctionne mais, il s'affiche toujours à la même place et non pas sous la photos en question ?

EDIT : exemple ici : http://reestcompany.com/temp/

[jbidou88]

J'ai trouver une solution

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
			<div class="test">
			<div class="photo">
				<img alt="Photo" src="galerie/reestcompany/vignettes/v1.jpg" />
				<h3>Underground</h3>
			</div>
			<div class="infos">
   				<dl>
   					<dt>Description</dt>
    				<dd>Cette photo a été prise à la gare de Porrentruy (JU).</dd>
    				<dt>Date</dt>
    				<dd>12 janvier 2010</dd>
    				<dt>Auteur</dt>
    				<dd>Martin Guélat</dd>
    				<dt>Appareil photo</dt>
    				<dd>Nikon 5D</dd>
    				<dt>Dimension</dt>
    				<dd>400x202</dd>
				</dl>
			</div>
			</div>

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
.test {
	float: left;
	margin: 14px;
}
 
.photo {
	background-color: #ffffff;
	padding: 2px;
	width: 200px;
	height: 180px;
 
}
 
.infos {
	position: absolute;
	margin-top: -184px;
	margin-left: 204px;
	background-image: url(../img/bg_i.png);
	padding: 2px;
	width: 150px;
	height: 180px;
	overflow-y: scroll;
	display: none;
}
 
.photo:hover + .infos, .infos:hover {
    display: block;
}

Merci