Discussion :

[gOO69]

Bonjour,

J'ai du mal à comprendre ce qui se passe. J'ai créé une page contenant d'un côté une carte et de l'autre une liste d'acteurs. Lorsque l'on passe la souris sur les acteurs, un rond css se positionne sur la carte (exemple).
La page a été testée sous les dernières versions de Chrome, Opera, Safari et IE, FF. Pour les 3 1er, chacun des 9 acteurs se positionne parfaitement. Pour IE et FF, très bizarrement, le 8ème et 9ème acteur sont décalés vers le bas et uniquement ceux-là.

Le code est assez simple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="bulle_carte" style="margin-top:<?php echo $element_infoRight['elements_position_top']; ?>px; margin-left:<?php echo $element_infoRight['elements_position_left']; ?>px;">
<?php echo $element_infoRight['elements_ordered']; ?>
</div>

(Dans la base de données, chaque enregistrement d'acteur est composé, entre autre, d'un champ "margin-top" et "margin-left", permettant de positionner les acteurs sur la carte via l'administration du site, en changeant les valeurs des champs.)

• la class="bulle_carte"

Code style :

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
.bulle_carte {
	width:25px;
	height:25px;
	-webkit-border-radius:100px;
	-moz-border-radius:100px;
	-o-border-radius:100px;
	border-radius:100px;
	border: thin solid #6E9E09;
	background-color:#6E9E09;
	position:absolute;
	color: #FFFFFF;
	text-align: center;
	vertical-align:middle;
	font-weight: bold;
	font-size:19px;
	font-family: sans-serif;
}</style>

• le script

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$(function() {
   $('.bulle_carte').hide();
   $('.caption').hover(
 
function () {
   $(this).next().fadeIn();
   },
function () {
   $(this).next().fadeOut();
   });
 
});

Auriez-vous une idée de l'origine de ce décalage qui ne touche que 2 des 9 acteurs listés ?

Un grand merci pour votre aide !!!

[NoSmoking]

Bonjour,
on ne le dira jamais assez une ID DOIT être UNIQUE dans la page.

Est tu sûr des valeurs de décalage injectées ?

[gOO69]

Bonsoir NoSmoking,

Merci pour la remarque. Erreur corrigée. Pas de changement dans la page, mais l'incohérence est éliminée.
Concernant les valeurs, voici un print_r limité aux coordonnées :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

Array ( [elements_id] => 15 [elements_position_top] => 258 [elements_position_left] => -382 ) 1Array ( [elements_id] => 16 [elements_position_top] => -34 [elements_position_left] => -162 ) 1Array ( [elements_id] => 36 [elements_position_top] => 99 [elements_position_left] => -194 ) 1Array ( [elements_id] => 37 [elements_position_top] => -100 [elements_position_left] => -311 ) 1Array ( [elements_id] => 41 [elements_position_top] => -65 [elements_position_left] => -217 ) 1Array ( [elements_id] => 40 [elements_position_top] => -288 [elements_position_left] => -99 ) 1Array ( [elements_id] => 39 [elements_position_top] => -281 [elements_position_left] => -160 ) 1Array ( [elements_id] => 38 [elements_position_top] => -461 [elements_position_left] => -286 ) 1Array ( [elements_id] => 42 [elements_position_top] => -390 [elements_position_left] => -87 ) 1

Les elements_id en question sont les n° 38 et 42. Les valeurs négatives trop importantes peuvent-elles avoir un effet ?

Merci !

[NoSmoking]

De ce que je viens de voir ton problème vient du fait que ton item #8 s'affiche sur 2 lignes engendrant un décalage par rapport à ton positionnement.

Je ne saurais trop te conseiller de positionner ta carte de fond et tes repères apparaissant en position:absolute et ayant le même référent, de la sorte tu ne dépendras plus des padding ou autre margin des éléments tel que tes LI.

D'autre part observe ce qui se passe lorsque tu réduis la largeur de la fenêtre par exemple.