Problème Info bulle & Transparance

[PolKA]

UP

[PolKA]

J'ai essayé le z-index sans succès :s

Code:

a.info_bulle span
{                         
    position      :  absolute;
    z-index      : 9999px;
    top            :  -2000em;
    left          :  -2000em;
    width          :  1px;
    height        :  1px;
    overflow      :  hidden;
    background    :  #c7b891;  /* Définition du fond, sinon on a le même que notre lien */
    border        :  1px; /* Définition des bordures */
 border-style      :  solid; /* Définition des bordures */
 border-color        :  #ffffff; /* Définition des bordures */
padding : 2px;
color : #000000;
}       

a.info_bulle
{           
 
  text-decoration : none;    /* Aucun soulignement du texte */
 
  padding        : 2px 12px 2px 2px; /*Définition des marges intérieures de notre lien */
 
  /* Définition de l'arrière plan de notre lien */
  background      : transparent url('comment.gif') no-repeat right center;
}     


a.info_bulle:hover span, a.info_bulle:focus span, a.info_bulle:active span
{
    top        : auto;
    left      :  auto;
    right : auto;
    width      :  200px;
    height    :  auto;
    overflow  :  visible;
}                     

a.info_bulle:hover
{
  border : 0;  /* ligne qui corrige le bug d'IE6 et inférieur */
}

[PolKA]

>_< mon pb :

Spoiler:

Mes messages ont été supprimer; allez savoir pourquoi ^^ Donc revoila le code html

Code:

<blockquote><blockquote><blockquote><div style="background-image : url(http://nsa27.casimages.com/img/2011/10/30/111030044905851466.jpg); border-top: solid 10px #9E8479; border-bottom: solid 10px #9E8479;-moz-border-radius: 15px 15px 15px 15px;"><center><div style="margin-top: 0px;"></div>
<table><tr><td><a class="info_bulle"><div class="illus_categories">[img]http://nsa28.casimages.com/img/2011/10/30/111030043915922085.jpg[/img]</div><span>
<size=8><center><b><b>Médaille Alakys</b>
Médaille de Premier Ordre</b>

La Médaille Alakys, du nom d'un des fondateurs de la Marine, est obtenue pour la capture d'un pirate, d'un révolutionnaire ou d'un quelconque criminel. Elle peut même être obtenue lors d'une quête en solo (c'est d'ailleurs la seule), en effet, il s'agit d'une médaille d'encouragement.</center></size></span></a></td><td><a class="info_bulle">
<div class="illus_categories"><img src="http://nsa28.casimages.com/img/2011/10/30/111030043915922085.jpg"></div><span>
<size=10><center><b>Médailles des Officiers
Médaille de Premier Ordre</b>

C'est la première Médaille reçue lors d'une cérémonie officielle. Elle célèbre votre entrée parmi les officiers, en effet, l'obtention d'une telle médaille vous assure à coup sur une promotion imminente. Elle est obtenue pour la capture d'un Homme ayant une prime comprise entre 10 et 30 Millions de Berrys.</center></size></span></a></td><td><a class="info_bulle">
<div class="illus_categories"><img src="http://nsa28.casimages.com/img/2011/10/30/111030043915922085.jpg"></div><span>
<size=10><center><b>Médaille du désintéressement
Médaille du Second Ordre</b>

Cette médaille est très prestigieuse et vous ouvrira de nombreuses portes. Elle est obtenue pour la réussite d'une mission gouvernementale. Cette mission officielle que vous aurez réussi vous aura été donnée par un PNJ du gouvernement, ces missions ne peuvent êtres demandées, elles vous tombent dessus rarement plus d'une fois sur le forum. Il est conseillé d'effectuer ces missions. Elles sont dangereuses et nécéssite la mise en danger de votre vie, d'où la médaille !</center></size></span></a></td><td><a class="info_bulle">
<div class="illus_categories"><img src="http://nsa28.casimages.com/img/2011/10/30/111030043915922085.jpg"></div><span>
<size=10><center><b>L'Oeil de Lynx
Médaille du Second Ordre</b>

L'Oeil de Lynx est obtenue suite à une mission de surveillance effectuée avec succès. Vous devez suivre un criminel pendant 1 mois (poster partout où il poste) sans vous faire remarquer. C'est assez pénible (long et ennuyeux) et cela devient dangereux si vous vous faîtes repérer. L'obtention de cette médaille est accompagnée d'un cachet de 2 millions de Berrys</center></size></span></a></td></tr>
<br><tr><td><a class="info_bulle">
<div class="illus_categories">[img]http://nsa28.casimages.com/img/2011/10/30/111030043915922085.jpg[/img]</div><span>
<size=10><center><b><b>Médaille Alakys</b>
Médaille de Premier Ordre</b>

La Médaille Alakys, du nom d'un des fondateurs de la Marine, est obtenue pour la capture d'un pirate, d'un révolutionnaire ou d'un quelconque criminel. Elle peut même être obtenue lors d'une quête en solo (c'est d'ailleurs la seule), en effet, il s'agit d'une médaille d'encouragement.</center></size></span></a></td><td><a class="info_bulle">
<div class="illus_categories"><img src="http://nsa28.casimages.com/img/2011/10/30/111030043915922085.jpg"></div><span>
<size=10><center><b>Médailles des Officiers
Médaille de Premier Ordre</b>

C'est la première Médaille reçue lors d'une cérémonie officielle. Elle célèbre votre entrée parmi les officiers, en effet, l'obtention d'une telle médaille vous assure à coup sur une promotion imminente. Elle est obtenue pour la capture d'un Homme ayant une prime comprise entre 10 et 30 Millions de Berrys.</center></size></span></a></td><td><a class="info_bulle">
<div class="illus_categories"><img src="http://nsa28.casimages.com/img/2011/10/30/111030043915922085.jpg"></div><span>
<size=10><center><b>Médaille du désintéressement
Médaille du Second Ordre</b>

Cette médaille est très prestigieuse et vous ouvrira de nombreuses portes. Elle est obtenue pour la réussite d'une mission gouvernementale. Cette mission officielle que vous aurez réussi vous aura été donnée par un PNJ du gouvernement, ces missions ne peuvent êtres demandées, elles vous tombent dessus rarement plus d'une fois sur le forum. Il est conseillé d'effectuer ces missions. Elles sont dangereuses et nécéssite la mise en danger de votre vie, d'où la médaille !</center></size></span></a></td><td><a class="info_bulle">
<div class="illus_categories"><img src="http://nsa28.casimages.com/img/2011/10/30/111030043915922085.jpg"></div><span>
<size=10><center><b>L'Oeil de Lynx
Médaille du Second Ordre</b>

L'Oeil de Lynx est obtenue suite à une mission de surveillance effectuée avec succès. Vous devez suivre un criminel pendant 1 mois (poster partout où il poste) sans vous faire remarquer. C'est assez pénible (long et ennuyeux) et cela devient dangereux si vous vous faîtes repérer. L'obtention de cette médaille est accompagnée d'un cachet de 2 millions de Berrys</center></size></span></a></td></tr>
<br><tr><td><a class="info_bulle">
<div class="illus_categories">[img]http://nsa28.casimages.com/img/2011/10/30/111030043915922085.jpg[/img]</div><span>
<size=10><center><b><b>Médaille Alakys</b>
Médaille de Premier Ordre</b>

La Médaille Alakys, du nom d'un des fondateurs de la Marine, est obtenue pour la capture d'un pirate, d'un révolutionnaire ou d'un quelconque criminel. Elle peut même être obtenue lors d'une quête en solo (c'est d'ailleurs la seule), en effet, il s'agit d'une médaille d'encouragement.</center></size></span></a></td><td><a class="info_bulle">
<div class="illus_categories"><img src="http://nsa28.casimages.com/img/2011/10/30/111030043915922085.jpg"></div><span>
<size=10><center><b>Médailles des Officiers
Médaille de Premier Ordre</b>

C'est la première Médaille reçue lors d'une cérémonie officielle. Elle célèbre votre entrée parmi les officiers, en effet, l'obtention d'une telle médaille vous assure à coup sur une promotion imminente. Elle est obtenue pour la capture d'un Homme ayant une prime comprise entre 10 et 30 Millions de Berrys.</center></size></span></a></td><td><a class="info_bulle">
<div class="illus_categories"><img src="http://nsa28.casimages.com/img/2011/10/30/111030043915922085.jpg"></div><span>
<size=10><center><b>Médaille du désintéressement
Médaille du Second Ordre</b>

Cette médaille est très prestigieuse et vous ouvrira de nombreuses portes. Elle est obtenue pour la réussite d'une mission gouvernementale. Cette mission officielle que vous aurez réussi vous aura été donnée par un PNJ du gouvernement, ces missions ne peuvent êtres demandées, elles vous tombent dessus rarement plus d'une fois sur le forum. Il est conseillé d'effectuer ces missions. Elles sont dangereuses et nécéssite la mise en danger de votre vie, d'où la médaille !</center></size></span></a></td><td><a class="info_bulle">
<div class="illus_categories"><img src="http://nsa28.casimages.com/img/2011/10/30/111030043915922085.jpg"></div><span>
<size=10><center><b>L'Oeil de Lynx
Médaille du Second Ordre</b>

L'Oeil de Lynx est obtenue suite à une mission de surveillance effectuée avec succès. Vous devez suivre un criminel pendant 1 mois (poster partout où il poste) sans vous faire remarquer. C'est assez pénible (long et ennuyeux) et cela devient dangereux si vous vous faîtes repérer. L'obtention de cette médaille est accompagnée d'un cachet de 2 millions de Berrys</center></size></span></a></td></tr></table>

</div></blockquote></blockquote></blockquote>

[PolKA]

up

[shirabi]

Bonjour,
Quel est votre problème en faite? C'est d'enlever le transparent?

Cordialment

[PolKA]

Salut
J'aimerai que l'infobulle apparaisse au dessus des cases transparentes, et non pas en dessous. Merci =)

[shirabi]

Bonsoir,

Voilà, j'ai modifier cotre code CSS en ajoutant des marques d'emplacement, vos infobulle ce placerons au dessus de vos truc sauf qu'il faudra ajouter des Scrollbar a vos infobulle car la grandeur du texte modifie la hauteur, donc j'ai fixer la hauteur de l'infobulle a 350px, essayer de mettre des scrollbars.

Code:

a.info_bulle span
{                         
    position      :  absolute;
    z-index      : 9999px;
  margin-top: -410px;
margin-left: 0px;
    top            :  -2000em;
    left          :  -2000em;
    width          :  1px;
    height        :  1px;
    overflow      :  hidden;
    background    :  #c7b891;  /* Définition du fond, sinon on a le même que notre lien */
    border        :  1px; /* Définition des bordures */
 border-style      :  solid; /* Définition des bordures */
 border-color        :  #ffffff; /* Définition des bordures */
padding : 2px;
color : #000000;
}       
 
a.info_bulle
{           
 
  text-decoration : none;    /* Aucun soulignement du texte */
 
  padding        : 2px 12px 2px 2px; /*Définition des marges intérieures de notre lien */
 
  /* Définition de l'arrière plan de notre lien */
  background      : transparent url('comment.gif') no-repeat right center;
}     
 
 
a.info_bulle:hover span, a.info_bulle:focus span, a.info_bulle:active span
{
 
    top        : auto;
    left      :  auto;
    right : auto;
    width      :  200px;
    height    :  350px;
    overflow  :  visible;
}                     
 
a.info_bulle:hover
{
  border : 0;  /* ligne qui corrige le bug d'IE6 et inférieur */
}

Cordialement.

[shirabi]

Désoler du double post mais j'ai rajouter les scroolbar pour vous éviter les effort le voici!!

Code:

a.info_bulle span
{                         
    position      :  absolute;
    z-index      : 9999px;
  margin-top: -410px;
margin-left: 0px;
    top            :  -2000em;
    left          :  -2000em;
    width          :  1px;
    height        :  1px;
    overflow      :  hidden;
    background    :  #c7b891;  /* Définition du fond, sinon on a le même que notre lien */
    border        :  1px; /* Définition des bordures */
 border-style      :  solid; /* Définition des bordures */
 border-color        :  #ffffff; /* Définition des bordures */
padding : 2px;
color : #000000;
}       
 
a.info_bulle
{           
 
  text-decoration : none;    /* Aucun soulignement du texte */
 
  padding        : 2px 12px 2px 2px; /*Définition des marges intérieures de notre lien */
 
  /* Définition de l'arrière plan de notre lien */
  background      : transparent url('comment.gif') no-repeat right center;
}     
 
 
a.info_bulle:hover span, a.info_bulle:focus span, a.info_bulle:active span
{
 
    top        : auto;
    left      :  auto;
    right : auto;
    width      :  200px;
    height    :  350px;
    overflow  :auto;
}                     
 
a.info_bulle:hover
{
  border : 0;  /* ligne qui corrige le bug d'IE6 et inférieur */
}

[PolKA]

Bonsoir !

Merci beaucoup ça à plus ou moins réglé mon problème mais la scroll bar me dérange un peu, est-il possible de lui donner une valeur "auto" qui se règle en fonction du texte ?

Et au niveau de la position de l'info_bulle qui apparait est-il possible de la reproché un peu, chez moi l'info_bulle part un peu trop en haut à droite ! Merci à toi si tu peux me réglé ces petits détail, sinon j'essayerai de le faire mais j'ai peur de faire n'importe quoi >_<

[Lixyr]

Bonsoir.

Mes messages ont disparus. Du coup je ne sais plus où j'en étais. Mais comme Shirabi a l'air de s'en sortir, je lui laisse le soin de répondre, plutôt que de lui couper l'herbe sous le pied, il est bien parti.

Je surveille quand même le sujet, si jamais il y a besoin.

Cordialement.

[shirabi]

PolKa pourrais tu mettre l'adresse du forum concerner aussi ^^, et pour la scrollbar elle est déjà en auto =/ donc il faut juste modifier la hauteur de l'infobulle.

[PolKA]

Merci Lixyr, c'est très aimable à toi

shirabi, il ne s'agit pas de mon forum, mais il ne me coute rien de te filer l'adresse, je fais juste partie du staff et j'aide comme je peux http://onepiece-requiem.forums-actifs.net/ On a du mal se comprendre ce que je voudrais c'est que ce soit l'info bulle entière qui soit en auto histoire qu'il n'y est pas de scroll bar, par ce qu'on a pas le temps de la baisser car l'info bulle disparait trop vite; Pour le positionnement, essaye de passer la souris sur les avis de recherche de la PA

[shirabi]

Bon j'ai essayer un truc, dite moi si c'est mieux ou pas:

Code:


a.info_bulle span
{                         
    position      :  absolute;
    z-index      : 9999px;
  margin-top: -362px;
margin-left: -80px;
    top            :  -2000em;
    left          :  -2000em;
    width          :  1px;
    height        :  1px;
    overflow      :  hidden;
    background    :  #c7b891;  /* Définition du fond, sinon on a le même que notre lien */
    border        :  1px; /* Définition des bordures */
 border-style      :  solid; /* Définition des bordures */
 border-color        :  #ffffff; /* Définition des bordures */
padding : 2px;
color : #000000;
}       
 
a.info_bulle
{           
 
  text-decoration : none;    /* Aucun soulignement du texte */
 
  padding        : 2px 12px 2px 2px; /*Définition des marges intérieures de notre lien */
 
  /* Définition de l'arrière plan de notre lien */
  background      : transparent url('comment.gif') no-repeat right center;
}     
 
 
a.info_bulle:hover span, a.info_bulle:focus span, a.info_bulle:active span
{
 
    top        : auto;
    left      :  auto;
    right : auto;
    width      :  200px;
    height    :  380px;
    overflow  :auto;
}                     
 
a.info_bulle:hover
{
  border : 0;  /* ligne qui corrige le bug d'IE6 et inférieur */
}

cordialement

[Lixyr]

Je précise quand même quelques points :

pour enlever la scroll barre, il faut enlever dans le code tout ce qui est de la forme : overflow:quelquechose;

le overflow:hidden, ça cache tout ce qui dépasse sans mettre de scroll. Personnellement, je ne le conseille pas. C'est comme cacher une partie de page d'un livre parce qu'elle est trop grande. Pas pratique quand on veut tout lire.
le overflow:auto, ça fixe une scroll si besoin.

enlevez les deux.


pour configurer l'emplacement de l'info-bulle qui apparait, ça se passe ici :

top : -2000em;
left : -2000em;

top, ça indique la marge qu'il y a entre la bordure haute de l'image de base, et la bordure haute de l'info bulle. Donc techniquement, l'info-bulle se place en dessous. Cependant, ici la valeur est négative, donc l'info-bulle se place au dessus.

Pour réduire l'espacement, réduisez la valeur 2000 par une valeur plus petite.

left, ça décale l'info-bulle vers la droite, car ça marque une marge entre la bordure gauche de l'info-bulle et la bordure gauche de l'image.
une valeur négative placera donc l'info-bulle à gauche de l'image de départ.


Si vous ne vous y retrouvez pas en em, mettez du px à la place.


Cordialement.

[PolKA]

J'ai eu quelques problème de connections ces derniers jours, quoi qu'il en soit je ne sais quoi dire autre qu'un grand merci ! Mon problème est résolu et j'ai comprit pourquoi (exception faite pour "Margin-top"). Je repart un peu moins bête que quand je suis arrivé ^_^ Problème résolu !