Info-bulle pour le staff en PA

Chose promise, chose due. Voici le code pour afficher des infos-bulles lorsque l'on passe la souris sur les icônes des membres du staff dans la PA.

Code à mettre directement dans la page d'accueil HTML

Code:: Administrateurs : <table><tr>
<td><div class="infobulle"><img src=http://i49.servimg.com/u/f49/11/19/18/53/aibyou10.jpg/><br /><span><center>Aiyana<br /><img src=http://img30.imageshack.us/img30/4057/aibyouka.jpg><br />Administratrice diplomate</center></span></div></td>

<td><div class="infobulle"><img src="http://i49.servimg.com/u/f49/11/19/18/53/avatar10.png"/><br /><span><center>Miha<br /><img src=http://img76.imageshack.us/img76/6475/avatar13bs0.png><br />Fondatrice-Administratrice</center></span></div></td>

<td><div class="infobulle"><img src=http://i49.servimg.com/u/f49/11/19/18/53/essayo10.jpg/><br /><span><center>Shion<br /><img src=http://img37.imageshack.us/img37/6845/essayon.gif><br />Administratrice</center></span></div></td>

<td><div class="infobulle"><img src="http://i49.servimg.com/u/f49/11/19/18/53/renji_11.jpg"/><br /><span><center>Ming<br /><img src=http://i29.servimg.com/u/f29/11/19/18/53/ming_s10.jpg/><br />Administrateur</center></span></div></td>

<td><div class="infobulle"><img src=http://i49.servimg.com/u/f49/11/19/18/53/steven10.png/><br /><span><center>Steven<br /><img src=http://img695.imageshack.us/img695/8133/stevenashibi.png><br />Administrateur</center></span></div></td>

<td><div class="infobulle"><img src=http://i49.servimg.com/u/f49/11/19/18/53/youkov10.jpg/><br /><span><center>Youko<br /><img src=http://img683.imageshack.us/img683/2581/youkovava.jpg><br />Administratice</center></span></div></td></tr></table>

<br>Modérateurs : <table><tr><td><div class="infobulle"><img src=http://i49.servimg.com/u/f49/11/19/18/53/rickyg11.jpg/><br /><span><center>Ricky<br /><img src=http://img232.imageshack.us/img232/3920/rickyg.jpg><br />Modératrice-Historienne</center></span></div></td></tr></table>

Code à rajouter au CSS

Code:: .infobulle{
position: relative;
z-index: 0;}

.infobulle:hover{
background-color: transparent;
z-index: 50;}

.infobulle span{
position: absolute;
background-color: #fff1bf ;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}

.infobulle span img{
border: 2px;
padding: 5px;}

.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 200px ;
color:#e97100;
border: 2px solid #fff487;}

A tester par un admin et si problème, me faire signe ! Wink

Beau travail Wink

Il serait par contre mieux que cela ne sorte pas de l'écran, que l'info-bulle soit forcée dans le cadre de l'écran, au lieu de créer une barre de navigation horizontale.

Euh, je ne vois pas ce que tu veux dire car chez moi, les info-bulles apparaissent bien dans mon écran.

Est ce que cela fait ça à quelqu'un d'autre ?

Je n'ai pas ce problème, toutefois je fonctionne avec un écran de résolution 1600*900. Le fait que l'avatar sorte peut venir de la taille de ton écran ; quelle résolution utilises-tu ?

Sinon, c'est que les avatars sont trop grands. Dans ce cas, je peux faire des icones 100*100 qui s'afficheraient à la place de nos avatars qui, à côté des 60*60, semblent bien imposants xD

L'écran sur lequel j'affiche les pages Internet fait 1024 de largeur. J'imagine que je ne suis pas la seule ^^ Normalement il y a un codage précis pour forcer l'info-bulle à rester dans le cadre.

Si tel est le cas je ne le connais pas ><' Ricky, tu as déjà vu ce cas de figure ?

Euh...je ne suis pas sure de moi mais peut être que passer les info-bulles en position "absolute" dans le CSS suffirait...

A tester...

Je viens de tester, ça ne fonctionne pas, ça superpose les petites icônes du Staff.

Hum...je vais tenter d'y réfléchir...mais je dois avouer que c'est un peu compliqué pour moi qui n'ai pas accès aux pages CSS et qui en plus, n'ai pas ce problème sur mon ordi. Je vais tout de même voir ce que je peux faire. Wink

EDIT : J'ai un truc tout bête, le temps que je m'y penche plus sérieusement. Il suffirait d'inverser les cases, à savoir passer le staff à gauche et le règlement et tout le tintouin à droite. Le problème devrait être résolu comme ça.

Ah oui en effet c'est pas idiot. Je vais tenter, tout en sauvegardant l'ancien code, si jamais je fais tout sauter xD

EDIT : Voilà, ici les info bulles ne débordent que sur la PA. Cela convient ?

Pour moi ca ne change rien, vu que je n'avais pas le souci. A voir donc avec Miha et les autres s'ils avaient ce problème. Wink

Problème réglé, merci Wink

» Règles et conseils pour bien rp
» Petite idée pour le recensement des avatars