affichage de l'infobulle dans le profil

[Asorane]

Bonjour =)

En cherchant à afficher les informations du profil dans une infobulle, je me suis retrouvée confrontée à un problème d'affichage. Je crois qu'il ne s'agit que d'un tout petit détail à modifier, mais je ne vois pas lequel, et je n'ai pas réussi à trouver la réponse dans les questions résolues. Est-ce que quelqu'un pourrait m'indiquer où se situe le problème ?

l'illustration du problème:

Voici mon template modifié :

viewtopic_body:

et voici également ma feuille de CSS, au cas où il s'agisse de quelque chose que je doive y enlever.

CSS:

En remerciant d'avance tous ceux qui se pencheront sur mon souci ! Merci beaucoup =D

[kheino]

B'soir Asorane,

Il me semble que la hiérarchie n'est pas bonne.

Juste pour m'éviter de chercher dans TOUT ton template et TOUTE ta feuille de style, pourrais-tu donner juste les parties concernées:
- Dans le template entre >td<partie profil>/td<
- Dans le CSS idem, juste ce qui concerne TOUT le profil

[Asorane]

Bien sûr, toutes mes excuses, j'aurais du y penser.

Voici l'extrait du template concerné :

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_AVATAR}<br />
                                <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br /><br />
                                  {postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}
            <a class="info"><img src="http://img12.imageshack.us/img12/9468/imageprofil.png" alt="afficher le profil"><span><div class="champs_profil"><!-- BEGIN profile_field -->{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                                  <!-- END profile_field --></div></span></a>
            {postrow.displayed.POSTER_RPG}
         </span><br />
         <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
                  </td>

Et pour le CSS, ce qui concerne le profil

Code:

/* PROFIL EN INFOBULLE */

* {
  font-family: Tahoma, Verdana, Arial, serif, Georgia, Courier New;

}
a.info {
  position: relative;
  color: #FFFFFF;
  text-decoration: none;
}

a.info span {
  display: none;
font-size: 12px;

}
a.info:hover {
  background: none;
  z-index: 999;
  cursor: pointer;
}

a.info:hover span {
  display: inline;
  position: absolute;
  white-space: nowrap;
  top: 0px;
  left: 0px;
  background-color: #DEDAAA;
  color: #000000;
  padding: 3px;
  border: 1px solid #000000;
}


Merci encore !

[kheino]

Il n'y a pas de mal, même si la plupart donne tout leur template et tout leur CSS, c'est parfois pénible de rechercher dans la façon de coder de chacun, surtout dans le CSS.

Je n'ai pas bien compris, l'infobulle s'ouvre sur quoi ?
Sur un champ que tu crée en plus, sur le pseudo, sur l'avatar ?

[kheino]

Aïe, pas la tête pour le double-post !

Je n'avais pas de suite vu, mais je pense avoir saisi (même quand je me l'explique longtemps, je me comprends vite ! Quel boulet !)...

Il y a en effet une erreur de hiérarchie car tu ne peux pas utiliser deux fois la même balises que celles qui sont utiliser pour l'infobulle, sinon ça te crée d'autres "trucs" pas très beaux.
Donc il faut utiliser des balises plus grandes qui peuvent en contenir de plus petites. Pas sûre de bien me faire comprendre là...
Tu comprendras mieux en suivant le cheminement du HTML et du CSS.

Sans parler que la balise de lien <a ...> est pour une url ou une fonction de page, même si on peut y mettre un class.
Pareil pour "nowrap" qui veut dire pas de à la ligne... C'est bien si tes membres n'ont pas le champ commentaires à remplir.

Dans le HTML, je te renvoie ta partie profil corrigée :

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_AVATAR}<br />
<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br /><br />
{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}
</span>
<div class="info"><img src="http://img12.imageshack.us/img12/9468/imageprofil.png" alt="afficher le profil"><div class="champs_profil">
  <!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
  <!-- END profile_field -->
</div></div>
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RPG}
</span>
 
<br />
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>

Et dans le CSS :

/* PROFIL EN INFOBULLE */
* {
font-family: Tahoma, Verdana, Arial, serif, Georgia, Courier New;
}
div.info {
position: relative;
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
}
div.info:hover {
z-index: 1;
}
div.info div {
display: none;
background-color: #DEDAAA;
color: #000000;
font-size: 12px;
white-space: nowrap;
}
div.info:hover div {
display: inline-block;
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: auto;
border: 1px solid #000000;
padding: 4px;
z-index: 2;
}

L'intitulé "champs_profil" n'est pas utilisé ici, je suppose que c'est pour le texte...

Rien ne sert d'avoir un z-index élevé, c'est de la vraie gnognotte ! Un seul supérieur suffit pour avoir la priorité sur l'autre.
Si on s'amuse à ça, on peut se retrouver tout à coup avec l'impossibilité de placer un élément par dessus un autre, 999 étant la limite maintenant sur FA (ou en général, je ne sais pas).

[Asorane]

De retour de week-end, désolée pour le délai de réponse !

Pour ce qui est de la hiérarchie des balises, j'ai compris ce que tu voulais dire ^^ J'ai beau essayer de me mettre au html, je galère toujours un peu, ce qui explique l'aspect "artisanal" de mes bidouillages et de ce template en particulier '-'

Une fois les modifications effectuées, tout marche, effectivement ! La classe "champs_profil" était placée là au cas où je veuille régler l'affichage du profil via le CSS (au niveau de la mise en page, etc.).

Merci beaucoup pour ton aide ! Je vais me pencher en détail sur ce que j'ai planté pour éviter de faire l'erreur. Merci encore =)