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

Fermé

telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 - 15 oct. 2018 à 16:12
telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 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
Comment supprimer bing de firefox - Guide
Telecharger carte google map - Guide
Itinéraire google map entre deux adresses - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
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 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 875
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

Prélèvement Google Ireland Limited

Facture de google 380€ !

Décalage son et image sur YouTube ?

Arnaque frauduleuse Ireland ltd

Prélèvement "CB Google" inconnu. Arnaque ?

Discussions similaires

Newsletters