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

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Place de l'image de base de l'infobulle.

Message par sephora25 Dim 10 Avr 2011 - 12:57

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 Smile
avatar

sephora25
**

Féminin
Messages : 55
Inscrit(e) le : 19/12/2008

http://les-plaines-d-anubis.allgoo.us/
sephora25 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Place de l'image de base de l'infobulle.

Message par Anzu Dim 10 Avr 2011 - 14:11

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.
Anzu

Anzu
Membre actif

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

https://forum.forumactif.com/
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Place de l'image de base de l'infobulle.

Message par sephora25 Dim 10 Avr 2011 - 15:17

Merci beaucoup ! Ça marche ! ♥
avatar

sephora25
**

Féminin
Messages : 55
Inscrit(e) le : 19/12/2008

http://les-plaines-d-anubis.allgoo.us/
sephora25 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Place de l'image de base de l'infobulle.

Message par Alex Fowl Lun 11 Avr 2011 - 8:48

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

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur Place de l'image de base de l'infobulle. Envoi10


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton Place de l'image de base de l'infobulle. 50378

A bientôt sur ForumActif Smile
avatar

Alex Fowl
Membre actif

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

Alex Fowl a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum