bonjour,
voici d'abord le code html et ensuite le code css
Code html : 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 <html> <head> <title>Jo Deyris-Peintures</title> <META NAME="description" lang="fr" content=""> <META NAME="keywords" lang="fr"content=""> <link rel="stylesheet" href="css1.css" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title></title> <script type="text/javascript"> <!-- var ChangeImage = function ChangeImage(Url) { document.getElementById('affiche-image').innerHTML = '<img src="'+Url+'" />'; } --> </script> </head> <body> <div class="conteneur-galerie-image"> <div class="gauche-galerie-image"> <ul class="miniature-galerie-image"> <li><img src="15.jpg" alt="Chrysantheme" onmouseover="ChangeImage('15.jpg');"/></li> <li><img src="15.jpg" alt="Desert" onmouseover="ChangeImage('15.jpg');"/></li> <li><img src="15.jpg" alt="Hydrangeas" onmouseover="ChangeImage('15.jpg');"/></li> <li><img src="15.jpg" alt="Meduses" onmouseover="ChangeImage('15.jpg');"/></li> </ul> </div> <div class="droite-galerie-image"> <div id="affiche-image"><img src="15.jpg" alt="Chrysantheme"/></div> </div> </div> </body> </html>
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 .conteneur-galerie-image{ margin:0 auto; width:670px; /*height:auto; overflow:auto; padding:5px;*/ } .gauche-galerie-image{ width:100px; height:auto; float:left; margin-top:316px; } .droite-galerie-image{ width:550px; height:auto; float:right; margin-top:100px; } .droite-galerie-image img{ width:490px; height:400px; /*background:#D5F4FF;*/ /*padding:5px;*/ } .miniature-galerie-image{ list-style-type:none; /*padding:0;*/ } .miniature-galerie-image li{ display:inline; } .miniature-galerie-image li img{ width:40px; height:40px; /*background:#EEE;*/ /*padding:5px;*/ margin:1px;*/ }
Ce sont des images en miniature qui s'affichent à coté en grand lorsque la souris passe dessus. Comment se fait t'il que sous chrome et firefox l'affichage de l'ensemble des images en miniature et de la grande image à droite soit bien centrée au milieu de la page avec donc le même espace à droite et à gauche de l'ensemble de toutes ces images et que sous IE l'ensemble de toutes ces images (les miniatures et la grande) soit decalé sur la gauche? C'est pas normal, c'est comme si IE ne prenait pas en compte mon margin:0 auto!!
Partager