Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > CSS
CSS Forum d'entraide sur l'utilisation des feuilles de style CSS. Avant de poster : Cours CSS, FAQ CSS, Galerie CSS
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 15/11/2011, 17h04   #1
 
Homme
Analyse système
Inscription : juin 2011
Messages : 59
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Gironde (Aquitaine)

Informations professionnelles :
Activité : Analyse système

Informations forums :
Inscription : juin 2011
Messages : 59
Points : -7
Points : -7
Par défaut Problème d'affichage sous IE avec margin auto

bonjour,
voici d'abord le code html et ensuite le code css
Code html :
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 :
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!!
programmeur400 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 15/11/2011, 19h29   #2
 
Homme
Analyse système
Inscription : juin 2011
Messages : 59
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Gironde (Aquitaine)

Informations professionnelles :
Activité : Analyse système

Informations forums :
Inscription : juin 2011
Messages : 59
Points : -7
Points : -7
ça y est j ai trouvé, j avais pas mis de doctype dans mon fichier html..
programmeur400 est déconnecté   Envoyer un message privé Réponse avec citation 10
Réponse Proposer ce sujet en actualité Cette discussion est résolue.
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 13h26.


 
 
 
 
Partenaires

Hébergement Web