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>Merci pour votre aide
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; }
Partager