Problème avec le code de mise en page des catégories et forums (phpBB3)

[SweetGumiho]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://sorceleur.jdrforum.com/

Description du problème

Bonjour,

Nous avions un temps un codeuse qui nous a aidé sur le forum. Malheureusement, beaucoup de ses codes étaient bugués, et c'est le cas du code pour les catégories et forums.

En fait elle nous a donné ceci à mettre dans la description des forums :

Code:

<table><tbody><tr>
<td><img class="gifscateg" src="http://i.imgur.com/Nkan9qf.gif" /></td>

<td><div class="descricateg" align="justify><strong><em>— Le commencement —</em></strong> Asseyez-vous confortablement dans un fauteuil et prenez le temps de consulter ces précieux livres et parchemins mis à votre disposition. De nombreux ouvrages se trouvent dans les rayonnages de cette bibliothèque, et certains sont encore couverts par une épaisse couche de poussière qui s'est déposée au fil du temps. Mais une chose est sûre, c’est ici et nulle part ailleurs que se trouve l’essentiel pour comprendre l'Histoire, la géographie et les divers éléments de ce monde ainsi les lois qui le régissent... Vous y trouverez les quelques notions de base au bon déroulement de votre séjour parmi nous ainsi que toutes les précisions importantes sur le fonctionnement du forum, les registres et les différentes intrigues passées et en cours. Bien entendu, il est nécessaire de lire ses informations pour suivre l'aventure sans problème. Si vous êtes perdus, n’hésitez pas à aller consulter le guide de l’aventurier.
</div></td></tr></tbody></table>

Je ne sais même pas à quels templates elle a touché, mais quand on valide cette description pour les autres forums, cela efface tout le texte contenu dans le div et nous donne quelque chose comme ça :

Code:

<table>
  <tbody>
      <tr>
        <td>
            <img src="http://i.imgur.com/Nkan9qf.gif" class="gifscateg" />
        </td>
         
        <td>
        </td>
      </tr>
  </tbody>
</table>

Voici ce que je lui avais donné à la base comme schéma : https://i.imgur.com/ltCCaQs.png et voici l'image de fond transitoire : https://i.imgur.com/fWz6sLQ.png .

Bref, pas cool quoi puisque du coup ça ne marche pas et que l'on ne peut pas terminer notre codage de PA. En plus de ça bien sûr elle a disparu dans la nature, nous laissant avec ce problème entre les mains.

Merci d'avance de nous aider à sortir de ce mauvais pas. :/

Bonne journée !

[MlleAlys]

rebonjour ^^,
Il manque juste un guillemet à la fin de align="justify
ce qui donne :

Code:

<table><tbody><tr>
<td><img class="gifscateg" src="http://i.imgur.com/Nkan9qf.gif" /></td>
 
<td><div class="descricateg" align="justify"><strong><em>— Le commencement —</em></strong> Asseyez-vous confortablement dans un fauteuil et prenez le temps de consulter ces précieux livres et parchemins mis à votre disposition. De nombreux ouvrages se trouvent dans les rayonnages de cette bibliothèque, et certains sont encore couverts par une épaisse couche de poussière qui s'est déposée au fil du temps. Mais une chose est sûre, c’est ici et nulle part ailleurs que se trouve l’essentiel pour comprendre l'Histoire, la géographie et les divers éléments de ce monde ainsi les lois qui le régissent... Vous y trouverez les quelques notions de base au bon déroulement de votre séjour parmi nous ainsi que toutes les précisions importantes sur le fonctionnement du forum, les registres et les différentes intrigues passées et en cours. Bien entendu, il est nécessaire de lire ses informations pour suivre l'aventure sans problème. Si vous êtes perdus, n’hésitez pas à aller consulter le guide de l’aventurier.
</div></td></tr></tbody></table>

[SweetGumiho]

Ah, super ! J'ai presque honte du coup de ne pas avoir remarqué cela, c'était tout bête en fait. ^^;

Sinon mon problème maintenant avec son code c'est qu'elle l'a fait en modifiant la largeur du forum, ce que je ne souhaitais pas car cela décalait un tas de choses. Du coup je l'ai remis à sa taille normale (950 px) mais du coup la partie de "Dernier Message" est décalée et n'est plus centrée dans l'image. D'ailleurs celle-ci n'est pas dans la police que je souhaite (j'aimerais Alegreya SC pour que cela fasse comme sur le schéma, or là c'est Times New Roman) et sans doute pas assez petite pour laisser la place à l'icône de statut du sujet en haut du cadre (150x50 px) qui a d'ailleurs été paramétré trop petit.

Merci encore pour votre aide ! ♥

[MlleAlys]

Dans le template index_box, essayez de trouver une balise <table> juste après le commentaire <!--Description catégorie--> et une div de 900px de large.
Fixez la largeur de cette table à 100% :
<table width="100%">

Puis retrouvez plus bas la cellule contenant les derniers messages qui a une largeur fixée à 15% :
<td width="15%" align="center" valign="middle">
Montez la largeur à 27% :
<td width="27%" align="center" valign="middle">

Pour modifier la police, retrouvez ce passage dans votre css :

Code:

.categderniersmessages {
  font-family: 'time news roman';
  font-size: 14px;
  font-variant: small-caps;
  height: 150px;
  left: -25px;
  letter-spacing: -1px;
  margin-top: -10px;
  position: relative;
  width: 170px;
}

et modifiez font-family: 'time news roman'; par font-family: 'Alegreya SC';

Pour l'icone des nouveaux messages je n'ai pas bien compris le problème, mais vous avez ce code dans votre css qui en contrôle la mise en forme :

Code:

.imgcateg {
  border-radius: 10px;
  height: 25px;
  margin-bottom: 4px;
  margin-top: -5px;
  width: 60px;
}

[SweetGumiho]

C'est tout parfait. La dernière choses que j'aimerais serait de réduire l'espace entre le titre du sujet, la date et le nom du posteur dans la colonne de dernier message. ^^

[MlleAlys]

Retrouvez ce code dans votre css :

Code:

.detailsposteur {
  margin-top: 5px;
}

Complétez le ainsi pour régler la hauteur de la ligne :

Code:

.detailsposteur {
  margin-top: 5px;
  line-height: 13px;
}

[SweetGumiho]

Merci encore ! ♥ Problème résolu !