Forum déformé après une réponse

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

Résolu Forum déformé après une réponse

Message par Jay K. le Mar 10 Oct 2017 - 22:31

Bonjour,

Je me permets de solliciter votre aide, car je viens de me rendre compte d'un problème sur le forum que mon équipe construit. En effet, tout va bien, jusqu'à ce que l'on poste une réponse à un sujet. Là, le corps du forum se décale, comme si les <div> se mélangeaient...

Voici les screens à l'état "normal" :

Spoiler:
Spoiler:

Et voici lorsque l'on poste une réponse :
Spoiler:
Spoiler:
Spoiler:

Le template viewtopic_body est modifié, le code ci-dessous.



Et le css qui correspond à la partie du profil à gauche :


J'espère que vous réussirez à m'éclairer et à trouver une solution, je n'ai aucune idée d'où ça pourrait venir. Merci par avance ! I love you


avatar

Jay K.
Nouveau membre

Messages : 13
Inscrit(e) le : 02/05/2017

http://wildsandiego.forumactif.com/
Jay K. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forum déformé après une réponse

Message par MlleAlys le Mer 11 Oct 2017 - 14:14

je poste pour voir les codes


EDIT :
Il y a effectivement une erreur dans le tableau, lorsque vous avez déplacer les icones de contact je pense.
Essayez ainsi, template :


CSS :


Dernière édition par MlleAlys le Jeu 12 Oct 2017 - 1:04, édité 1 fois
avatar

MlleAlys
Membre actif

Messages : 4621
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forum déformé après une réponse

Message par Jay K. le Mer 11 Oct 2017 - 17:11

Merci beaucoup pour votre réponse ! Ca marche nickel, le forum n'est plus déformé Very Happy Je savais bien qu'on avait fait une bêtise, c'est ce qui arrive quand on bidouille sans savoir coder... Siffleur

Par contre, les éléments du profil à gauche sont un peu décalés, du coup !
Spoiler:

Il aurait fallu remonter l'ensemble pseudo+rang sous l'avatar, faire un saut de ligne entre le rang et le bloc infos, ainsi qu'entre le bloc infos et les icônes de contact, et enfin centrer celles-ci. Est-ce qu'en rajoutant des margin-top dans le css ça peut fonctionner ou bien est-ce que nous devons procéder autrement ?
avatar

Jay K.
Nouveau membre

Messages : 13
Inscrit(e) le : 02/05/2017

http://wildsandiego.forumactif.com/
Jay K. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forum déformé après une réponse

Message par MlleAlys le Jeu 12 Oct 2017 - 1:09

les marges négatives sont à éviter un maximum, il existe d'autres solutions pour lacer des éléments à l'endroit voulu.
Déjà ici, commencer par comprendre d'où vient cet espace entre l'avatar et le pseudo.
Localisez le code css suivant :
Code:
/* Image de fond de l'avatar */
    .avatar_profil {
      width: 215px;
      height: 368px;
      text-align: center;
    }
Supprimez la hauteur fixe, ce qui donne :
Code:
/* Image de fond de l'avatar */
    .avatar_profil {
      width: 215px;
      text-align: center;
    }

Pour ajouter une marge sous le rang, localisez le code suivant :
Code:

    .rang_profil {
      text-align: center;
      font-family: 'Times New Roman', serif;
      font-size: 12px;
      text-transform: lowercase;
    }
Ajoutez margin-bottom: 15px; ce qui donne :
Code:

    .rang_profil {
      text-align: center;
      font-family: 'Times New Roman', serif;
      font-size: 12px;
      text-transform: lowercase;
      margin: 15px;
    }
La valeur peut bien sûr être modifiée.

Pour ajouter une marge au dessus des liens de contact et les centrer, localisez dans le template ce passage :
Code:

      <div style="position:relative;">
        {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
        <!-- BEGIN contact_field -->
        {postrow.displayed.contact_field.CONTENT}
        <!-- END contact_field -->
        {postrow.displayed.ONLINE_IMG}
      </div>
modifiez la première ligne ainsi :
Code:

      <div class="contact_profil">
        {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
        <!-- BEGIN contact_field -->
        {postrow.displayed.contact_field.CONTENT}
        <!-- END contact_field -->
        {postrow.displayed.ONLINE_IMG}
      </div>
Enregistrez et publiez le template, puis dans le css ajoutez :
Code:
.contact_profil {
  text-align: center;
  margin-top: 15px;
}
la valeur de la marge peut bien sûr être modifiée également.
avatar

MlleAlys
Membre actif

Messages : 4621
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forum déformé après une réponse

Message par Jay K. le Ven 13 Oct 2017 - 17:26

Je prends note pour les marges négatives. C'est parfait, je vous remercie pour votre aide Smile Le problème est donc résolu !
avatar

Jay K.
Nouveau membre

Messages : 13
Inscrit(e) le : 02/05/2017

http://wildsandiego.forumactif.com/
Jay K. 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