Décalage d'une map avec Firefox et IE.

Fermé

telliak Messages postés 3667 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 4 novembre 2024 - 15 oct. 2018 à 16:12
telliak Messages postés 3667 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 4 novembre 2024 - 15 oct. 2018 à 17:19

Bonjour,
J'ai fait un site http://www.bourg-de-batz.fr/plan_site/plan_site.html, dans lequel en haut à gauche de chaque page, j'ai placé un bloc de navigation (voir image ci-dessous).
Pas de problème avec Chrome et Opera.
En revanche, avec Firefox et IE, la map subit un décalage vers la droite de 28 px, égal à la somme du padding et de la marge gauche de l'image, comme on le voit avec le message s'affichant au survol des «boutons», par exemple «Accueil» en passant sur la maison.
Quelqu'un saurait corriger ?
Merci d'avance

A voir également:

Décalage d'une map avec Firefox et IE.
Google map satellite gratuit - Guide
Video downloadhelper firefox - Télécharger - Outils pour navigateurs
Itinéraire google map entre deux adresses - Guide
Creer une carte google map - Guide
Firefox telecharger - Télécharger - Navigateurs

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38320 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 30 novembre 2024 4 707
15 oct. 2018 à 16:35

Bonjour,

De quel décalage parles tu ?

De plus... il serait bien de poster le code correspondant ( css et html) du bloc qui te pose problème
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
.

telliak Messages postés 3667 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 4 novembre 2024 876
15 oct. 2018 à 17:19

Re,
Merci de t'intéresser à mon problème.
Quand on passe la souris sur l'image, de gauche à droite, par exemple sur le cercle de la maison, son passage n'est reconnu que lorsque la souris atteint le bord droit de la maison, au lieu d'être pris en compte dès le premier point gauche du cercle.
Cette différence est de 28 px (+/- 1) soit la somme marge gauche + padding définis dans imagedenavigation .
Je ne comprends pas la raison de cette particularité avec FF.

Il me semblait plus simple d'afficher la page, raison pour laquelle je n''avais pas mis le code.

CSS

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
  background: url(images/fond_global_jolie_photo.jpg) fixed; 
  background-repeat:repeat;    /* Etend à la hache (CSS2 et +)                */
                               /* Va étendre ou limiter le fond d'écran à la  */
  background-size: 100% 100%;  /* hauteur et à la largeur de l'écran          */
}
#bogue_fixe {
  position: absolute; 
  width: 990px;  
  left: 50%; 
  margin-left: -495px;
  padding-top: 3px; padding-bottom: 3px; /* Marges intérieures haut et bas    */
}  
/* --- Définitions des bordures et des fond standards de blocs et autres ---- */     
.bordsetfondpage    {
  border-top :  1px solid MidnightBlue; border-right  : 2px solid MidnightBlue;
  border-left : 1px solid MidnightBlue; border-bottom : 2px solid MidnightBlue; 
  border-radius: 10px; -moz-border-radius: 10px; 
  -webkit-border-radius: 10px; -ms-border-radius: 10px; 
  background-image: url(images/fondconteneur.bmp); 
}
.imagedenavigation {
  float: left; 
  margin-left: 3px; 
  padding: 7px 25px; 
}
.centre       { text-align: center; }

HTML

<body>

  <div id="bogue_fixe" class="bordsetfondpage">
<!--                Afficher le bloc de navigation globale                   -->
<!-- Texte inclus - Début - batz_navigation_globale.html -->
<!--                       Image de navigation globale                       -->
	<img class="bordsetfondcadre centre imagedenavigation" 
			 src="../images/navigation_globale.png" 
			 alt="Bloc de navigation" 
			 title="Bloc de navigation"  
			 usemap="#Map" />
	<map name="Map" id="Map">
		<area shape="circle" coords="55,45,20" alt="Accueil" title="Accueil" href="../index.html" />
		<area shape="circle" coords="105,45,21" href="javascript:history.go(-1)" target="_top" 
					alt="Retour à la page précédemment affichée" title="Retour à la page précédemment affichée" />

<!--       Incorporation du code d'appel de la génération d'un courrier      -->
		<script type="text/javascript">
		// Définition d'une variable contenant le début du code HTML
			var areatomail="";
		 // Ajout des différents éléments de l'adresse mail dans la variable
			areatomail +='<area shape="circle" coords="155,46,21" href="mailto:lagardere';
			areatomail +="@";
			areatomail +='gmail.com" alt="Nous écrire..." title="Nous écrire..." target="_blank" / >';
		// Ecrire la ligne
		//  alert (areatomail);
			document.write(areatomail);
		</script>
	</map>

<!-- Texte inclus -  Fin  - batz_navigation_globale.html -->
  
<!--                      Positionner l'image du titre                       -->
    <img class="bordsetfondcadre imagedutitre" 
         src="titrebatzplansite.png" 
         alt="Le Bourg de Batz aux XIXe et XXe siècles, titre de la page du plan du site" 
         title="Le Bourg de Batz aux XIXe et XXe siècles, titre de la page du plan du site" />
    <div class="fermeur"></div> 
...

Discussions similaires

Facture de google 380€ !

Smart IPTV décalage de son

Arnaque frauduleuse Ireland ltd