18067 sujets

Questions générales et questions de débutants

PB image map en CSS

Bonjour à tous!

J'ai un problème bête et méchant avec ce tutoriel: il fonctionne parfaitement sur FF, mais sur IE il n'apparait...qu'un écran blanc! Smiley confus

Si quelqun peut m'expliquer l'erreur que j'ai faite... parce que je ne comprends pas, il me semble avoir écris le code comme il est indiqué sur le tutoriel...

Voici mon code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>accueil</title>
<style type="text/css">

body {
padding: 0;
margin:10px 0 ;
text-align: center ;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}



#image {    /* bloc image en arrière-plan */
width : 640px;
height: 480px;
background: url(images/fond_accueil.jpg)no-repeat;
border:2px solid #333366;
margin:0 auto;/*centre tt élément de type block*/


}

#zone1 {    /* zone cliquable */
position:absolute;
width : 90px;
height: 63px;
left: 580px;
top: 150px;
}

#zone2 {    /* zone cliquable */
position:absolute;
width : 200px;
height: 40px;
left: 600px;
top: 230px;
}

#zone3 {    /* zone cliquable */
position:absolute;
width : 100px;
height: 80px;
left: 370px;
top: 180px;
}

#zone4 {    /* zone cliquable */
position:absolute;
width : 100px;
height: 80px;
left: 400px;
top: 300px;
}

#zone5 {    /* zone cliquable */
position:absolute;
width : 100px;
height: 80px;
left: 400px;
top: 300px;
}

#zone6 {    /* zone cliquable */
position:absolute;
width : 50px;
height: 40px;
left: 195px;
top: 420px;
}

#zone7 {    /* zone cliquable */
position:absolute;
width : 100px;
height: 40px;
left: 290px;
top: 420px;
}

</style>
</head>

<body>

<div id="image">
	<a id="zone1" href="chapA.htm" ></a>
	<a id="zone2" href="chapD.htm" ></a>
	<a id="zone3" href="chapB.htm" ></a>
	<a id="zone4" href="chapE.htm" ></a>
	<a id="zone5" href="chapC.htm" ></a>
	<a id="zone6" href="" ></a>
	<a id="zone7" href="" ></a>
</div>


</body>
</html>


Je vous dis merci d'avance à tous! Smiley lol
Me revoilà!

Décidément il semble que je ne sois pas la seule à bloquer...

Du coup j'ai cherché un autre code qui fonctionne sur le même principe sur le site suivant. Et là, que c soit sur IE ou FF, ça marche ni-ckel!

voici du coup le code "miracle":
body {
  background-color: #fff;
  margin: 0;
  padding: 0;
  }
  
#image { 
  background-image: url(images/fond_accueil.jpg);
  height: 480px;
  width: 640px; 
  }

#menu a {
  position: absolute;
  height: 38px;
  width: 88px;
  top: 31px; 
  text-decoration: none;
  }
  
#menu a i { visibility: hidden; }


a#contacts {top: 420px; left:20px; }
a#ML {  top: 420px; left:130px; }
a#chapA { top:152px; left: 410px; }
a#chapB { top: 160px; left: 200px; }
a#chapC { top: 300px; left: 240px; }
a#chapD {  top: 220px; left: 480px; }
a#chapE { left: 526px; width: 61px; }


Et le HTML correspondant:
<div id="image">
<div id="menu">
  <a href="" id="contacts"><i>Contacts</i></a>
  <a href="" id="ML"><i>Mentions légales</i></a>
  <a href="chapA.htm" id="chapA"><i>L'équilibre</i></a>
  <a href="chapB.htm" id="chapB"><i>Les récepteurs de l'équilibre</i></a>
  <a href="chapC.htm" id="chapC"><i>L'épithélium sensoriel</i></a>
  <a href="chapD.htm" id="chapD"><i>Le ganglion vestibulaire </i></a>
  <a href="" id="chapE"><i>Les réflexes de l'équilibre</i></a>
</div>
</div>



Seulement, nouveau problème:
Impossible de centrer mon image sans supprimer les liens... nouveau mystère!

Alors si quelqun a une idée... Smiley ohwell
Sujet clos
Aller à