Page d'accueil...

[lyvie]

Bonjour à tous !

Donc voilà mon problème:
J'ai un code pour ma page d'accueil qui fonctionne pour l'instant bien... Mais. Le soucis est que j'ai dedans une liste d'image, qui se met "automatiquement" en colonne et non en ligne comme je le désirerais... Peut-être que lorsque se problème sera réglé, la transparence des images fonctionnera ? Je ne sais pas, c'est pourquoi je vous demande votre aide =D !

Donc mon code:

Code:

<tr><td class="row1" rowspan="3" align="center" valign="middle"><div class="gensmall"><span class="genmed"><span class="postbody"></span><table class="forumline table1 bg3" width="100%" cellspacing="1"><tbody><tr><th colspan="1" rowspan="1" class="thTop forabg" width="28%">NAVIGATION</th><th colspan="1" rowspan="1" class="thTop forabg" width="43%">WELCOME!</th><th colspan="1" rowspan="1" class="thTop forabg" width="29%">NEWS </th>
</tr>
 
 
 
<tr><td class="row3" colspan="1" rowspan="1" valign="top" align="center"><span class="postbody">
<a href="http://lycee-akatsuki.forumactif.org/f1-reglements" class="postlink"> » Réglement </a><br>
<a href="http://lycee-akatsuki.forumactif.org/t2-contexte-du-forum" class="postlink"> » Contexte </a><br>
<a href="http://lycee-akatsuki.forumactif.org/t224-les-personnages-predefinis " class="postlink">»Prédéfinis</a><br>
<a href=" http://lycee-akatsuki.forumactif.org/f98-fiches-en-cours-non-validees " class="postlink"> » Présentations </a><br>
<a href="http://lycee-akatsuki.forumactif.org/f68-questions-suggestions-news " class="postlink"> » Questions ? </a><br>
<a href="http://lycee-akatsuki.forumactif.org/t42-important-a-lire-fiche-de-claus-la-fiche-se-developpera-grace-aux-membres " class="postlink"> » La fiche de Claus</a><br>
</span></td><td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"><u><i> « Bienvenue au Lycée ! Un peu... D'histoire...! » </i></u>
<blockquote  style="height:200px"> <div style="overflow:auto;height:200px"> Il y a de cela plusieurs années, une femme eut l'idée de réunir tous les jeunes ''uniques'' en un seul même lieu afin de leur apprendre son savoir et de les mélangés aux humains, ces êtres parfois dépourvus d'ouverture d'esprit. Elle fit donc bâtir un Lycée, où petits et grands côtoyeraient de grands professeurs (ou pas), expert en la matière du surnaturel. La Fondatrice avait des contacts. Et elle fit appel à une organisation, connue autrefois comme étant des criminels extrêmement recherchés, j'ai dénommé: la seule et unique, Akatsuki. D'où le nom du Lycée.

On fit également construire un Internat, où les élèves et membres du personnel qui le désirait, pouvaient élir domicile, étant ainsi à proximité de leur environnement scolaire, social et professionnel.  </div></blockquote>

</span></td>
 
<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">
~ Il serait bien de clôturer l'event de Noël ;). Pour le suivre, c'est ici <a href="http://lycee-akatsuki.forumactif.org/t128-que-le-bal-commence " class="postlink">ici</a><br>
~ Le forum cherche de nouveaux membres !<br>
</span></td>
 
</tr><tr><th class="thTop forabg" colspan="1" rowspan="1">WANTED</th>
<th class="thTop forabg" colspan="1" rowspan="1"> STAFF
<br></th><th class="thTop forabg" colspan="1" rowspan="1"> PARTENARIAT
<br></th></tr>
 
<tr><td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"><div class="defil">
~Naruto Uzumaki !!! <a href="http://lycee-akatsuki.forumactif.org/t224-les-personnages-predefinis " class="postlink">ici</a><br>
~Sasuke Uchiwa !!! <a href="http://lycee-akatsuki.forumactif.org/t224-les-personnages-predefinis " class="postlink">ici</a><br>
</div>
</span></td>
 
<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"> <div align="center"><a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t10.jpg" class="transparence"><span>Pein/???<br>Fondatrice</span></a> <a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t11.jpg" class="transparence"><span>Nahima Shinai<br>Co-Fondatrice</span></a>  <a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t12.jpg" class="transparence"><span>Natsuki<br>Administrateur</span></a>
<a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t13.jpg" class="transparence"><span>Sainan'/Akira Kyurami <br>Administratrice</span></a>
<a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t14.jpg" class="transparence"><span>Akasuki Kazuki <br>Modérateur</span></a>
<a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t15.jpg" class="transparence"><span>Kizrell Uotani <br>Modérateur</span></a> 
</span></td>
 
<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"> 
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence"></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence"></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence"></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence"></a>

<a href="http://lycee-akatsuki.forumactif.org/t268-fiche-de-partenariat#4855 " class="postlink">Devenir partenaire ?</a><br>
</span></td>

Ce n'est qu'un simple tableau oui... Donc le problème se trouverai ici:

Code:

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"> <div align="center"><a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t10.jpg" class="transparence"><span>Pein/???<br>Fondatrice</span></a> <a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t11.jpg" class="transparence"><span>Nahima Shinai<br>Co-Fondatrice</span></a>  <a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t12.jpg" class="transparence"><span>Natsuki<br>Administrateur</span></a>
<a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t13.jpg" class="transparence"><span>Sainan'/Akira Kyurami <br>Administratrice</span></a>
<a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t14.jpg" class="transparence"><span>Akasuki Kazuki <br>Modérateur</span></a>
<a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t15.jpg" class="transparence"><span>Kizrell Uotani <br>Modérateur</span></a> 
</span></td>

Ce que donne le code:

Spoiler:

Merci d'avance !

Cordialement, Lyvie !

[Invité]

Bonjour,

Pour résoudre le problème, il faut mettre vos image dans un petit tableau:

Code:

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"> <div align="center"><table><tr><td><a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t10.jpg" class="transparence"><span>Pein/???<br>Fondatrice</span></a></td><td><a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t11.jpg" class="transparence"><span>Nahima Shinai<br>Co-Fondatrice</span></a></td><td><a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t12.jpg" class="transparence"><span>Natsuki<br>Administrateur</span></a></td><td>
<a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t13.jpg" class="transparence"><span>Sainan'/Akira Kyurami <br>Administratrice</span></a></td><td>
<a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t14.jpg" class="transparence"><span>Akasuki Kazuki <br>Modérateur</span></a></td><td>
<a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t15.jpg" class="transparence"><span>Kizrell Uotani <br>Modérateur</span></a> 
</span></td><td></table></td>

Cordialement

[lyvie]

Merci beaucoup cela fonctionne à merveille ^^ !

J'ai du coup une deuxième question =/...

Est-ce-que vous auriez un code html toujours pour la page d'accueil, qui, lorsque la souris passe sur une des images, que vous venez de me mettre en tableau ^^, quelque chose d'autre apparaisse ?

Je m'explique... La nous voyons ceci:

Spoiler:

A la base, les pseudos et titres ne sont censés être visible que lorsque la souris les survolent... Mais... Cela ne marche pas --'. Donc toujours avec ce code des images:

Code:

<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"> <div align="center"><a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t10.jpg" class="transparence"><span>Pein/???<br>Fondatrice</span></a> <a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t11.jpg" class="transparence"><span>Nahima Shinai<br>Co-Fondatrice</span></a>  <a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t12.jpg" class="transparence"><span>Natsuki<br>Administrateur</span></a>
<a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t13.jpg" class="transparence"><span>Sainan'/Akira Kyurami <br>Administratrice</span></a>
<a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t14.jpg" class="transparence"><span>Akasuki Kazuki <br>Modérateur</span></a>
<a href="#" class="info"><span><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t15.jpg" class="transparence"><span>Kizrell Uotani <br>Modérateur</span></a> 
</span></td>

Comment faire en sorte que le texte apparaisse seulement au passage de la souris...

Merci d'avance, encore !

EDIT: --'... Je suis vraiment désolée mais nouveau problème... Le code allait très bien, (oui j'ai trouvé un autre système pour les images. Si vous avez un code sous la main je prend mais sinon ça ira merci !)

Et donc ! Le nouveau problème est pourtant simple... Mais une colonne et une ligne s'incruste toutes seules à chaque fois alors que le code ne change pas... Je ne sais plus quoi faire u_u' ! Voici donc le code:

Code:

<tr><td class="row1" rowspan="3" align="center" valign="middle"><div class="gensmall"><span class="genmed"><span class="postbody"></span><table class="forumline table1 bg3" width="100%" cellspacing="1"><tbody><tr><th colspan="1" rowspan="1" class="thTop forabg" width="28%">NAVIGATION</th><th colspan="1" rowspan="1" class="thTop forabg" width="43%">WELCOME!</th><th colspan="1" rowspan="1" class="thTop forabg" width="29%">NEWS </th>
</tr> </td>
 
 
 
<tr><td class="row3" colspan="1" rowspan="1" valign="top" align="center"><span class="postbody">
<a href="http://lycee-akatsuki.forumactif.org/f1-reglements" class="postlink"> » Réglement </a><br>
<a href="http://lycee-akatsuki.forumactif.org/t2-contexte-du-forum" class="postlink"> » Contexte </a><br>
<a href="http://lycee-akatsuki.forumactif.org/t224-les-personnages-predefinis " class="postlink">»Prédéfinis</a><br>
<a href=" http://lycee-akatsuki.forumactif.org/f98-fiches-en-cours-non-validees " class="postlink"> » Présentations </a><br>
<a href="http://lycee-akatsuki.forumactif.org/f68-questions-suggestions-news " class="postlink"> » Questions ? </a><br>
<a href="http://lycee-akatsuki.forumactif.org/t42-important-a-lire-fiche-de-claus-la-fiche-se-developpera-grace-aux-membres " class="postlink"> » La fiche de Claus</a><br>
</span></td><td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"><u><i> « Bienvenue au Lycée ! Un peu... D'histoire...! » </i></u><div><font=Arial><justify>
<blockquote  style="height:200px"> <div style="overflow:auto;height:200px"> Il y a de cela plusieurs années, une femme eut l'idée de réunir tous les jeunes ''uniques'' en un seul même lieu afin de leur apprendre son savoir et de les mélangés aux humains, ces êtres parfois dépourvus d'ouverture d'esprit. Elle fit donc bâtir un Lycée, où petits et grands côtoyeraient de grands professeurs (ou pas), expert en la matière du surnaturel. La Fondatrice avait des contacts. Et elle fit appel à une organisation, connue autrefois comme étant des criminels extrêmement recherchés, j'ai dénommé: la seule et unique, Akatsuki. D'où le nom du Lycée.

On fit également construire un Internat, où les élèves et membres du personnel qui le désirait, pouvaient élir domicile, étant ainsi à proximité de leur environnement scolaire, social et professionnel.  </div></blockquote></font></justify></div>

</span></td>
 
<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">
~ Il serait bien de clôturer l'event de Noël ;). Pour le suivre, c'est <a href="http://lycee-akatsuki.forumactif.org/t128-que-le-bal-commence " class="postlink">ici</a><br>
~ Le forum cherche de nouveaux membres !<br>
</span></td>
 
</tr><tr><th class="thTop forabg" colspan="1" rowspan="1">WANTED</th>
<th class="thTop forabg" colspan="1" rowspan="1"> STAFF
<br></th><th class="thTop forabg" colspan="1" rowspan="1"> PARTENARIAT
<br></th></tr>
 
<tr><td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"><div class="defil">
~Naruto Uzumaki !!! <a href="http://lycee-akatsuki.forumactif.org/t224-les-personnages-predefinis " class="postlink">ici</a><br>
~Sasuke Uchiwa !!! <a href="http://lycee-akatsuki.forumactif.org/t224-les-personnages-predefinis " class="postlink">ici</a><br>
</div>
</span></td>
 
<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"> <div align="center"><table><tr><td>
<a href="http://lycee-akatsuki.forumactif.org/u1?tid=c2e54b0a9e72bfefc44d812f406a9e31" class="postlink"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t21.jpg" border="0" alt="" /> </a>


<a href="http://lycee-akatsuki.forumactif.org/u3" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t16.jpg" border="0" alt="" /></a>


<a href="http://lycee-akatsuki.forumactif.org/u36" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t17.jpg" border="0" alt="" /></a>


<a href="http://lycee-akatsuki.forumactif.org/u2" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t18.jpg" border="0" alt="" /></a>


<a href="http://lycee-akatsuki.forumactif.org/u7" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t19.jpg" border="0" alt="" /></a>


<a href="http://lycee-akatsuki.forumactif.org/u8" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t20.jpg" border="0" alt="" /></a>


<td></table></td>

 
<blockquote  style="height:156px"> <div style="overflow:auto;height:156px"><td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"> 
<a href="http://vampire-knight-rpg.forumgratuit.ch/" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/vk10.png" border="0" alt="" /></a>
<a href="http://madiltan.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/madilt10.jpg" border="0" alt="" /></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence"></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence"></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence"></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence"></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence"></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence"></a>

</div></blockquote>

<br><a href="http://lycee-akatsuki.forumactif.org/t268-fiche-de-partenariat#4855 " class="postlink">Devenir partenaire ?</a></br>
</span></td>


Ainsi que ce qu'il donne:

Spoiler:

Vous voyez donc maintenant mieux, la ligne noire qui est au dessus du tableau. Ainsi que la colonne blanche sur la gauche, qui descend jusqu'en bas du forum. Toutes les balises <td> sont bien fermées, normalement aucunes n'est de trop. A moins que mes yeux m'aient faussé compagnie !

Merci de pouvoir m'aider à cet endroit là où je bloque depuis quelque heures déjà --'...!

Ce qui pourrait changer quelque chose, mais je ne pense pas... m'enfin je vous le dis quand même ^^ !
J'ai rajouté à la ligne 58 ceci

Code:

<blockquote  style="height:156px"> <div style="overflow:auto;height:156px"> ( les images partenaires blablabla...) </div></blockquote>

Le problème pourrait-il venir de là ?

Cordialement !

[Invité]

Bonjour,

Il s'agit d'un petit soucis dans l'ordre des balises. Vous avez mis la div et le blockquote en dehors de la cellule . En remettant tout ça à l'intérieur la ligne au dessus du tableau disparait. Dites-moi si comme ceci ça fonctionne mieux:

Code:

<table class="forumline table1 bg3" width="100%" cellspacing="1"><tbody><tr><th colspan="1" rowspan="1" class="thTop forabg" width="28%">NAVIGATION</th><th colspan="1" rowspan="1" class="thTop forabg" width="43%">WELCOME!</th><th colspan="1" rowspan="1" class="thTop forabg" width="29%">NEWS </th>
</tr>
 
 
<tr><td class="row3" colspan="1" rowspan="1" valign="top" align="center"><span class="postbody">
<a href="http://lycee-akatsuki.forumactif.org/f1-reglements" class="postlink"> » Réglement </a><br>
<a href="http://lycee-akatsuki.forumactif.org/t2-contexte-du-forum" class="postlink"> » Contexte </a><br>
<a href="http://lycee-akatsuki.forumactif.org/t224-les-personnages-predefinis " class="postlink">»Prédéfinis</a><br>
<a href=" http://lycee-akatsuki.forumactif.org/f98-fiches-en-cours-non-validees " class="postlink"> » Présentations </a><br>
<a href="http://lycee-akatsuki.forumactif.org/f68-questions-suggestions-news " class="postlink"> » Questions ? </a><br>
<a href="http://lycee-akatsuki.forumactif.org/t42-important-a-lire-fiche-de-claus-la-fiche-se-developpera-grace-aux-membres " class="postlink"> » La fiche de Claus</a><br>
</span></td><td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"><u><i> « Bienvenue au Lycée ! Un peu... D'histoire...! » </i></u><div><font=Arial><justify>
<blockquote  style="height:200px"> <div style="overflow:auto;height:200px"> Il y a de cela plusieurs années, une femme eut l'idée de réunir tous les jeunes ''uniques'' en un seul même lieu afin de leur apprendre son savoir et de les mélangés aux humains, ces êtres parfois dépourvus d'ouverture d'esprit. Elle fit donc bâtir un Lycée, où petits et grands côtoyeraient de grands professeurs (ou pas), expert en la matière du surnaturel. La Fondatrice avait des contacts. Et elle fit appel à une organisation, connue autrefois comme étant des criminels extrêmement recherchés, j'ai dénommé: la seule et unique, Akatsuki. D'où le nom du Lycée.
 
On fit également construire un Internat, où les élèves et membres du personnel qui le désirait, pouvaient élir domicile, étant ainsi à proximité de leur environnement scolaire, social et professionnel.  </div></blockquote></font></justify></div>
 
</span></td>
 
<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">
~ Il serait bien de clôturer l'event de Noël ;). Pour le suivre, c'est <a href="http://lycee-akatsuki.forumactif.org/t128-que-le-bal-commence " class="postlink">ici</a><br>
~ Le forum cherche de nouveaux membres !<br>
</span></td>
 
</tr><tr><th class="thTop forabg" colspan="1" rowspan="1">WANTED</th>
<th class="thTop forabg" colspan="1" rowspan="1"> STAFF
<br></th><th class="thTop forabg" colspan="1" rowspan="1"> PARTENARIAT
<br></th></tr>
 
<tr><td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"><div class="defil">
~Naruto Uzumaki !!! <a href="http://lycee-akatsuki.forumactif.org/t224-les-personnages-predefinis " class="postlink">ici</a><br>
~Sasuke Uchiwa !!! <a href="http://lycee-akatsuki.forumactif.org/t224-les-personnages-predefinis " class="postlink">ici</a><br>
</div>
</span></td>
 
<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"> <div align="center"><table><tr><td>
<a href="http://lycee-akatsuki.forumactif.org/u1?tid=c2e54b0a9e72bfefc44d812f406a9e31" class="postlink"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t21.jpg" border="0" alt="" /> </a>
 
 
<a href="http://lycee-akatsuki.forumactif.org/u3" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t16.jpg" border="0" alt="" /></a>
 
 
<a href="http://lycee-akatsuki.forumactif.org/u36" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t17.jpg" border="0" alt="" /></a>
 
 
<a href="http://lycee-akatsuki.forumactif.org/u2" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t18.jpg" border="0" alt="" /></a>
 
 
<a href="http://lycee-akatsuki.forumactif.org/u7" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t19.jpg" border="0" alt="" /></a>
 
 
<a href="http://lycee-akatsuki.forumactif.org/u8" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t20.jpg" border="0" alt="" /></a>
 
 
</td></tr></table></td>
 
 
<td class="row3" colspan="1" rowspan="1" align="center"><blockquote  style="height:156px;width: 300px;"> <div style="overflow:auto;height:156px;"><span class="postbody"> 
<a href="http://vampire-knight-rpg.forumgratuit.ch/" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/vk10.png" border="0" alt="" /></a>
<a href="http://madiltan.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/madilt10.jpg" border="0" alt="" /></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence" /></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence"></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence"></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence" /></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence" /></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence" /></a>
 
</div></blockquote>
 
<br><a href="http://lycee-akatsuki.forumactif.org/t268-fiche-de-partenariat#4855 " class="postlink">Devenir partenaire ?</a></br>
</span></td></tr></table>

Pour votre staff, si j'ai bie compris, l'idée est de faire des infobulles, essayez en vous aidant de ce sujet (clik!)

Cordialement.

[lyvie]

Je vous remercie encore et encore infiniment ! Il n'y a effectivement plus les deux bordures, mais il y a autre chose x) ! (Promis c'est le dernier ! Enfin j'espère...^^)

Nous voyons donc ceci maintenant:

Spoiler:

Ce qui est parfait oui, maiis ^^... Je pense que vous voyez tout de suite et aussi bien que moi que les colonnes n'ont plus la même dimension --'... J'ai essayé d'en mettre d'autre pour voir si cela changeait quelque chose, mais non rien du tout.
Donc le code toujours:

Code:

<table class="forumline table1 bg3" width="100%" cellspacing="1"><tbody><tr><th colspan="1" rowspan="1" class="thTop forabg" width="25%">NAVIGATION</th><th colspan="1" rowspan="1" class="thTop forabg" width="50%">WELCOME!</th><th colspan="1" rowspan="1" class="thTop forabg" width="25%">NEWS </th>
</tr>
 
 
<tr><td class="row3" colspan="1" rowspan="1" valign="top" align="center"><span class="postbody">
<a href="http://lycee-akatsuki.forumactif.org/f1-reglements" class="postlink"> » Réglement </a><br>
<a href="http://lycee-akatsuki.forumactif.org/t2-contexte-du-forum" class="postlink"> » Contexte </a><br>
<a href="http://lycee-akatsuki.forumactif.org/t224-les-personnages-predefinis " class="postlink">»Prédéfinis</a><br>
<a href=" http://lycee-akatsuki.forumactif.org/f98-fiches-en-cours-non-validees " class="postlink"> » Présentations </a><br>
<a href="http://lycee-akatsuki.forumactif.org/f68-questions-suggestions-news " class="postlink"> » Questions ? </a><br>
<a href="http://lycee-akatsuki.forumactif.org/t42-important-a-lire-fiche-de-claus-la-fiche-se-developpera-grace-aux-membres " class="postlink"> » La fiche de Claus</a><br>
</span></td><td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"><u><i> « Bienvenue au Lycée ! Un peu... D'histoire...! » </i></u><div><font=Arial><justify>
<blockquote  style="height:200px"> <div style="overflow:auto;height:200px"> Il y a de cela plusieurs années, une femme eut l'idée de réunir tous les jeunes ''uniques'' en un seul même lieu afin de leur apprendre son savoir et de les mélangés aux humains, ces êtres parfois dépourvus d'ouverture d'esprit. Elle fit donc bâtir un Lycée, où petits et grands côtoyeraient de grands professeurs (ou pas), expert en la matière du surnaturel. La Fondatrice avait des contacts. Et elle fit appel à une organisation, connue autrefois comme étant des criminels extrêmement recherchés, j'ai dénommé: la seule et unique, Akatsuki. D'où le nom du Lycée.
 
On fit également construire un Internat, où les élèves et membres du personnel qui le désirait, pouvaient élir domicile, étant ainsi à proximité de leur environnement scolaire, social et professionnel.  </div></blockquote></font></justify></div>
 
</span></td>
 
<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">
~ Il serait bien de clôturer l'event de Noël ;). Pour le suivre, c'est <a href="http://lycee-akatsuki.forumactif.org/t128-que-le-bal-commence " class="postlink">ici</a><br>
~ Le forum cherche de nouveaux membres !<br>
</span></td>
 
</tr><tr><th class="thTop forabg" colspan="1" rowspan="1">WANTED</th>
<th class="thTop forabg" colspan="1" rowspan="1"> STAFF
<br></th><th class="thTop forabg" colspan="1" rowspan="1"> PARTENARIAT
<br></th></tr>
 
<tr><td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"><div class="defil">
~Naruto Uzumaki !!! <a href="http://lycee-akatsuki.forumactif.org/t224-les-personnages-predefinis " class="postlink">ici</a><br>
~Sasuke Uchiwa !!! <a href="http://lycee-akatsuki.forumactif.org/t224-les-personnages-predefinis " class="postlink">ici</a><br>
</div>
</span></td>
 
<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"> <div align="center"><table><tr><td>
<a href="http://lycee-akatsuki.forumactif.org/u1?tid=c2e54b0a9e72bfefc44d812f406a9e31" class="postlink"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t21.jpg" border="0" alt="" /> </a>
 
 
<a href="http://lycee-akatsuki.forumactif.org/u3" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t16.jpg" border="0" alt="" /></a>
 
 
<a href="http://lycee-akatsuki.forumactif.org/u36" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t17.jpg" border="0" alt="" /></a>
 
 
<a href="http://lycee-akatsuki.forumactif.org/u2" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t18.jpg" border="0" alt="" /></a>
 
 
<a href="http://lycee-akatsuki.forumactif.org/u7" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t19.jpg" border="0" alt="" /></a>
 
 
<a href="http://lycee-akatsuki.forumactif.org/u8" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t20.jpg" border="0" alt="" /></a>
 
 
</td></tr></table></td>
 
 
<td class="row3" colspan="1" rowspan="1" align="center"><blockquote  style="height:156px;width: 300px;"> <div style="overflow:auto;height:156px;"><span class="postbody"> 
<a href="http://vampire-knight-rpg.forumgratuit.ch/" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/vk10.png" border="0" alt="" /></a>
<a href="http://madiltan.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/madilt10.jpg" border="0" alt="" /></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence" /></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence"></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence"></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence" /></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence" /></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence" /></a>
 
</div></blockquote>
 
<br><a href="http://lycee-akatsuki.forumactif.org/t268-fiche-de-partenariat#4855 " class="postlink">Devenir partenaire ?</a></br>
</span></td></tr></table>

Et puis pour l'infobulle, c'est exactement ça ! J'ai essayé d'autre code qui changeait complètement l'image au passage de la souris, mais non ce n'est pas ça. Votre infobulle était ce qui me fallait !
Seul problème (et oui... comme d'hab !), le premier code html que vous avez mit est censé suffire pour faire apparaître l'infobulle ?

(celui-ci:

Code:

<div class="infobulle"><img src="lien image ou apparait l'infobulle">
<span>Contenu de la bulle</span></div>

)

Si oui, il ne fonctionne pas dans mon code --'...
J'ai donc trouvé un autre code que je n'ai pas encore pris le temps d'essayer:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
* {
  font-size: 11px; /* On définit les propriétés de texte pour toutes les balises. */
  font-family: Tahoma, Verdana, Arial, serif;
}
a.info {
  position: relative;
  color: black;
  text-decoration: none;
  border-bottom: 1px gray dotted; /* On souligne le texte. */
}
a.info span {
  display: none; /* On masque l'infobulle. */
}
a.info:hover {
  background: none; /* Correction d'un bug d'Internet Explorer. */
  z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */

  cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
}
a.info:hover span {
  display: inline; /* On affiche l'infobulle. */
  position: absolute;

  white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */

  top: 30px; /* On positionne notre infobulle. */
  left: 20px;

  background: white;

  color: green;
  padding: 3px;

  border: 1px solid green;
  border-left: 4px solid green;
}
</style>
</head>

<body>
<p>Grâce au <a href="#" class="info">Wi-Fi<span>contraction de Wireless Fidelity</span></a>, il est possible de créer des réseaux locaux sans fil à haut débit pour peu que la station à connecter ne soit pas trop distante par rapport au point d'accès. Dans la pratique, le <a href="#" class="info">Wi-Fi<span>contraction de Wireless Fidelity</span></a> permet de relier des ordinateurs portables, des « machines de bureau », des assistants personnels (<a href="#" class="info">PDA<span>Personal Digital Assistant</span></a>) ou tout type de périphérique entre eux grâce à une liaison haut débit (11 Mb/s ou supérieur) sur un rayon de plusieurs dizaines de mètres en intérieur (généralement, entre une vingtaine et une cinquantaine de mètres) à plusieurs centaines de mètres en environnement ouvert.</p>
</body>

</html>


Ce code peut-il fonctionner dans ma page d'accueil ?
De plus, est-ce-qu'il faut ce long code pour une seule infobulle o_o ?
Si oui je le ferai ce n'est pas grave x) !

Mais votre code m'irais bien mieux ^^ !

Merci encore !

Cordialement, !

[Invité]

Pour la déformation du tableau, je plaide coupable. J'ai ajouté une largeur au blockquote de manière à garder 2 image cote à cote dans la dernière cellule, en retirant cette largeur, le tableau reprend ses bonnes proportions.

Ensuite concernant les infobulles, le code Html ne peux pas fonctionner tout seul, il faut absolument installer la partie CSS dans panneau d'admin' > affichage > couleur > feuille de style CSS.
Essayez avec ce message d'accueil:

Code:

<table class="forumline table1 bg3" width="100%" cellspacing="1"><tbody><tr><th colspan="1" rowspan="1" class="thTop forabg" width="25%">NAVIGATION</th><th colspan="1" rowspan="1" class="thTop forabg" width="50%">WELCOME!</th><th colspan="1" rowspan="1" class="thTop forabg" width="25%">NEWS </th>
</tr>
 
 
<tr><td class="row3" colspan="1" rowspan="1" valign="top" align="center"><span class="postbody">
<a href="http://lycee-akatsuki.forumactif.org/f1-reglements" class="postlink"> » Réglement </a><br>
<a href="http://lycee-akatsuki.forumactif.org/t2-contexte-du-forum" class="postlink"> » Contexte </a><br>
<a href="http://lycee-akatsuki.forumactif.org/t224-les-personnages-predefinis " class="postlink">»Prédéfinis</a><br>
<a href=" http://lycee-akatsuki.forumactif.org/f98-fiches-en-cours-non-validees " class="postlink"> » Présentations </a><br>
<a href="http://lycee-akatsuki.forumactif.org/f68-questions-suggestions-news " class="postlink"> » Questions ? </a><br>
<a href="http://lycee-akatsuki.forumactif.org/t42-important-a-lire-fiche-de-claus-la-fiche-se-developpera-grace-aux-membres " class="postlink"> » La fiche de Claus</a><br>
</span></td><td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"><u><i> « Bienvenue au Lycée ! Un peu... D'histoire...! » </i></u><div><font=Arial><justify>
<blockquote  style="height:200px"> <div style="overflow:auto;height:200px"> Il y a de cela plusieurs années, une femme eut l'idée de réunir tous les jeunes ''uniques'' en un seul même lieu afin de leur apprendre son savoir et de les mélangés aux humains, ces êtres parfois dépourvus d'ouverture d'esprit. Elle fit donc bâtir un Lycée, où petits et grands côtoyeraient de grands professeurs (ou pas), expert en la matière du surnaturel. La Fondatrice avait des contacts. Et elle fit appel à une organisation, connue autrefois comme étant des criminels extrêmement recherchés, j'ai dénommé: la seule et unique, Akatsuki. D'où le nom du Lycée.
 
On fit également construire un Internat, où les élèves et membres du personnel qui le désirait, pouvaient élir domicile, étant ainsi à proximité de leur environnement scolaire, social et professionnel.  </div></blockquote></font></justify></div>
 
</span></td>
 
<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody">
~ Il serait bien de clôturer l'event de Noël ;). Pour le suivre, c'est <a href="http://lycee-akatsuki.forumactif.org/t128-que-le-bal-commence " class="postlink">ici</a><br>
~ Le forum cherche de nouveaux membres !<br>
</span></td>
 
</tr><tr><th class="thTop forabg" colspan="1" rowspan="1">WANTED</th>
<th class="thTop forabg" colspan="1" rowspan="1"> STAFF
<br></th><th class="thTop forabg" colspan="1" rowspan="1"> PARTENARIAT
<br></th></tr>
 
<tr><td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"><div class="defil">
~Naruto Uzumaki !!! <a href="http://lycee-akatsuki.forumactif.org/t224-les-personnages-predefinis " class="postlink">ici</a><br>
~Sasuke Uchiwa !!! <a href="http://lycee-akatsuki.forumactif.org/t224-les-personnages-predefinis " class="postlink">ici</a><br>
</div>
</span></td>
 
<td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"> <div align="center"><table><tr>
<td><div class="infobulle"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t21.jpg" border="0" alt="" /><span>Contenu de la bulle 1</span></div></td>
<td><div class="infobulle"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t16.jpg" border="0" alt="" /><span>Contenu de la bulle 2</span></div></td>
<td><div class="infobulle"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t17.jpg" border="0" alt="" /><span>Contenu de la bulle 3</span></div></td>
<td><div class="infobulle"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t18.jpg" border="0" alt="" /><span>Contenu de la bulle 4</span></div></td>
<td><div class="infobulle"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t19.jpg" border="0" alt="" /><span>Contenu de la bulle 5</span></div></td>
<td><div class="infobulle"><img src="http://i47.servimg.com/u/f47/14/77/27/45/sans_t20.jpg" border="0" alt="" /><span>Contenu de la bulle 6</span></div></td>
</tr></table></td>
 
 
<td class="row3" colspan="1" rowspan="1" align="center"><blockquote  style="height:156px;"> <div style="overflow:auto;height:156px;"><span class="postbody"> 
<a href="http://vampire-knight-rpg.forumgratuit.ch/" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/vk10.png" border="0" alt="" /></a>
<a href="http://madiltan.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i47.servimg.com/u/f47/14/77/27/45/madilt10.jpg" border="0" alt="" /></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence" /></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence"></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence"></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence" /></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence" /></a>
<a class="info"><img src="http://i46.servimg.com/u/f46/16/36/96/05/sans_t16.jpg" class="transparence" /></a>
 
</div></blockquote>
 
<br><a href="http://lycee-akatsuki.forumactif.org/t268-fiche-de-partenariat#4855 " class="postlink">Devenir partenaire ?</a></br>
</span></td></tr></table>

Et ceci dans votre CSS:

Code:


.infobulle{position: relative;z-index: 0;}
.infobulle:hover{background-color: transparent;z-index: 50;}
.infobulle span{
position: absolute;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}
.infobulle:hover span{
visibility: visible;
top: 70px;/*placement par rapport au bord haut image*/
left: 35px;/*placement par rapport au bord gauche image*/
width: 150px ;/*largeur*/
background-color: #000000;/*couleur de fond de la bulle*/
color:#FFFFFF;/*couleur écriture*/
border: 1px outset #fff;/*apparence des contours*/
-moz-border-radius: 12px;
-webkit-border-radius: 12px;/*arrondis*/
border-radius: 12px;}

Cordialement.

[lyvie]

Oh my god, c'est parfait !!!!

Je sais vraiment pas comment vous remercier --' !!!

*s'incline ?*

Bonne continuation à vous, et bon courage, merci encore !!!