problème d'affichage sur le portail (le port)

[Ventus]

Bonsoir, bonjour.

Avant tout, merci de vous pencher sur mon problèmes & bonne année à tout le monde avec mes meilleurs vœux

- l'URL du forum : http://piratedescaraibes.forum-actif.net/h3-le-port
- la version du forum : PHPBB2
- statut sur le forum : fondateur
- templates modifié : oui
- CSS personnalisé : oui
- navigateur utilisé : firefox, google chrome & opéra
- Le code qui pose problème :

Comme je ne suis pas certain de la base du problème, j’en conclu qu’il doit s’agir d’une mauvaise manipulation dans le codage de la page du portail. C’est une page que j’avais créé en version HTML afin de pouvoir la personnalisé.

Depuis quelques jours, dans la ligne du staff ou se trouve des avatars de petite taille, les grandes tailles sont actuellement toujours visible. Autrefois, nous avions juste à passer sur la petite image afin que la grande s’ouvre et puisse fournir des informations relatives, comme : Le stat de l’administrateur, la visualisation direct de son profil ainsi que le rang occupé in rp.

Ma question, que dois-je modifier dans le code pour que les grandes images ne soit pas affichée en permanence ?

En cas de besoin, il m’est possible de faire une capture d’écran afin de mieux m’expliquer.

Codage actuellement en place sur la page :

Spoiler:

[Ventus]

Je me permet de poster un petit up car je ne trouve pas comment résoudre le problème.

D'avance, merci de me venir en aide.

[Ventus]

Up ? Juste pour la forme de ne pas être totalement oublié

[[Nihil]]

Bonsoir Ventus,

Sur un autre forum de codage, quelqu'un a eu un bug similaire au tiens, je pense que le problème vient de FA.

Dans ton code, voici comme est fait une infobulle :

Code:

<div class="thumbnail">
 <img src="http://i60.servimg.com/u/f60/12/30/44/12/mini_j10.png" style="width: 100px; height: 100px;" border="0" />
 <span></span>
 <div style="" class="tstaff">
 <img src="http://i60.servimg.com/u/f60/12/30/44/12/jack10.png" style="width: 150px; height: 250px;" border="0" />
 <span style="color: rgb(90, 70, 70);">
 <strong>Jack Sparrow</strong>
 </span>
 <br />
 Fondateur
 <br />
 <a href="http://piratedescaraibes.forum-actif.net/profile.forum?mode=viewprofile&u=1">Voir son profil</a>
 <br />
 <span style="color: black;">Statut:</span> Capitaine du Black Pearl
 </div>
 <span></span>
</div>

Juste avant la div avec la class "tstaff" tu as une balise span ouverte puis fermée sans contenu, et même chose à la fermeture de ta div. Or justement ce qui apparait au survol c'est le contenu de ton span ... Il faut donc remodifier ton code pour effacer la span vide à la fin, et mettre le contenu de ton infobulle à l'intérieur du span. ^^
Pour une raison étrange, il semblerait que ton code ai été modifié, hier quelqu'un a posé sur un autre forum une question similaire et avait exactement le même souci o-o. Il s'est déclenché quand elle a édité sa PA pour changer un texte. Je pense que FA a un problème avec son éditeur de code, car je vois ces temps ci pleins de soucis liés à ça.

[Ventus]

Merci beaucoup pour ton aide Nihil, effectivement, je suis parvenu a corriger une partie du bug.

Par contre, si un membre de FA pouvait me venir en aide, car lorsque je modifie la page, l'erreur revient a chaque fois...

Ou si une autre personne a la solution, je suis également preneur, d'avance  :thanks:


En cas de besoin, le CSS du portail que j'ai actuellement. Peut-être que vous aller y trouver un problème...

Spoiler:

Pour information, j'ai crée une nouvelle classe dans le statut, dans le genre :

.statut
{
color : black;
}

La modification de la classe ainsi
<span class="statut">Statut :</span>

Mais toujours rien... C'est un problème qui persiste.

[Ventus]

Un petit UP

[Ventus]

Et un nouveau petit UP pour signaler que le problème n'est pas entièrement résolu ^^

[~ Nico ~]

Hello,
Essaye en mettant <div class="avatar mini"><img src=""></div>

[Ventus]

Merci bien Nico, j'ai testé ! Le résultat est pire que tout ^^ Cela fait tout de même plaisir de lire ta proposition ^^

Donc, problème toujours en cours et pas de solution.

[~ Nico ~]

J'ai pas d'autre solution désolé ^^

[[Nihil]]

Pourrais tu poster le code HTML nettoyé s'il te plait ? (sans toutes les erreurs du à l'éditeur, il me semble qu'il doit être différent de celui posté tout au début)

[Ventus]

Bonsoir,

Pas grave Nico et merci tout de même de t'être donné la peine de répondre à mon appel à l'aide

Nihil, je te passe le HTML tel qu'il apparait sur la page :

Spoiler:

Avec pour espoir que tu trouves la solution
D'avance, merci


ps: dsl, mais j'étais au ski trois jours sans internet, donc impossible de répondre avant

[Ventus]

Up

[[Nihil]]

C'est bien ce que je pensais, le problème vient du CSS qui ne correspond pas à la structure de ton HTML.
Pourrais tu copier / coller le CSS qui correspond ?

Dans l'idée c'est simple, dans le CSS tu dois avoir quelque chose dans ce genre:

Code:

.thumbnail:hover span { /* avec du code CSS dedans */}

En gros, l'effet de survol se mettra sur les span à l'intérieur de la div.thumbnail.

Or là, il faudrait masquer la div ".tstaff" à l'état normal, et l'afficher au survol ^^

[Ventus]

Voilà le code CSS qui comprend :

Code:

.thumbnail:hover span {
visibility: visible;
top: 50px;
left: 25px; /*position where enlarged image should offset horizontally */
width: 160px
}

Actuellement, j'ai cela comme code. Donc, d'après toi, il me faut modifier quoi pour que cela fonctionne normalement ?
A savoir, avant la mise à jour de Forum actif, le code en place fonctionnait très bien...


D'avance, merci beaucoup de ton aide

[[Nihil]]

Je pense que pour l'instant le CSS que tu viens de copier / coller tu peux le mettre en commentaire.
Effectivement, il fonctionnait très bien car tu n'avais pas la même structure HTML. Le contenu à afficher était dans ton span, là tu l'as mis dans une div. Ce qui est mieux d'ailleurs.

Juste avant la div avec la class "tstaff" tu as une balise span ouverte puis fermée sans contenu, et même chose à la fermeture de ta div. Or justement ce qui apparait au survol c'est le contenu de ton span ... Il faut donc remodifier ton code pour effacer la span vide à la fin, et mettre le contenu de ton infobulle à l'intérieur du span. ^^

Dans ton CSS tu dois avoir quelque chose dans ce genre :

Code:

.thumbnail span  { background-color: #AD8C70;
    border: 1px groove #866A53;
    color: #000000;
    left: -1000px;
    padding: 5px;
    position: absolute;
    visibility: hidden;}

Tu peux aussi le mettre en commentaire.

Essaye de rajouter ceci dans ton CSS :

Code:

.thumbnail > div.tstaff {
   display : none; /* la div est masquée en temps normal */
   position: absolute; /* pour positionner l'infobulle */
   background : #AD8C70; /* couleur de fond */
   padding: 5px;
   border: 1px groove #866A53;
}

.thumbnail:hover > div.tstaff {
   display: block; /* au survol de la miniature, on affiche la div */
}

[Ventus]

Alors là, je ne sais que dire... Juste un énorme MERCI   de ton aide. C'est exactement ça. Grâce à ta ténacité, tout fonctionne à merveille.

Mes félicitations