Probléme de page d'accueil

[webmaster36]

Rappel du premier message :

Bonjour à tous,

L'URL de mon forum est: http://petanque36.forumactif.com/
Navigateur IE10. sur mon autre PC IE8

Le problème est le même.

J'ai du texte d'affiché sur la page d'accueil, quand je veux le modifier, j'arrive bien à effacer et remettre du texte, mais quand je valide sur enregistrer ce que je viens d'écrire n'est pas enregistré, et ce que j'ai effacé revient.

La même chose se produit dans les annonces, impossible de changer et d'enregistrer le nouveau texte.

Merci d'avance à ceux qui pourraient me dire ce qui pose problème, ou à une personne du staff si elle peut vérifier sur mon forum et régler mon problème.
Bonne journée à tous.

[Zanzan]

c'est avec les <span></span> le probléme ! j'ai fait une tentative et ça a l'air de marcher mais ça reste un beau bordel niveau codage


mon css dans ma pa (partie infobulle of course ):

Code:

<center>
 <div style="width:300px;">
 <a class="imginfo"><img src="http://img-cache.cdn.gaiaonline.com/cf41be415ea36e13bb2d1e5d6e4c579c/http://illiweb.com/fa/pbucket.gif" style="width: 50px; height: 50px;" /><span></span></a>
 <center style="">
 <br /><strong>Regina MIlls</strong><br />feat <em>Lana Parilla</em>
 </center><a class="imginfo"><span></span></a><a class="imginfo"><span></span></a><a class="imginfo"><img src="http://25.media.tumblr.com/c6795814e7089b5e55142b279fb47dd4/tumblr_mvi4s1orVD1qm7xlio6_250.gif" style="width: 50px; height: 50px;" /><span></span></a>
 <center style="">
 <br /><strong>Peter Pan</strong><br />feat <em>Robbie Kay</em>
 </center><a class="imginfo"><span></span></a><a class="imginfo"><img src="http://media.melty.fr/article-1891652-square-f1384195442/once-upon-a-time-saison-3-episode-7-dark.jpg" style="width: 50px; height: 50px;" /><span></span></a>
 <center style="">
 <br /><strong>Belle French</strong><br />feat <em>Emilie de Ravin</em>
 </center><a class="imginfo"><span></span></a><a class="imginfo"><img src="http://ek.merkez-masa.com/a/lj/icons/onceupon01/onceupon-13-awakencordy.jpg" style="width: 50px; height: 50px;" /><span></span></a>
 <center style="">
 <br /><strong>David Nolan</strong><br />feat <em>Josh Dallas</em>
 </center><a class="imginfo"><span></span></a><br /><a class="imginfo"><img src="http://infos-tele.fr/photos/Once-Upon-a-Time-1x20-100x100.jpg" style="width: 50px; height: 50px;" /><span></span></a>
 <center style="">
 <br /><strong>Mr Gold</strong><br />feat <em>Robert Carllyle</em>
 </center><a class="imginfo"><span></span></a><a class="imginfo"><img src="http://wpc.556e.edgecastcdn.net/80556E/img.news.tops/NEAgPW9lv2eWDI_1_zzb.jpg" style="width: 50px; height: 50px;" /><span></span></a>
 <center style="">
 <br /><strong>Mulan</strong><br />feat <em>Jamie Chung</em>
 </center><a class="imginfo"><span></span></a><a class="imginfo"><img src="http://www.hollow-art.com/files/bases/2013/10/20131001/15577/Jared%20Gilmore%20in%20Once%20upon%20a%20time-1995815.png" style="width: 50px; height: 50px;" /><span></span></a>
 <center style="">
 <br /><strong>Henry Mills</strong><br />feat <em>Jared Gilmore</em>
 </center><a class="imginfo"><span></span></a><a class="imginfo"><img src="http://reviewer.lavoixdunord.fr/lib/contents/80858/thumb.jpg" style="width: 50px; height: 50px;" /><span></span></a>
 <center style="">
 <br /><strong>Wendy Darling</strong><br />feat <em>Freya Tingley</em>
 </center><a class="imginfo"><span></span></a></div><br />
 </center>

[Lixyr]

Ca c'est la partie HTML. Et la partie css qui permet de faire fonctionner les infobulles ?
(panneau >> affichage >> couleurs >> feuille de style css)

[Zanzan]

oh je les confonds toujours mais ça peut pas être être doc le css mais dans le html j'ai fait le test justement dans la pa même ! j'ai mis les <span></span> à la fin et ça s'était remis normalement pour le premier infobulle !

[Lixyr]

Oui mais si je n'ai pas votre css je ne peux pas vérifier chez moi si ça fonctionne. ^^"

[Zanzan]

ah ok

Code:

a.imginfo {  /* INFOBULLES */
  position: relative;
  color: #000000; /* couleur de votre texte */
  text-decoration: none;
  border-bottom: 0px #000000 solid; /* on souligne le texte */
}

a.imginfo span {
  display: none; /* on masque l'infobulle */
}
a.imginfo:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}

a.imginfo: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: 10px; /* on positionne notre infobulle */
  left: 20px;
  background: #5493B4;
  color: #000000;
  padding: 3px;
  border: 0px solid #colour;

}

[Lixyr]

Yop, c'est réglé. Juste une chose : les images de chaque personnage étaient l'une sous l'autre ?

[Zanzan]

il y a deux rangées de trois en fait

[Lixyr]

Deux rangées de trois ? Ça fait 6. Je compte 8 images.

[Zanzan]

ah oui juste ! --' je sais plus compter ! deux rangées de quatre alors --'

[Lixyr]

Donc deux rangées de 4. Elles sont verticales ou horizontales ?

[Zanzan]

horizontales ^^

[Lixyr]

Après une légère correction (on utilise pas de balise hyperlien pour juste mettre un contenu, ce n'est pas fait pour ça) :
• remplacement de la balise de lien <a> par une balise <span>
• déplacement du contenu dans les span infobulle
• suppression du css inutile dans le html, déplacé dans la feuille de style css (image, div et center)
le code est "propre".

HTML :

Code:

<div class="PA_zanzan"><span class="imginfo"><img src="http://img-cache.cdn.gaiaonline.com/cf41be415ea36e13bb2d1e5d6e4c579c/http://illiweb.com/fa/pbucket.gif" /><span><strong>Regina MIlls</strong><br />feat <em>Lana Parilla</em></span></span><span class="imginfo"><img src="http://25.media.tumblr.com/c6795814e7089b5e55142b279fb47dd4/tumblr_mvi4s1orVD1qm7xlio6_250.gif" /><span><strong>Peter Pan</strong><br />feat <em>Robbie Kay</em></span></span><span class="imginfo"><img src="http://media.melty.fr/article-1891652-square-f1384195442/once-upon-a-time-saison-3-episode-7-dark.jpg" /><span><strong>Belle French</strong><br />feat <em>Emilie de Ravin</em></span></span><span class="imginfo"><img src="http://ek.merkez-masa.com/a/lj/icons/onceupon01/onceupon-13-awakencordy.jpg" /><span><strong>David Nolan</strong><br />feat <em>Josh Dallas</em></span></span><br /><span class="imginfo"><img src="http://infos-tele.fr/photos/Once-Upon-a-Time-1x20-100x100.jpg" /><span><strong>Mr Gold</strong><br />feat <em>Robert Carllyle</em></span></span><span class="imginfo"><img src="http://wpc.556e.edgecastcdn.net/80556E/img.news.tops/NEAgPW9lv2eWDI_1_zzb.jpg" /><span><strong>Mulan</strong><br />feat <em>Jamie Chung</em></span></span><span class="imginfo"><img src="http://www.hollow-art.com/files/bases/2013/10/20131001/15577/Jared%20Gilmore%20in%20Once%20upon%20a%20time-1995815.png" /><span><strong>Henry Mills</strong><br />feat <em>Jared Gilmore</em></span></span><span class="imginfo"><img src="http://reviewer.lavoixdunord.fr/lib/contents/80858/thumb.jpg" /><span><strong>Wendy Darling</strong><br />feat <em>Freya Tingley</em></span></span>
</div>

CSS :

Code:


.PA_zanzan {
  width:300px; /*largeur de 300px*/
  text-align:center; /* contenu centré*/
  margin:0 auto; /*div centrée horizontalement*/
}

span.imginfo img {width: 50px; height: 50px;}

        span.imginfo {  /* INFOBULLES */

          position: relative;
          color: #000000; /* couleur de votre texte */
          text-decoration: none;
          border-bottom: 0px #000000 solid; /* on souligne le texte */
        }
       
        span.imginfo span {
          display: none; /* on masque l'infobulle */
        }
        span.imginfo:hover {
          background: none; /* correction d'un bug IE */
          z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
          cursor: help; /* on change le curseur par défaut en curseur d'aide */
        }
       
        span.imginfo: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: 10px; /* on positionne notre infobulle */
          left: 20px;
          background: #5493B4;
          color: #000000;
          padding: 3px;
          border: 0px solid #colour;
       
        }

Faites attention quand vous codez la prochaine fois, car de ce que j'ai vu, l'éditeur a déplacé le contenu hors des balises span, ce qui signifie qu'elles ne devaient pas être correctement fermées à la base.

[Zanzan]

merci ^^

[Lixyr]

Je t'en prie.
Tu devrais mettre ce code sur tes deux autres forums si tu as le même, parce qu'il risque d'y avoir des bugs là-bas aussi, si c'est mal codé.

[Zanzan]

euh ben maintenant j'ai un nouveau problème avec mes infos bulles je sais plus mettre d'images dans l'info-bulle

votre truc il fait vraiment .... grrrrr !!!!!!!!

j'ai déjà du mal pour comprendre les templates et là ... Vous pouvez pas remettre comme c'était avant ? Comme disait quelqu'un plus haut c'est vraiment un manque de respect pour le travail qu'on fait sur nos forums ! je sais que je passe pour râleuse mais on met du temps pour peaufiner une belle pa pour attirer des membres et avec votre truc ça les fait plus fuir que leur donner envie de s'inscrire ! Bravo ! le premier probléme est résolu mais ça me crée un second !

[Lixyr]

^^
Vous verriez mieux si vous aviez mis des balises de type bloc, l'indentation se serait faite, mais ce n'est pas le cas, donc moui, vous avez un gros bloc de code, il suffit de comprendre comment ça se passe :

Tout le code est compris dans la div "PA_zanzan" (ce que je vous ai rajouté)
Dedans vous avez :
- un span "imginfo" : c'est dedans que ce trouve chaque image avec son infobulle.
dans le span :
- la balise image
- après celle-ci une nouvelle balise span, qui est l'infobulle.
- quand vous avez deux span de fermeture (</span></span>) c'est que vous êtes à la fin de la première infobulle.
Donc vous retrouvez juste après une nouvelle span "imginfo", avec son image et son infobulle.

Code:

<span class="imginfo"><img src="LIEN_IMAGE" /><span>CONTENU INFOBULLE</span></span>

Vous mettez ça où vous voulez, après un </span></span>, pour être bien sûr que ce soit mis à la bonne place.

[Zanzan]

je laisse tomber ! je commençais à comprendre mais là avec voter MAJ de M**** je pige plus rien ! c'était plus facile ! je pouvais créer des pa comme je l'imaginais mais là ce n'est plus possible ! de plus je ne suis pas une pro du css et du html comme vous ! quand on comprend pas on comprend pas ! merci pour l'aide mais là non ! ce n'est pas possible ! encore bravo pour maj ! ça arrange certains mais apparemment ceux qui ont des problèmes ils doivent se démerder tout seul et piger comme des pros qu'ils ne sont pas !

[Lixyr]

Mais tu peux aussi me dire ce que tu veux rajouter, où tu veux le rajouter, si ce n'est pas le même code, me donner le nouveau, que je le fasse. Je suis disposée à aider, à expliquer, comme je viens de le faire.

Le nouvel éditeur permet d'avoir un codage beaucoup plus propre, mais en soit, il ne change pas grand chose, les codes sont les mêmes, on les met dans l'éditeur et on enregistre. Si on enregistre, ça s'envoie tout seul et s'affiche, si c'est mal codé, l'éditeur essaie de réparer, si c'est très mal codé, il ne sait pas où réparer et met des balises où il peut, et c'est peut-être mieux ainsi parce que, quand on y pense, par exemple, les aveugles, qui ont besoin d'une hiérarchie vraiment impeccable, d'une syntaxe correcte, pour pouvoir appréhender correctement un site web, le lire, et le comprendre, ne le peut pas, avec vos codes foireux qui s'affichent quand même et ne respectent pas les normes, donc là au moins, on arrive avec quelque chose de propre, et tout le monde, personne normale comme handicapée, peut naviguer.

Après oui, coder demande du temps. S'occuper d'un forum ça demande du temps. Coder un forum c'est s'impliquer, pas venir pêcher des codes tout faits, et les poster sur son forum, pour ensuite râler parce que ça ne fonctionne pas, et rendre tout le monde responsable.

Donc... soit tu continues de râler, et tu restes sur tes acquis, soit tu y mets du tien, tu me dis ce que tu veux, tu me donnes les outils pour t'aider, et je t'aide (et en plus de ça, tu iras te coucher moins bête ce soir).

[dddddddddddd]

Bonjour, depuis la mise à jour, j'ai aussi ce problème, ce n'est pas un massacre mais un problème avec les infobulles de la PA, lien :

http://forum-manga-connu.forumsgratuits.com/forum

Pourrez-vous m'aider ? =)
Bonne journée.

[Zanzan]

ok ok ok

ce que je voulais faire mettre pour la partie staff ajouter une image gif dans les infobulles

exemple:

mais avec ta version ça rebugue

[Lixyr]

@dddddddddddd :
Les infobulles fonctionnent mais les images ne sont pas bien placées, c'est ça ? Tout est dans le bloc "staff" ?

@Zanzan : C'est le même code, donc ? mon forum de test. Je l'ai fait pour l'infobulle de Peter Pan. C'est bien ça que tu veux ?

[Zanzan]

oui c'est ça que je voudrais pour la partie staff mais un autre problème se posait c'était la taille de l'image, aussi bien pour la premiére (ou l'on place la souris dessus) que la seconde (dans l'infobulle) vu que t'as mis dans le (que je me trompe pas) css une taille pour les images des pv. ça ne serait pas la même pour chaque image en fait et c'est ça qui foire.

[dddddddddddd]

@Lixyr : Oui, c'est exactement cela. =)

[Lixyr]

@Zanzan

Oui, c'est bien dans le css.
Ah, c'est tout.
Et bien, tu as deux solutions, mais pour que ce soit plus simple, je te conseille de mettre ce code, dans ton css :

Code:

span.imginfo span img {width:auto;height:auto;}

Ça ne prend effet que sur les images qui sont dans les infobulles.
"auto", ça permet de garder la taille de l'image initiale. Si vous voulez que toutes les images dans l'infobulle ait une taille spécifique, vous changez auto par une valeur, sinon vous pouvez laisser comme ça.


@ddddddd... :
Tu peux me donner ton code (html + css) si tu veux que je regarde.

[dddddddddddd]

Les codes sont reliés directement :

Code:

<style type="text/css">
.titrepacuueil{
  font-family: 'Playfair Display SC', serif;
  font-size: 20px!important;
  color: #232c22;
  text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
  text-align: center;
}

.blocstaff{
background-color: #6AA8A6;
border-right: 1px solid #232C22;
border-left: 1px solid #232C22;
border-bottom: 4px solid #232C22;
border-top: 4px solid #232C22;
height: 200px;
width: 175px;
}

.credit{
background-color: #6AA8A6;
border-right: 1px solid #232C22;
border-left: 1px solid #232C22;
border-bottom: 4px solid #232C22;
border-top: 4px solid #232C22;
height: 195px;
width: 100px;
overflow: auto;
padding: 3px;
color: #232C22;
}

.newsbloc{
background-color: #6AA8A6;
border-right: 1px solid #232C22;
border-left: 1px solid #232C22;
border-bottom: 4px solid #232C22;
border-top: 4px solid #232C22;
height: 150px;
width: 300px;
overflow: auto;
padding: 3px;
color: #232C22;
margin-top: -10px;
}

.contextebloc{
background-color: #6AA8A6;
border-right: 1px solid #232C22;
border-left: 1px solid #232C22;
border-bottom: 4px solid #232C22;
border-top: 4px solid #232C22;
height: 150px;
width: 485px;
overflow: auto;
padding: 3px;
color: #232C22;
margin-top: -10px;
}

.partenairesbloc{
background-color: #6AA8A6;
border-right: 1px solid #232C22;
border-left: 1px solid #232C22;
border-bottom: 4px solid #232C22;
border-top: 4px solid #232C22;
height: 100px;
width: 485px;
overflow: auto;
padding: 3px;
color: #232C22;
}

.topsitesbloc{
background-color: #6AA8A6;
border-right: 1px solid #232C22;
border-left: 1px solid #232C22;
border-bottom: 4px solid #232C22;
border-top: 4px solid #232C22;
height: 100px;
width: 300px;
overflow: auto;
padding: 3px;
color: #232C22;
text-align: center;
}

/* RUBAN */
.ribbon {
  padding: 1px;
  height: 33px;
  width: 700px;
  position: relative;
  text-align: center;
  font-size: 20px!important;
  background: #6aa8a6;
  font-family: 'Playfair Display SC', serif;
  font-size: 20px!important;
  color: #232c22;
  text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
  }

.ribbon-stitches-top {
  margin-top:2px;
  border-top: 1px dashed #232C22;
  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
  }

.ribbon-stitches-bottom {
  margin-bottom:20px;
  border-top: 1px dashed #232C22;
  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
  }
/* FIN RUBAN */

/* INFOBULLES STAFF */
.postinfobullepredef{
border-top: 10px solid #CAB78F;
width: 200px;
margin-top: -10px;
}

.posteinfoecripredef{
color: #925479;
text-shadow: #DBDFD2;
font-size: 24px;
text-align: center;
margin-top: -25px;
font-family: 'Playfair Display SC', serif;
text-align: center;
}

.infobullepredef{
position: relative;
z-index: 0;
}
 
.infobullepredef:hover{
background-color: transparent;
z-index: 50;
}
 
.infobullepredef span{
position: absolute;
background: #DFD5B4;
left: -1000px;
visibility: hidden;
color: #925479;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
 
.infobullepredef:hover span{
visibility: visible;
top: 0px;
left: 0px;
width: 200px;
height: 75px;
text-align: center;
color:#925479;
}
/* FIN INFOBULLES STAFF */

.imgtop {
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
transition-duration:1s;
transition-timing-function:linear;
-webkit-border-radius: 126px;
-moz-border-radius: 126px;
border-radius: 126px;
margin-left:5px;
margin-top: 3px;
}

.imgtop:hover {
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-border-radius: 126px;
-moz-border-radius: 126px;
border-radius: 126px;
margin-left:5px;
margin-top: 3px;
}
        </style><link href="http://fonts.googleapis.com/css?family=Playfair+Display+SC" rel="stylesheet" type="text/css" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>PA (c) Sunhae</title><script type="text/javascript"></script>
<center>
   <div class="ribbon">
      <div class="ribbon-stitches-top">
      </div><a href="http://forum-manga-connu.forumsgratuits.com/f3-reglement-du-forum" class="postlink" target="_blank" rel="nofollow">◌ Règlement</a><a href="http://forum-manga-connu.forumsgratuits.com/f1-actualite-du-forum" class="postlink" target="_blank" rel="nofollow">◌ Actualités</a><a href="http://forum-manga-connu.forumsgratuits.com/f4-presentation" class="postlink" target="_blank" rel="nofollow">◌ Présentations</a><a href="http://forum-manga-connu.forumsgratuits.com/f5-propositions-et-problemes" class="postlink" target="_blank" rel="nofollow">◌ Suggestions</a>
      <div class="ribbon-stitches-bottom">
      </div>
   </div><br />
   <table cellspacing="10">
      <tbody>
         <tr>
            <td>
               <div class="blocstaff">
                  <div class="titrepacuueil">
                      Staff
                  </div>
                  <center><a href="http://forum-manga-connu.forumsgratuits.com/t1629-le-staff-du-forum" class="tstaff">Tout le staff ?</a>
                     <center>
                        <table cellspacing="5" cellspadding="5">
                           <tbody>
                              <tr>
                                 <td>
                                    <div class="infobullepredef"><img src="http://zupimages.net/up/3/987954338.png" /><br /><span><br /></span>
                                       <div class="postinfobullepredef" style="">
                                          <div class="posteinfoecripredef">
                                              Kirito
                                          </div>
                                       </div><span><br />« citation » <a href="http://forum-manga-connu.forumsgratuits.com/u1">Profil</a></span>
                                    </div>
                                 </td>
                                 <td>
                                    <div class="infobullepredef"><img src="http://zupimages.net/up/3/29481150.png" /><br /><span><br /></span>
                                       <div class="postinfobullepredef" style="">
                                          <div class="posteinfoecripredef">
                                              Ishimaru
                                          </div>
                                       </div><span><br />« citation » <br /><br /><a href="http://forum-manga-connu.forumsgratuits.com/u2">Profil</a></span>
                                    </div>
                                 </td>
                              </tr>
                              <tr>
                                 <td>
                                    <div class="infobullepredef"><img src="http://zupimages.net/up/3/1228534234.png" /><br /><span><br /></span>
                                       <div class="postinfobullepredef" style="">
                                          <div class="posteinfoecripredef">
                                              Luffa
                                          </div>
                                       </div><span><br />« citation » <br /><br /><a href="http://forum-manga-connu.forumsgratuits.com/u76">Profil</a></span>
                                    </div>
                                 </td>
                                 <td>
                                    <div class="infobullepredef"><img src="http://zupimages.net/up/13/49/crmm.png" /><br /><span><br /></span>
                                       <div class="postinfobullepredef" style="">
                                          <div class="posteinfoecripredef">
                                              Asha
                                          </div>
                                       </div><span><br />« citation » <br /><br /><a href="http://forum-manga-connu.forumsgratuits.com/u18">Profil</a></span>
                                    </div>
                                 </td>
                              </tr>
                           </tbody>
                        </table>
                     </center>
                  </center>
               </div>
            </td>
            <td>
               <img src="http://img11.hostingpics.net/pics/744464Adekan.png" style="border-right: 1px solid #232C22; border-left: 1px solid #232C22; border-bottom: 4px solid #232C22; border-top: 4px solid #232C22;" />
            </td>
            <td>
               <div class="credit">
                  <div class="titrepacuueil">
                      Crédits
                  </div>
                   Page d'Accueil (c) <a href="">Sunhae</a>
               </div>
            </td>
         </tr>
      </tbody>
   </table>
   <table cellspacing="10">
      <tbody>
         <tr>
            <td>
               <div class="newsbloc">
                  <div class="titrepacuueil">
                      Nouveautés
                  </div><br />◌ 08/12/13: Mise en place de la Page D'accueil.<br />◌ 07/12/13: Asha devient administratrice du forum, faites lui bonne accueil !<br />◌ 07/12/13: Mise à jour du règlement à lire impérativement !<br />◌ 01/11/13: Le nouveau thème du forum est mis en place.
               </div>
            </td>
            <td>
               <div class="contextebloc">
                  <div class="titrepacuueil">
                      Contexte
                  </div><br />Bienvenue sur Manga no Sekai, le forum 100% manga et culture japonaise. Avec plus de 100 mangas traités, des débats, des concours, des animations ayant pour thème les Mangas. Manga no Sekai, c'est un staff compétent et ouvert, une communauté sympathique et un lieu d'échange et où l'on partage une seule passion commune : Les mangas.
               </div>
            </td>
         </tr>
         <tr>
            <td>
               <div class="topsitesbloc">
                  <div class="titrepacuueil">
                      Top Sites
                  </div><a href="http://www.root-top.com/topsite/lumina/in.php?ID=538"><img src="http://image.noelshack.com/fichiers/2013/26/1372165770-2.png" /></a><img src="http://image.noelshack.com/fichiers/2013/26/1372165770-2.png" class="imgtop" /><img src="http://image.noelshack.com/fichiers/2013/26/1372165770-3.png" class="imgtop" /><img src="http://image.noelshack.com/fichiers/2013/26/1372165771-4.png" class="imgtop" />
               </div>
            </td>
            <td>
               <div class="partenairesbloc">
                  <div class="titrepacuueil">
                      Partenaires
                  </div><br /><marquee onmouseout="this.start();" onmouseover="this.stop();" direction="right"><img <a="" href="http://drachenfansub.forumsgratuits.fr/" class="postlink" title="DrachenFansub" /><img src="http://i46.servimg.com/u/f46/14/26/49/98/bannia12.jpg" alt="" border="0" /><a href="http://www.bojoujou.com" target="_blank" alt="Bojoujou" title="Boutique en ligne Bojoujou"><img src="http://bojoujou.com/contents/media/bojoujou_banniere.jpg" /></a><a href="http://inazumaeleven.forumactif.pro/?tid=a5405e5ee39dd9b04a73e36b52bca58f" class="postlink"><img src="http://zupimages.net/up/2/321969274.jpg" alt="" border="0" /></a><a href="http://le-fofo-one-piece.forum-pro.fr/" class="postlink" target="_blank" rel="nofollow"><img src="http://www.pixenli.com/images/1352/1352738952032377800.png" alt="" border="0" /></a><a href="http://www.inazumagreat-forum.com/" target="_blank"><img src="http://zupimages.net/up/3/77127260.png" /></a><a href="http://fiorenooukoku.forumactif.com"><img src="http://i41.servimg.com/u/f41/11/71/23/53/parten11.gif" /></a><a href="http://www.pokemon.first-forum.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://img11.hostingpics.net/pics/822009Boutoncopy.jpg" border="0" alt="" /></a></marquee>
               </div>
            </td>
         </tr>
      </tbody>
   </table>
</center>

Et merci beaucoup de prendre le temps de m'aider.
Bonne journée.

[Zanzan]

mais on ne sait plus changer la taille de l'image où on met la souris dessus pour faire apparaître l'infobulle (je voudrais en fait une taille différente pour les images des pv et une autre taille pour l'image du staff pour bien faire la différence si tu vois ce que je veux dire)

[Lixyr]

Aaaah. On va prendre la solution deux alors.

Suis exactement ce que je te dis :
Retire le code que je viens de te donner, il ne va servir à rien.

Pour les images du staff (enfin, les personnages de OUAT)
dans le html, tu cherches les images correspondantes :
Par exemple <img src="http://img-cache.cdn.gaiaonline.com/cf41be415ea36e13bb2d1e5d6e4c579c/https://2img.net/h/i317.photobucket.com/albums/mm372/Johanna_the_Beautiful/Evil-Queen-the-evil-queen-regina-mills-27132178-100-100.png" /> pour Regina.
A la fin de chaque image tu rajoutes une classe :

<img src="http://img-cache.cdn.gaiaonline.com/cf41be415ea36e13bb2d1e5d6e4c579c/https://2img.net/h/i317.photobucket.com/albums/mm372/Johanna_the_Beautiful/Evil-Queen-the-evil-queen-regina-mills-27132178-100-100.png" class="Staff_OUAT" />

Tu fais ça pour chaque image que tu veux en taille 50x50.

Ensuite, dans le CSS, à la place de

span.imginfo img {width: 50px; height: 50px;}

tu mets

Code:

span.imginfo img.Staff_OUAT {width: 50px; height: 50px;}

L'image est raccrochée à la classe Staff_OUAT, donc la taille 50x50 ne prendra effet que sur les images servant aux infobulles, ayant la classe Staff_OUAT.

Ensuite, pour les autres images, d'un autre Staff, vous faites pareil, vous rajoutez une classe dans les images, mais une autre classe. N'importe laquelle, ça n'a pas d'importance, et dans le CSS, vous rajoutez le même code, mais à la place de Staff_OUAT, vous mettez la classe choisie.

span.imginfo img.AUTRE_CLASSE {width: 50px; height: 50px;}

Ça c'est valable pour les images qui servent à afficher les infobulles. Si vous voulez aussi imposer une taille aux images qui sont dans l'infobulle, mais pas toutes les mêmes, il faudra faire pareil.

Donc, par exemple,

- si vous voulez que les images du staff OUAT (Régina, Peter Pan, Mulan tout ça) aient une taille de 50x50, vous mettez le code que j'ai donné au dessus.

Code:

span.imginfo img.Staff_OUAT {width: 50px; height: 50px;}

- si vous voulez que les images d'un autre STAFF soit de taille 80x80, vous rajoutez la classe Staff_Deux aux images correspondant dans le html, et dans le CSS vous rajoutez :

Code:

span.imginfo img.Staff_Deux {width: 80px; height: 80px;}

[Zanzan]

ça marche ^^ merci et désolée de m'être énervée (c'est hélas l'un de mes plus grands défauts --' )

[Lixyr]

@dddddddddd...

Est-ce que les titres "Kirito" sont placés à la bonne place ? Il n'y a que les images du staff qui ne sont pas bien placées dans le bloc ?

@Zanzan :
Hey oui, après c'est certain que j'ai un peu bousculé vos façons, mais au moins, vous avez appris quelque chose, et vous saurez surement le refaire toute seule la prochaine fois. Il faut éviter de mettre du css dans les balises html quand on peut le peu, d'une ça prend moins de place, de deux, ce n'est pas recommandé.

[Zanzan]

ah ben au moins j'irai dormir moins bête ce soir comme tu l'as dit plus haut ^^ j'ai appris un nouveau truc merci