Place de l'image de base de l'infobulle.

[sephora25]

Bonjour,
J'ai cherché longuement un sujet, une quelconque réponse à mon problème. J'ai finis par en trouver un et j'ai tenté d'appliquer les conseils donnés mais ça n'a pas marché... J'ai traqué un </br> mal placé, en vain, donc je m'adresse à vous. Voilà, j'ai récemment placé une infobulle sur ma PA pour présenter les membres du staff, à la base il n'y avait qu'une personne... Mais l'équipe s'agrandissant j'aimerai rajouter une deuxième infobulle à coté de la première. Mon problème c'est qu'au lieu de se placer à coté de cette dernière, elle se place en dessous ! Voyez plutôt :

Spoiler:

Voici le code HTML de ma PA :

Code:

<table align="center" width="100%" class="tableaupa"><tbody>
<tr>
<td style="vertical-align:top;" width="33%">
<center><div class="titre"> Navigation </div>
<a href="http://les-plaines-d-anubis.allgoo.us/t86-reglement" class="navigation">Règlement</a>
<a href="http://les-plaines-d-anubis.allgoo.us/t89-concept" class="navigation">Contexte</a>
<a href="#" class="navigation">Avatar Pris</a>
<a href="http://les-plaines-d-anubis.allgoo.us/f4-creer-un-personnage" class="navigation">Présentation</a>
<a href="http://les-plaines-d-anubis.allgoo.us/f9-partenaires" class="navigation">Partenaria</a>
<a href="#" class="navigation">Postes Vacants</a></center>
</td>
<td style="vertical-align:top;" width="33%">
<center><div class="titre"> La team </div>

<a class="imginfo" style="text-align:right;">
<font color="burlywood" class="opacity">
<img src="http://i62.servimg.com/u/f62/11/22/01/25/zouuuu11.png"></font><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody>
<tr>
<td style="text-align: center;">
<font size="1">
MEMORIES<br/>
</font>
</td>
</tr>
<tr>
<td style="text-align: center;">
<a class="imginfo">
<img src="http://i62.servimg.com/u/f62/11/22/01/25/zouuuu11.png"/>
</a>
</td>
</tr>
<tr>
<td style="text-align: center;">
<font size="1">
<a href="http://les-plaines-d-anubis.allgoo.us/profile.forum?mode=viewprofile&u=1">Profil</a> - <a href="http://les-plaines-d-anubis.allgoo.us/msg.forum?mode=post&u=1">Envoyer un MP</a><br/>
</font>
</td>
</tr>
<tr align="center"/>
</tbody>
</table></span>

<a class="imginfo" style="text-align:right;">
<font color="burlywood" class="opacity">
<img src="http://i62.servimg.com/u/f62/11/22/01/25/av10.png"/>
</font><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody>
<tr>
<td style="text-align: center;">
<font size="1">
KAMPF<br/>
</font>
</td>
</tr>
<tr>
<td style="text-align: center;">
<a class="imginfo">
<img src="http://i62.servimg.com/u/f62/11/22/01/25/av10.png"/>
</a>
</td>
</tr>
<tr>
<td style="text-align: center;">
<font size="1">
<a href="http://les-plaines-d-anubis.allgoo.us/profile.forum?mode=viewprofile&u=1">Profil</a> - <a href="http://les-plaines-d-anubis.allgoo.us/msg.forum?mode=post&u=1">Envoyer un MP</a><br/>
</font>
</td>
</tr>
<tr align="center"/>
</tbody>
</table>
</span>
</a>  </center>
</td>
<td style="vertical-align:top;" width="34%">
<center><div class="titre"> Contexte </div><div class="scrollbar">
Bienvenue à tous sur Les plaines
d'Anubis. Vous en avez assez des
jeux de rôles équins ultra-modernes ?
Rejoignez l'équipe des PA !
Vous me direz, quel est l'intérêt de
s'inscrire sur un forum avec ce
contexte alors que tellement d'autres
existent déjà ? Et bien tout simplement
parce que ici n'est pas un forum qui
essaye de reproduire les anciens
concepts simples, mais UN ANCIEN
FORUM qui n'a pas changé depuis
plus de trois ans. Pour plus
d'informations, allez lire le concept ! 
</div></center>
</td>
</tr>
</tbody></table>
<table align="left" width="80%" class="tableaupa"><tbody>
<tr>
<td width="35%">
<center><div class="titre"> Top partenaires </div>
<form>
<select style="width: 150px;" onchange="location = this.options
[this.selectedIndex].value">
<option selected="selected">
Le top partenaires
</option>

<option value="http://gods-horses.forumactif.com/">
Gods Horses
</option>
<option value="URL FORUM">
Partenaires 2
</option>
<option value="URL FORUM">
Partenaires 3
</option>
<option value="URL FORUM">
Partenaires 4
</option>
</select>
</form>
<a href="http://les-plaines-d-anubis.allgoo.us/t94-nos-partenaires-9829" style="font-family:impact; color:#495662;">Plus ?</a></center>
</td>
<td width="45%" style="vertical-align:top;">
<center><div class="titre" style="margin-top:10px;"> Cliquez </div><div class="topsite">
<a href="#" class="opacity"><img src="http://i32.servimg.com/u/f32/11/22/01/25/sans_t10.png"/></a>
<a href="#" class="opacity"><img src="http://i32.servimg.com/u/f32/11/22/01/25/sans_t10.png"/></a>
<a href="#" class="opacity"><img src="http://i32.servimg.com/u/f32/11/22/01/25/sans_t10.png"/></a></div></center>
</td>
</tr>
</tbody></table>
<table width="100%" class="tableaupa"><tbody>
<tr>
<td width="35%" style="vertical-align:top">
<center><div class="titre"> Nous lier </div>
<a href="http://les-plaines-d-anubis.allgoo.us/t95-nous-lier#367" class="opacity"><img src="http://i62.servimg.com/u/f62/11/22/01/25/210.png" border="0" alt="" /></a>
</center>
</td>
<td width="65%" style="vertical-align:top; text-align:right;"><table width="100%"><tr style="; margin-right:10%;" width="100%"><td width="100%" class="titre">
Copyright </td></tr>
<tr width="100%"><td style="margin-right:<strong>10</strong>%; color:#98a8b6;" width="100%">
LPA toute reproduction totale ou partielle des images ou idées strictement interdite.
</td></tr></table>
</td>
</tr>
</tbody></table>

Et mon CSS traitant uniquement la PA (si vous avez besoins du complet je vous le donnerai...) :

Code:

.tableaupa .titre {
  font-family: impact;
  text-align: right;
  color:#98a8b6;
  font-size:24px;
  border-bottom: 2px solid #98a8b6;
  font-variant:small-caps;
  letter-spacing:1px;
  width:80%;
  margin-bottom:5px;
}
.tableaupa .navigation {
  font-family: impact;
  font-size: 14px;
  color: #98a8b6;
  background-color: #495662;
  letter-spacing: 1px;
  display: block;
  width: 80%;
  margin-bottom: 3px;
  border-right:3px solid #98a8b6;
  border-left:3px solid #98a8b6;
  text-align: center;
  text-decoration: none;
}
a.imginfo {
float:right;
margin-right:10%;
  width:80%;
  position: relative;   
  color: #98a8b6;   
  text-decoration: none;     
}   

a.imginfo span {   
  display: none; 
} 

a.imginfo:hover {   
  background: none; 
  z-index: 999; 
  cursor: help;
} 

a.imginfo:hover span {   
  display: inline;   
  position: absolute;   
  white-space: nowrap;   
  right: 80px;   
  background: #495662;   
  color: #98a8b6;   
  padding: 3px;       
  border: 3px solid #98a8b6; 
}
.tableaupa .scrollbar {
  color: #98a8b6;
  text-align: right;
  width: 80%;
  overflow: auto;
  height: 120px;
padding-right:3px;
}
.topsite{
  width:80%;
  text-align:right;
}
.opacity img {
filter:alpha(opacity=50);
-moz-opacity:0.5;opacity: 0.5;
}

.opacity img:hover {
filter:alpha(opacity=100);
-moz-opacity:1;opacity: 1;
}


J'espère que vous pourrez m'aider et je vous remercie d'avance

[Anzu]

Bonjour ^^

Remplacez le code de votre PA par celui ci:

Code:

    <table align="center" width="100%" class="tableaupa"><tbody>
    <tr>
    <td style="vertical-align:top;" width="33%">
    <center><div class="titre"> Navigation </div>
    <a href="http://les-plaines-d-anubis.allgoo.us/t86-reglement" class="navigation">Règlement</a>
    <a href="http://les-plaines-d-anubis.allgoo.us/t89-concept" class="navigation">Contexte</a>
    <a href="#" class="navigation">Avatar Pris</a>
    <a href="http://les-plaines-d-anubis.allgoo.us/f4-creer-un-personnage" class="navigation">Présentation</a>
    <a href="http://les-plaines-d-anubis.allgoo.us/f9-partenaires" class="navigation">Partenaria</a>
    <a href="#" class="navigation">Postes Vacants</a></center>
    </td>
    <td style="vertical-align:top;" width="33%">
    <center><div class="titre"> La team </div>
<table width="100%"><tr><td width="50%">
    <a class="imginfo" style="text-align:right;">
    <font color="burlywood" class="opacity">
    <img src="http://i62.servimg.com/u/f62/11/22/01/25/zouuuu11.png"></font><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody>
    <tr>
    <td style="text-align: center;">
    <font size="1">
    MEMORIES<br/>
    </font>
    </td>
    </tr>
    <tr>
    <td style="text-align: center;">
    <a class="imginfo">
    <img src="http://i62.servimg.com/u/f62/11/22/01/25/zouuuu11.png"/>
    </a>
    </td>
    </tr>
    <tr>
    <td style="text-align: center;">
    <font size="1">
    <a href="http://les-plaines-d-anubis.allgoo.us/profile.forum?mode=viewprofile&u=1">Profil</a> - <a href="http://les-plaines-d-anubis.allgoo.us/msg.forum?mode=post&u=1">Envoyer un MP</a><br/>
    </font>
    </td>
    </tr>
    <tr align="center"/>
    </tbody>
    </table></span></td><td width="50%">

    <a class="imginfo" style="text-align:right;">
    <font color="burlywood" class="opacity">
    <img src="http://i62.servimg.com/u/f62/11/22/01/25/av10.png"/>
    </font><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody>
    <tr>
    <td style="text-align: center;">
    <font size="1">
    KAMPF<br/>
    </font>
    </td>
    </tr>
    <tr>
    <td style="text-align: center;">
    <a class="imginfo">
    <img src="http://i62.servimg.com/u/f62/11/22/01/25/av10.png"/>
    </a>
    </td>
    </tr>
    <tr>
    <td style="text-align: center;">
    <font size="1">
    <a href="http://les-plaines-d-anubis.allgoo.us/profile.forum?mode=viewprofile&u=1">Profil</a> - <a href="http://les-plaines-d-anubis.allgoo.us/msg.forum?mode=post&u=1">Envoyer un MP</a><br/>
    </font>
</td></tr></table>
    </td>
    </tr>
    <tr align="center"/>
    </tbody>
    </table>
    </span>
    </a>  </center>
    </td>
    <td style="vertical-align:top;" width="34%">
    <center><div class="titre"> Contexte </div><div class="scrollbar">
    Bienvenue à tous sur Les plaines
    d'Anubis. Vous en avez assez des
    jeux de rôles équins ultra-modernes ?
    Rejoignez l'équipe des PA !
    Vous me direz, quel est l'intérêt de
    s'inscrire sur un forum avec ce
    contexte alors que tellement d'autres
    existent déjà ? Et bien tout simplement
    parce que ici n'est pas un forum qui
    essaye de reproduire les anciens
    concepts simples, mais UN ANCIEN
    FORUM qui n'a pas changé depuis
    plus de trois ans. Pour plus
    d'informations, allez lire le concept !
    </div></center>
    </td>
    </tr>
    </tbody></table>
    <table align="left" width="80%" class="tableaupa"><tbody>
    <tr>
    <td width="35%">
    <center><div class="titre"> Top partenaires </div>
    <form>
    <select style="width: 150px;" onchange="location = this.options
    [this.selectedIndex].value">
    <option selected="selected">
    Le top partenaires
    </option>

    <option value="http://gods-horses.forumactif.com/">
    Gods Horses
    </option>
    <option value="URL FORUM">
    Partenaires 2
    </option>
    <option value="URL FORUM">
    Partenaires 3
    </option>
    <option value="URL FORUM">
    Partenaires 4
    </option>
    </select>
    </form>
    <a href="http://les-plaines-d-anubis.allgoo.us/t94-nos-partenaires-9829" style="font-family:impact; color:#495662;">Plus ?</a></center>
    </td>
    <td width="45%" style="vertical-align:top;">
    <center><div class="titre" style="margin-top:10px;"> Cliquez </div><div class="topsite">
    <a href="#" class="opacity"><img src="http://i32.servimg.com/u/f32/11/22/01/25/sans_t10.png"/></a>
    <a href="#" class="opacity"><img src="http://i32.servimg.com/u/f32/11/22/01/25/sans_t10.png"/></a>
    <a href="#" class="opacity"><img src="http://i32.servimg.com/u/f32/11/22/01/25/sans_t10.png"/></a></div></center>
    </td>
    </tr>
    </tbody></table>
    <table width="100%" class="tableaupa"><tbody>
    <tr>
    <td width="35%" style="vertical-align:top">
    <center><div class="titre"> Nous lier </div>
    <a href="http://les-plaines-d-anubis.allgoo.us/t95-nous-lier#367" class="opacity"><img src="http://i62.servimg.com/u/f62/11/22/01/25/210.png" border="0" alt="" /></a>
    </center>
    </td>
    <td width="65%" style="vertical-align:top; text-align:right;"><table width="100%"><tr style="; margin-right:10%;" width="100%"><td width="100%" class="titre">
    Copyright </td></tr>
    <tr width="100%"><td style="margin-right:<strong>10</strong>%; color:#98a8b6;" width="100%">
    © LPA toute reproduction totale ou partielle des images ou idées strictement interdite.
    </td></tr></table>
    </td>
    </tr>
    </tbody></table>

Il suffisait de faire un new tableau, avec un tr et deux td ^^

Cordialement.

[sephora25]

Merci beaucoup ! Ça marche ! ♥

[Alex Fowl]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif