[Résolu] Décalage d'écriture sur DIV flottante

[Bad_dl]

Bonjour,
Je me heurte a un "petit" "bug" d'affichage. Je suis sur qu'il y a une bonne raison a ce "décalage" mais je rame complètement , donc je viens vous embetté.

la situation:
j'ai une carte générée en SVG ,on peut cliqué sur chaque case pour avoir des info sur celle ci. Ces infos s'affiche dans un DIV que je positionne au niveau du clique.
Et voila mon probleme: l’écriture ne s'affiche qu'en dessous du SVG.
2 images pour mieux comprendre le probleme:


(sur la deuxième j'ai manuellement réduit la hauteur du svg pour bien montré l'effet)

Quelqu'un aurai la solution?
(je débute en SVG , et j'ai beau cherché je trouve nul part de solution)


Par avance
merci

[Myrina]

Bonjour,

il faudrait en montrer un peu plus pour que l'on puisse aider.

C'est un tooltip en CSS? avec du javascript?
Le tooltip est construit en SVG? ou en HTML (<div>)?
Comment est fait l'activation du tooltip au niveau des objets SVG?

[Bad_dl]

La carte en svg est généré "a la volé" par php pour l'affichage.
le positionnement du DIV est fait en javascript (le remplissage est généré par un appel AJAX)
Le script java script:

Code :

function information(carte_id){
jQuery(document).ready(function(){
   $("#carte").click(function(e){
  $.ajax({
url:"../../../Medieval_war/cartes/info_case/" + carte_id ,cache:false,success:function(html){
var x_div=e.pageX -250 ;
var y_div=e.pageY -600;
$('#information_personnage').empty();
$("#information_personnage").css('left',x_div).css('top',y_div);
$('#information_personnage').append(html);

},
error:function(XMLHttpRequest,textStatuts,errorThrows){
}
});
   });
})
}

un exemple de "case" SVG

Code :

<rect x="0" y="420" height="60" width="60" style="stroke:black; stroke-opacity:0.1;fill:url(#1);">
               </rect>
<rect x="0" y="420" height="60" width="60" style="fill-opacity:0;"
                onclick="information('19992')">
               </rect>

Le bout de css qui gère cette partie
(la classe "carte" positionne l'image svg , la classe "information_personnage" (qui porte mal son nom d’ailleurs) gère le DIV d'information)

Code :

#carte
    {
    width: auto;
    float:left;
    position: relative;
    top:-395px;
    left:155px;
    }
#information_personnage
{
    -moz-border-radius: 10px;
    position: relative;
    left: 100px;
    top: 200px;
    text-align: center;
    height: auto;
    width: 500px;
    z-index: 9;
    background-image: url("../img/fontpapier.jpg");
}
#information_personnage h3
{
    color:black;
    text-decoration:underline;
    text-align:center;
}

je met pas tous car ça serai sans doute trop long et pas utile (enfin je pense)

j'ai l'impression que mon probleme provient d'une "compatibilité" svg/html.
Vue que si je réduit la taille du svg ,le décalage se réduit aussi....

[atra27]

déjà première chose, vérifie que le html (la div) prend le même point d'origine que ton svg?

Car si c'est pas la même origine, ça sera forcément décalé

C'est la première chose qui me viens a l'esprit...

[Bad_dl]

le truc c'est que la DIV (enfin son image) se positionne comme il faut. seul le texte se retrouve repoussé sous le svg :cogne:
si ça continue , je vais repassé en html pure

[Ter Rowan]

est ce que tu peux nous montrer le message retour d'ajax, celui qui rentre dans la variable "html" :
$('#information_personnage').append(html);

[Myrina]

Il y a plusieurs points qui m'interpellent:
1/

$("#carte").click(function(e){...

je m'attendais plutôt à une granularité à la case et non à la carte dans l'ensemble; ceci ne donne pas les mêmes coordonnées(x=e.pageX,y=e.pageY) quelle que soit la case cliquée?

2/
Pourquoi ne pas utiliser plus simplement JQuery:

<rect x="0" y="420" height="60" width="60" style="stroke:black; stroke-opacity:0.1;fill:url(#1);">

               </rect>

<rect x="0" y="420" height="60" width="60" style="fill-opacity:0;" class="cliquable"><desc>19992</desc>

               </rect>

jQuery(document).ready(function(){

   $(".cliquable").click(function(e){

// ou .live("click", function(e){ si les cases peuvent être rafraichies via AJAX

   text=this.getElementsByTagName('desc').item(0);

   if (text) {

     carte_id=text.firstChild.data;

   } else {

     carte_id=0;

   }

  $.ajax({

url:"../../../Medieval_war/cartes/info_case/" + carte_id ,cache:false,success:function(html){

var x_div=e.pageX -250 ;

var y_div=e.pageY -600;

$('#information_personnage').empty();

$("#information_personnage").css('left',x_div).css('top',y_div);

$('#information_personnage').append(html);



},

error:function(XMLHttpRequest,textStatuts,errorThrows){

}

});

   });

})

3/
pourquoi X-250et Y-600?


4/
si le background est bien positionné, comme le demande Ter Rowan, la structure du html reçu en retour de l'appel AJAX peut influencer

[extraman]

Salut,

Juste au cas où, tu as sûrement ta div info dans ta div carte? Si c'est le cas, essaye juste de mettre position:absolute dans ton #information_personnage.

C'est peut être faux, mais ça peut être un bug dû à ça.

A+

[Ter Rowan]

Il y a plusieurs points qui m'interpellent:
1/

$("#carte").click(function(e){...

je m'attendais plutôt à une granularité à la case et non à la carte dans l'ensemble; ceci ne donne pas les mêmes coordonnées(x=e.pageX,y=e.pageY) quelle que soit la case cliquée?

perso, ça ne me choque pas. En effet il me semble qu'il vaut mieux associé un événement à un conteneur plutôt que 1000 contenus (du moins, quand je manipulais scriptaculous, j avais constaté de sacré ralentissement par la méthode d'event sur le détail, mais bon, y a 5-6 ans depuis c'est peut être plus performant)

De fait le pageX et pageY sont vécus en relatif par rapport à la carte entière. Et ça répond à ta question 3/ (coordonnées de la carte entière), enfin je dis ça à vue de nez

[Bad_dl]

Pour Myrina:
1) l'appel au js est fait par une fonction du svg , la seul solution (qui de plus me choque pas) a été celle ci. et je te rassure les coordonées change bien , d'ailleurs le haut de la DIV est toujours a la bonne place

2)Vue que le 1) marche bien.... j'ai pas cherché a utilisé Jquery seul

3)ils servent a "centré" le DIV par rapport a la position du clique

4)le retour ressemble a ça:

Code :

<h3>Information case:</h3>
        Coordonée: <?php echo $coordonee ?>
        <p>Zone de <?php echo $nom_terrain ?>
        <br>Le passage est <?php echo $passage ?> </p>
    <?php    if ($passage=="possible" ) {?>
        Sur cette zone , vos caracteristiques seront modifier :<br>
        <ul><li>Vision: -<?php echo $vision ?> zone(s)
        <li>Précision: -<?php echo $precision ?> %
        <li>Régéneration : -<?php echo $regeneration ?> point(s) de vie/tour
        </ul>
        En sortir vous coutera <?php echo $mouvement ?> points de mouvement
    <?php    }
        else
        {
        if ($perso_present==1)
        { ?>
       Une personne    est présente:<br>
            <?php echo $nom_perso ?>
             <br>Membre de la famille <?php echo $famille ?>
             <ul><li>Classe:<?php echo $type ?>
                 <li>Grade:<?php echo $grade ?>
                 <?php echo $html->image("grade/".$grade_id.".png");?>
                 <li>Arme:<?php echo $arme ?>
                 <li>Armure:<?php echo $armure ?>
                 <li>Monture:<?php echo $monture ?>
          <ul>
      <?php  }
        }
?>

Pour extraman:
Nop
ma DIV information_personnage , n'est pas dans ma div carte

Edit: j'ai testé la solution de Myrina , et ça change rien