Discussion :

[djoufouf]

bonjour,

j ai un petit probleme de positionnement avec une div flotante, ai chercher plusieurs solution mais je ne trouve pas pourquoi elle reste dans ma scrollbar,

voici une image demontrant mon probleme



je tien a preciser que quand je ne le mets pas dans la scrollbar tout fonctionne correctement

voici mon code

ceci est ma div de mon hover

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.ma-bulle {
    display: none;
    background-color:#DAE7FA;
    position: absolute;
    top: 1px;
    margin:20px;
    width: 400px;
    height: 135px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    z-index: 2;
    border:1px solid #000000;
    opacity: 0.9;
}

et celle la est de mon scrollbar

Code css :

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

1
2
3
4
5
6
7
8
#essai {
    overflow:scroll;
    position:absolute;
    padding-left : 7px;
    width: 172px;
    height: 650px;
    text-overflow: ellipsis;
     overflow-x: visible ;<br>z-index: 2;<br> }

et voici le code html (sans le php)

Code html :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div id="National-delegations">
  <a class="liensND" style="text-decoration:none" href="TableauALL.php?id="><img src="images/.svg" , width=20px; />
    <div class="ma-bulle">
      <div class="hoverMepstitle">
        <b></b>
      </div>
      <div class="imgMepshover">
        <img src="images.svg" , width=110px; />
      </div>
      <div class="TextMepshover">
 
      </div>
    </div>
  </a>
</div>
<br>
</div>
 
<script>
$(function(){
  $('.liensND').click(function(e){
    e.preventDefault();
    var url = $(this).attr('href');
    console.log($(this).attr('href'));
    $.get(url,function(data){
      $('#Container-Right').html(data);
    });
  });
});
</script>
<script>
$(function(){
    $(".liensND").hover(function() {
        var $elt = $(this); // cibler l'élément
        $elt.css("cursor","pointer"); // ajouter le pointer au survol (facultatif)
        var $ma_bulle = $elt.find('.ma-bulle'); // cibler la div .ma-bulle
                $ma_bulle.fadeIn("slow"); // un fade pour faire apparaître la div .ma-bulle
    },function(){
        var $elt = $(this);
        var $ma_bulle = $elt.find('.ma-bulle');
                $ma_bulle.css("display","none");
    });
});
</script>

si vous avez des solutions je suis prenneur car je bloque depuis deja quelque jours dessus

Merci a tous en tout cas