Les infobulles ne veulent pas s'aligner

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

Résolu Les infobulles ne veulent pas s'aligner

Message par Anshaca le Lun 25 Juil 2011 - 13:44

Bonjour à tous,

mon souci du jour est avec ma page d'accueil et mes infobulles. J'ai un tableau et je voudrais aligner ces infobulles, mais elles se mettent toutes les unes en dessous des autres... Alors j'ai cherché, et j'ai trouvé qu'il fallait mettre un tableau dans un tableau Laughing . Sauf que quand je fais ça, c'est toute ma page d'accueil qui est déformée Confused . Je voudrais que les infobulles soient sur deux lignes. Une pour les admins, une autre, en dessous pour les modos, mais je n'y arrive pas Mad

Si quelqu'un pouvait jeter un oeil sur mon code et me dire comment faire pour que ce ne soit pas tout déformé...

voici l'adresse de mon forum test : http://lacorolleecarlate.actifforum.com/forum

"code css infobulles":
/*infobulles*/
.infobulle{
position: relative;
z-index: 0;}

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

.infobulle span{
position: absolute;
background-color: transparent;
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:#FF0000;
border: 2px outset #FFFFFF;}

mais je ne pense pas que ça vienne des infobulles en elles mêmes.

"code HTML de la page d'accueil":

<TABLE cellPadding=2>
<TBODY>
<TR>
<TD vAlign=top width="22%"><br><br>
<CENTER style="FONT-FAMILY: Georgia"><FONT color=sandybrown size=3>Navigation</FONT></CENTER>
<CENTER style="FONT-FAMILY: Georgia"> </CENTER>
<CENTER style="FONT-FAMILY: Georgia"><FONT size=2><center>
<br><a href="http://fanfictionsunivers.forumactif.fr/profile.forum?mode=register"><img src="http://i41.servimg.com/u/f41/12/41/06/34/ins10.png" border="0" alt="Image hébergée par servimg.com" /></a>

<br><a href="http://fanfictionsunivers.forumactif.fr/regles-et-charte-f10/reglement-du-forum-t1.htm"><img src="http://i41.servimg.com/u/f41/12/41/06/34/reg10.png" border="0" alt="Image hébergée par servimg.com" /></a><a href="http://fanfictionsunivers.forumactif.fr/regles-et-charte-f10/reglement-du-forum-t1.htm"></a>

<br>

<a href="http://fanfictionsunivers.forumactif.fr/presentations-f1/"><img src="http://i41.servimg.com/u/f41/12/41/06/34/pres10.png" border="0" alt="Image hébergée par servimg.com" /></a>

<br>
<a href="http://www.facebook.com/group.php?gid=188995216360&ref=ts"><img src="http://i41.servimg.com/u/f41/12/41/06/34/face10.png" border="0" alt="Image hébergée par servimg.com" /></a>
</center>

<br><br><br><br>

<CENTER><STRONG><FONT color=#f4a460 size=2>Nous lier</FONT></STRONG></CENTER>
<CENTER>
<br><br>
<a href="http://http://fanfictionsunivers.forumactif.fr/t227-nous-lier"><a href="http://www.servimg.com/image_preview.php?i=1296&u=12410634" target="_blank" ><img src="http://i41.servimg.com/u/f41/12/41/06/34/fu101010.gif" border="0" alt="Image hébergée par servimg.com" /></a>
<TD vAlign=top width="56%">
<CENTER style="FONT-FAMILY: Georgia"><FONT size=5>Welcome on board</FONT></CENTER><FONT size=5></FONT>
<CENTER style="FONT-FAMILY: Georgia"><BR><BR><FONT color=#f4a460><SPAN class=gen><FONT color=#000000 size=2>{USER&amp;#8288;NAME}
<br><br><br><center>Nous vous souhaitons la bienvenue sur le forum. <br/><br><br/>Vous êtes fan d’une série et vous n’avez pas du tout aimé la façon dont celle-ci se termine ?<br/>Vous avez écrit la suite d’un épisode ou bien un meilleur final ?...<br/>Vous écrivez aussi des textes ou poèmes... <br/><br><br/>Alors vous êtes au bon endroit, venez partager vos histoires, méthodes d’écriture, etc…<br/>Vous trouverez également des histoires, mis en ligne par divers auteurs.<br/>Je vous souhaite de passer un agréablement moment.
<br><br>Bonne visite</center>

<BR><BR> <BR></DIV><DIV style="TEXT-ALIGN: center"><FONT size=1><FONT size=2><STRONG><FONT color=#f4a460>Le Staff</FONT></STRONG><BR></FONT> <BR></DIV><DIV style="TEXT-ALIGN: center">
Les Admins

<div class="infobulle"><img src="http://i21.servimg.com/u/f21/12/41/06/34/avatka10.jpg"border="0" alt=""">
<span><img src="http://i41.servimg.com/u/f41/12/41/06/34/1-1110.jpg" border="0" alt="Image hébergée par servimg.com" /></a>
<br>
Admin
<br>
<a href="http://fanfictionsunivers.forumactif.fr/privmsg?mode=post&u=1">mp</a>
<br>
<a href="http://fanfictionsunivers.forumactif.fr/u1">Profil</a></span></div><div class="infobulle"><img src="http://i41.servimg.com/u/f41/12/41/06/34/autre_10.png" border="0" alt="Image hébergée par servimg.com">
<span><a href="http://www.servimg.com/image_preview.php?i=1301&u=12410634" target="_blank" ><img src="http://i41.servimg.com/u/f41/12/41/06/34/4-4311.jpg" border="0" alt="Image hébergée par servimg.com" /></a>
<br>
Couteau Suisse
<br>
<a href="http://fanfictionsunivers.forumactif.fr/privmsg?mode=post&u=4">mp</a>
<br>
<a href="http://fanfictionsunivers.forumactif.fr/u4">Profil</a></span></div>


Les Modos<div class="infobulle"><img src="http://i21.servimg.com/u/f21/12/41/06/34/end_pe10.jpg">
<span><img src="http://r15.imgfast.net/users/1511/74/66/13/avatars/6-80.jpg" border="0" alt="Image hébergée par servimg.com" /></a>
<br>
<a href="http://fanfictionsunivers.forumactif.fr/privmsg?mode=post&u=6">mp</a>
<br>
<a href="http://fanfictionsunivers.forumactif.fr/u6">Profil</a></span></div>
</span></div><div class="infobulle"><img src="http://i41.servimg.com/u/f41/12/41/06/34/soso10.png">
<span><img src="http://r15.imgfast.net/users/1511/74/66/13/avatars/21-23.jpg" /></a>
<br>
<a href="http://fanfictionsunivers.forumactif.fr/privmsg?mode=post&u=21">mp</a>
<br>
<a href="http://fanfictionsunivers.forumactif.fr/u21">Profil</a></span></div>
</span></div></span></div><div class="infobulle"><img src="http://i21.servimg.com/u/f21/12/41/06/34/black_10.jpg">
<span><img src="http://r15.imgfast.net/users/1511/74/66/13/avatars/26-47.jpg" /></a>
<br>
<a href="http://fanfictionsunivers.forumactif.fr/privmsg?mode=post&u=26">mp</a>
<br>
<a href="http://fanfictionsunivers.forumactif.fr/u26">Profil</a></span></div>
</span></div></span></div>
</FONT></LI></DIV></FONT></TD>



<TD vAlign=top width="22%"><DIV style="TEXT-ALIGN: center"></DIV><DIV align=left><DIV><BR> </DIV>
<CENTER style="FONT-FAMILY: Georgia"><FONT color=sandybrown size=3>Votez pour le forum</FONT></CENTER>
<br><br>
<br><center>
<a href='http://www.annuairedeforums.com/pages/move.php?id=28580&mode=in' target='_blank'><img src='http://www.annuairedeforums.com/images/bouton3.gif' border='0' alt='Visiter ForumLinker.com : Annuaire des Forums'></a>

<a href="http://fanfictionsunivers.boosterforum.com/" target="_blank"><img src="http://www.boosterforum.com/forum_ban/2_88x31.gif" width="88" height="31" alt="Publicité pour ton forum et échange de bannières" /></a></center>
<br><br><br><br>

<CENTER style="FONT-FAMILY: Georgia"><FONT color=#f4a460>Crédits</FONT></CENTER><FONT size=2><br><br><center><A HREF="http://www.copyscape.com/plagiarism-checker/"><IMG SRC="http://banners.copyscape.com/images/cs-gy-3d-120x60.gif" ALT="Protected by Copyscape Plagiarism Checker" TITLE="Protected by Copyscape Plagiarism Checker - Do not copy content from this page." WIDTH="120" HEIGHT="60" BORDER="0"></A><br/><br/>
Design : <br>
Anshaca<br><br>
© Toute reproduction entière ou partielle est interdite et sera signalé à Forumactif.</center>

Et je pense que le problème vient plutôt du code ci dessus.

Merci par avance à celui ou celle qui me tendra une perche


Dernière édition par Anshaca le Lun 25 Juil 2011 - 20:29, édité 1 fois

Anshaca
*

Féminin
Messages : 38
Inscrit(e) le : 15/03/2010

http://hpvst.forumsactifs.net/
Anshaca a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Les infobulles ne veulent pas s'aligner

Message par Lixyr le Lun 25 Juil 2011 - 18:32

Bonjour.

Je vous conseil une fois votre code récupérer de vérifier votre code et de le décharger de codes inutiles tels que :
<center style="blabla"></center>
ou du genre
<font size="1"><font size="2">blabla</font></font>
, surtout avec un strong entre les deux. ^^

=> le strong permet l'affichage en gros d'une phrase ou d'un mot
=> le font size permet la taille en pixel d'une phrase ou d'un mot
Choisissez donc l'un ou l'autre. ^^
et dans le cas ou vous mettez deux mêmes balises, comme dans la première citation que je vous ai mise, sachez que c'est la dernière qui est prise en compte, la première ne sert donc à rien.

Tout comme les codes du genre :

Code:
</font><br></font><br /></strong>

les balises de type
Code:
<br />
qui génèrent les retours à la ligne en html peuvent se mettre à la fin des fermeture des balises, c'est même mieux pour s'y retrouver. Après, vous faites comme vous voulez. ^^

---------------------------------------------------------------------------------------


Alors, pour votre code des infobulles, sachez qu'il est préférable d'utiliser des span plutôt que des div, quand on veut que ses images apparaissent sur la même ligne, car les div sont des bloc qui génèrent automatiquement un retour à la ligne, ce qui n'est pas le cas des span.

Je vous mets un petit schéma explicatif ici en code de ce que vous avez fait comme erreur pour vos infobulles :

<div class="infobulle"><img src="http://i41.servimg.com/u/f41/12/41/06/34/autre_10.png" border="0" alt="Image hébergée par servimg.com"><br><span><a href="http://www.servimg.com/image_preview.php?i=1301&u=12410634" target="_blank" ><img src="http://i41.servimg.com/u/f41/12/41/06/34/4-4311.jpg" border="0" alt="Image hébergée par servimg.com" /></a>
<br>Couteau Suisse<br><a href="http://fanfictionsunivers.forumactif.fr/privmsg?mode=post&u=4">mp</a><br><a href="http://fanfictionsunivers.forumactif.fr/u4">Profil</a></span></div>


tout ce que j'ai mis en rouge génère les retour à la ligne : les div et les
Code:
<br /> ou <br>
qui se situent avant la balise span qui ouvre l'info bulle.


Modifiez donc vos div par des span. Ce sera mieux, et retirez tous les br que vous avez mis avant les span d'ouverture de l'info bulle.

Voici votre Code de la PA modifiée :
Code:

<TABLE cellPadding=2>
<TBODY>
<TR>
<TD vAlign=top width="22%"><br><br>
<CENTER style="FONT-FAMILY: Georgia"><FONT color=sandybrown size=3>Navigation</FONT></CENTER>

<CENTER style="FONT-FAMILY: Georgia"><FONT size=2><center>
<br><a href="http://fanfictionsunivers.forumactif.fr/profile.forum?mode=register"><img src="http://i41.servimg.com/u/f41/12/41/06/34/ins10.png" border="0" alt="Image hébergée par servimg.com" /></a>

<br><a href="http://fanfictionsunivers.forumactif.fr/regles-et-charte-f10/reglement-du-forum-t1.htm"><img src="http://i41.servimg.com/u/f41/12/41/06/34/reg10.png" border="0" alt="Image hébergée par servimg.com" /></a><a href="http://fanfictionsunivers.forumactif.fr/regles-et-charte-f10/reglement-du-forum-t1.htm"></a>

<br>

<a href="http://fanfictionsunivers.forumactif.fr/presentations-f1/"><img src="http://i41.servimg.com/u/f41/12/41/06/34/pres10.png" border="0" alt="Image hébergée par servimg.com" /></a>

<br>
<a href="http://www.facebook.com/group.php?gid=188995216360&ref=ts"><img src="http://i41.servimg.com/u/f41/12/41/06/34/face10.png" border="0" alt="Image hébergée par servimg.com" /></a>
</center>

<br><br><br><br>

<CENTER><STRONG><FONT color=#f4a460 size=2>Nous lier</FONT></STRONG></CENTER>
<CENTER>
<br><br>
<a href="http://http://fanfictionsunivers.forumactif.fr/t227-nous-lier"><a href="http://www.servimg.com/image_preview.php?i=1296&u=12410634" target="_blank" ><img src="http://i41.servimg.com/u/f41/12/41/06/34/fu101010.gif" border="0" alt="Image hébergée par servimg.com" /></a>
<TD vAlign=top width="56%">
<CENTER style="FONT-FAMILY: Georgia"><FONT size=5>Welcome on board</FONT></CENTER><FONT size=5></FONT>
<CENTER style="FONT-FAMILY: Georgia"><BR><BR><FONT color=#f4a460><SPAN class=gen><FONT color=#000000 size=2>{USER&amp;#8288;NAME}
<br><br><br><center>Nous vous souhaitons la bienvenue sur le forum. <br/><br><br/>Vous êtes fan d’une série et vous n’avez pas du tout aimé la façon dont celle-ci se termine ?<br/>Vous avez écrit la suite d’un épisode ou bien un meilleur final ?...<br/>Vous écrivez aussi des textes ou poèmes... <br/><br><br/>Alors vous êtes au bon endroit, venez partager vos histoires, méthodes d’écriture, etc…<br/>Vous trouverez également des histoires, mis en ligne par divers auteurs.<br/>Je vous souhaite de passer un agréablement moment.
<br><br>Bonne visite</center>

<BR><BR> <BR></DIV><DIV style="TEXT-ALIGN: center"><FONT size=1><FONT size=2><STRONG><FONT color=#f4a460>Le Staff</FONT></STRONG></FONT></font></DIV> <BR><BR><DIV style="TEXT-ALIGN: center">
Les Admins<br>


<span class="infobulle"><img src="http://i21.servimg.com/u/f21/12/41/06/34/avatka10.jpg"border="0" alt="""><span><img src="http://i41.servimg.com/u/f41/12/41/06/34/1-1110.jpg" border="0" alt="Image hébergée par servimg.com" /></a><br>Admin<br><a href="http://fanfictionsunivers.forumactif.fr/privmsg?mode=post&u=1">mp</a><br><a href="http://fanfictionsunivers.forumactif.fr/u1">Profil</a></span></span>

<span class="infobulle"><img src="http://i41.servimg.com/u/f41/12/41/06/34/autre_10.png" border="0" alt="Image hébergée par servimg.com"><span><a href="http://www.servimg.com/image_preview.php?i=1301&u=12410634" target="_blank" ><img src="http://i41.servimg.com/u/f41/12/41/06/34/4-4311.jpg" border="0" alt="Image hébergée par servimg.com" /></a>
<br>Couteau Suisse<br><a href="http://fanfictionsunivers.forumactif.fr/privmsg?mode=post&u=4">mp</a><br><a href="http://fanfictionsunivers.forumactif.fr/u4">Profil</a></span></span>

<br><br>

Les Modos<br>
<span class="infobulle"><img src="http://i21.servimg.com/u/f21/12/41/06/34/end_pe10.jpg"><span><img src="http://r15.imgfast.net/users/1511/74/66/13/avatars/6-80.jpg" border="0" alt="Image hébergée par servimg.com" /></a>
<br><a href="http://fanfictionsunivers.forumactif.fr/privmsg?mode=post&u=6">mp</a><br><a href="http://fanfictionsunivers.forumactif.fr/u6">Profil</a></span></span>

<span class="infobulle"><img src="http://i41.servimg.com/u/f41/12/41/06/34/soso10.png"><span><img src="http://r15.imgfast.net/users/1511/74/66/13/avatars/21-23.jpg" /></a>
<br><a href="http://fanfictionsunivers.forumactif.fr/privmsg?mode=post&u=21">mp</a><br><a href="http://fanfictionsunivers.forumactif.fr/u21">Profil</a></span></span>

<span class="infobulle"><img src="http://i21.servimg.com/u/f21/12/41/06/34/black_10.jpg"><span><img src="http://r15.imgfast.net/users/1511/74/66/13/avatars/26-47.jpg" /></a><br><a href="http://fanfictionsunivers.forumactif.fr/privmsg?mode=post&u=26">mp</a><br><a href="http://fanfictionsunivers.forumactif.fr/u26">Profil</a></span></span>

</FONT></LI></DIV></FONT></TD>



<TD vAlign=top width="22%"><DIV style="TEXT-ALIGN: center"></DIV><DIV align=left><DIV><BR> </DIV>
<CENTER style="FONT-FAMILY: Georgia"><FONT color=sandybrown size=3>Votez pour le forum</FONT></CENTER>
<br><br>
<br><center>
<a href='http://www.annuairedeforums.com/pages/move.php?id=28580&mode=in' target='_blank'><img src='http://www.annuairedeforums.com/images/bouton3.gif' border='0' alt='Visiter ForumLinker.com : Annuaire des Forums'></a>

<a href="http://fanfictionsunivers.boosterforum.com/" target="_blank"><img src="http://www.boosterforum.com/forum_ban/2_88x31.gif" width="88" height="31" alt="Publicité pour ton forum et échange de bannières" /></a></center>
<br><br><br><br>

<CENTER style="FONT-FAMILY: Georgia"><FONT color=#f4a460>Crédits</FONT></CENTER><FONT size=2><br><br><center><A HREF="http://www.copyscape.com/plagiarism-checker/"><IMG SRC="http://banners.copyscape.com/images/cs-gy-3d-120x60.gif" ALT="Protected by Copyscape Plagiarism Checker" TITLE="Protected by Copyscape Plagiarism Checker - Do not copy content from this page." WIDTH="120" HEIGHT="60" BORDER="0"></A><br/><br/>
Design : <br>
Anshaca<br><br>
© Toute reproduction entière ou partielle est interdite et sera signalée à Forumactif.</center>


ps : je me suis permise de corriger une faute d'orthographe que j'ai aperçue dans la dernière ligne de votre code.

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Les infobulles ne veulent pas s'aligner

Message par Anshaca le Lun 25 Juil 2011 - 20:28

C'est très gentil de votre part, je comprends mieux maintenant... J'ai mis un peux de tout dans ce code Razz

Je vais donc enlever ce qui ne sert à rien, mais il me restait un petit problème que je viens de régler, c'était l'emplacement de ma bulle une fois ouverte.

Merci beaucoup de votre aide.

Anshaca
*

Féminin
Messages : 38
Inscrit(e) le : 15/03/2010

http://hpvst.forumsactifs.net/
Anshaca a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Les infobulles ne veulent pas s'aligner

Message par Lixyr le Lun 25 Juil 2011 - 20:31

Ravie d'avoir pu aider.
Bonne continuation à vous.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

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


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