[RESOLU] Problème de correction automatique d'un code html.

[Gobniou]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis début Septembre
Lien du forum : http://e5gaming.forumclan.com/

Description du problème

Bonjour à toutes et à tous!

Je viens à vous car j'ai un petit soucis relatif à un code trouvé sur le site de Never Utopia. Ce code est censé permettre de mettre des images en titre de sous-catégories, ainsi que de mettre une description se montrant en hoover. Je l'ai déjà utilisé plus d'une fois sur mon site, et je n'avais jamais eu de problème. Mais voilà: en voulant créer une nouvelle section, j'ai fait comme d'hab et les images en question ne s'affichent plus.

Le code en question est du html, que l'on place directement dans les descriptions des images. Or, j'ai pu remarquer qu'à chaque fois que je collais mon code, au moment d'enregistrer, le code se déformer tout seul, certains éléments changeant de place.

Est-ce possible que ca vienne de là, et si oui, comment faire pour éviter cette correction automatique?

Merci beaucoup d'avance!

Je place ici les codes en questions:

Code initial et valable:

Code:

<br />
<div class="cate">
                                                   <a href="http://e5gaming.forumclan.com/t278-la-e5-pour-les-membres#3429" style="display:block;width:100%;height:100%;">    </a>
   <div style="display: block; width: 100%; height: 100%;" class="cate_img">
                                          <img src="http://i.imgur.com/XvmeGkI.png" "="" />                                   
   </div><a href="http://e5gaming.forumclan.com/t278-la-e5-pour-les-membres#3429" style="display:block;width:100%;height:100%;"></a>                         
   <div class="cate_description">
                                        <img src="http://i.imgur.com/xPBMlKt.jpg" />                                 
   </div>
</div>
<div style="clear: both;">
</div>

Code effectif après la modification automatique:

Code:

<br />
<div class="cate">
                                                   <a style="display:block;width:100%;height:100%;" href="http://e5gaming.forumclan.com/t278-la-e5-pour-les-membres#3429">    </a>
   <div class="cate_img" style="display: block; width: 100%; height: 100%;">
                                          <img "="" src="http://i.imgur.com/XvmeGkI.png" />                                   
   </div><a style="display:block;width:100%;height:100%;" href="http://e5gaming.forumclan.com/t278-la-e5-pour-les-membres#3429"></a>                         
   <div class="cate_description">
                                          <img src="http://i.imgur.com/xPBMlKt.jpg" />                                   
   </div>
</div>
<div style="clear: both;">
</div>

[Neptunia]

Bonjour, et bienvenue sur le Forum des Forums Forumactif

A quoi peuvent vous servir ?
- Les 55 espaces avant le <a de la ligne 3
- Les 5 espaces entre le lien href et la balise de fermeture </a> toujours en ligne 3
- Les 46 espaces avant l'image de la ligne 5
- Les 36 espaces après cette même image

et ainsi de suite.

Mettez donc tout votre code d'un seul tenant et vous verrez que l'éditeur se débrouillera bien mieux tout seul pour pondre du code valide et ordonné (indenté).

Code:

<br />
<div class="cate"><a href="http://e5gaming.forumclan.com/t278-la-e5-pour-les-membres#3429" style="display:block;width:100%;height:100%;"></a><div style="display: block; width: 100%; height: 100%;" class="cate_img"><img src="http://i.imgur.com/XvmeGkI.png" "="" /></div><a href="http://e5gaming.forumclan.com/t278-la-e5-pour-les-membres#3429" style="display:block;width:100%;height:100%;"></a><div class="cate_description"><img src="http://i.imgur.com/xPBMlKt.jpg" /></div></div><div style="clear: both;"></div>

[Gobniou]

Merci de votre réponse.
Je dois bien avouer qu'étant nouveau dans le domaine du codage, je me suis contenté de le recopier et d'essayer de le décortiquer pour le comprendre.

J'ai essayé votre code, qui n'a malheureusement pas fonctionné. Et la correction automatique a encore frappé, transformant votre code en:

Code:

<div class="cate">
   <a style="display:block;width:100%;height:100%;" href="http://e5gaming.forumclan.com/t278-la-e5-pour-les-membres#3429">
   </a>
   <div class="cate_img" style="display: block; width: 100%; height: 100%;">
      <img "="" src="http://i.imgur.com/XvmeGkI.png" />
   </div><a style="display:block;width:100%;height:100%;" href="http://e5gaming.forumclan.com/t278-la-e5-pour-les-membres#3429"></a>
   <div class="cate_description">
      <img src="http://i.imgur.com/xPBMlKt.jpg" />
   </div>
</div>
<div style="clear: both;">
</div>

Donc il a remis les espaces. ^^
Et le résultat concret est strictement le même: pas d'images. Je pense que cela vient de cette fonction de correction, mais je n'arrive pas à la désactiver ni même à trouver un quelconque réglage.

[Neptunia]

Ca ne vient certainement pas de la fonction de correction du code vu que votre code initial une fois validé et transformé ainsi que mon code validé et transformé fonctionnent tous deux et m'affichent bien les 3 images.

- Soit vous n'insérez pas votre code au bon endroit.
- Soit ça vient du CSS que vous avez omis de fournir.
- Soit vous avez modifié votre template index_box qui ne prend plus en compte les descriptions. (dernier point facile à vérifier en forçant les templates par défaut)

[Gobniou]

Ce qui me semble bizarre, c'est que et l'endroit du code et le css fonctionnent pour toutes les anciennes bannières, et marchent encore aujourd'hui. De fait, il semble bizarre que ca marche pour l'un et pas pour l'autre.

Je joint le css ici, que j'avais en effet oublié ^^:

Code:

/* CODES CSS CATEGORIES AUX DESCRIPTIONS CACHEES */


.cate
{
  width: 400px;
  height: 120px;
  overflow: hidden;
  border: 2px solid #000000;
  background-color: #ffffff;
}
.cate_img
{
  position: relative;
  z-index: 2;
  width: 400px;
  height: 120px;
  margin-left: 0px;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate:hover .cate_img
{
margin-left: 400px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate_description
{
  position: relative;
  z-index: 1;
  width: 400px;
  height: 120px;
  margin-top: -120px;
  text-align: justify;
  font-size: 11px;
  color: #8c8c8c;
  padding: 2px;
  overflow: auto;
}

EDIT: j'ai simplement changé la taille des images dans le css, mais là encore cela est valable pour toutes les bannières.

[Scoubifitz]

Bonjour ,

La fonction de correction dont vous parlez permet d'éviter les erreurs d'imbrication d'éléments de type block et inline .

inline dans inline = ok
inline dans block = ok
block dans block = ok
block dans inline = pas ok

le code corrigé :

Code:

<br />
<div class="cate">
  <a href="http://e5gaming.forumclan.com/t278-la-e5-pour-les-membres#3429" style="display:block;" class="cate_img">
    <img src="http://i.imgur.com/XvmeGkI.png" />
  </a>
  <div class="cate_description">
    <img src="http://i.imgur.com/xPBMlKt.jpg" />
  </div>
</div>
<div style="clear: both;">
</div>

div est de type block
a est de type inline , mais de style block (le correcteur ne tient pas compte du style pour la correction)
img est de type inline .

[Gobniou]

Merci beaucoup Scoubifitz, je confirme que cela fonctionne de nouveau.
Je met le problème en résolu, et vous remercie tous les deux pour votre aide!

[Chacha]

Bienvenue sur le forum de support de Forumactif Bonjour, Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.