Liste des sujets : Décalage des en-têtes de colonnes

[Nest]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Aujourd'hui
Lien du forum : http://peupleslibres.forumactif.org/

Description du problème

Bonjour,

Après avoir trouvé la solution à mon problème exposé précédement https://forum.forumactif.com/t379979-largeur-colonne-icone-image-des-sujet-chevauchement-avec-titre-sujet, me voici désormais avec des en-têtes de colonnes décalées par rapport à leur contenu.

J'imagine que la solution serait de réduire la taille de la colonne "titre de sujet" en compensation de l'augmentation de la colonne "icone/image" du sujet...

Sauf que je sais pas comment faire... En plus du coup ce décalage m'a mis les infos de "derniers message" sur 3 lignes au lieu de 2 (comparaison possible avec cet https://servimg.com/view/19277843/41). Mais je pense qu'en résolvant le problème de colonne, ça devrait revenir à la normale. Du moins je l'espère...

Merci d'avance !

[Nest]

Je me rends compte que mon screen présentant le problème n'est pas passé, le voici : https://servimg.com/view/19277843/46

[Nest]

Du coup, en farfouillant dans l'inspecteur d'éléments de Firefox, j'ai réussi à identifier l'élément à modifier.
Voici la ligne de code que j'ai entré dans le CSS

Code:

}
ul.topics dd.dterm, dd.dterm {
    width: 42%;
}

Le problème, c'est que les modifs ne se font que pour le premier sujet (en l'occurence, une annonce), le second a encore le décalage.

Autre souci, je me suis rendue compte en faisant des tests que les modifs de taille de la "case Sujet" n'ont été prises en compte que pour le premier forum... (hauteur de ligne du tableau). Je ne comprends pas pourquoi... En fait, en parcourant les autres forums, pour ceux ou j'ai édité des sujets tests du moins, on se rend parfaitement compte de l'hétérogénéité de la mise en forme.

Si quelqu'un a une idée... J'abandonne pour ce soir pour ma part !

[demeter1]

Si tu pouvais poster dans une portion du forum qui est ouvert en mode invité, on pourrait cerner un peu mieux le soucis.
Actuellement, il y a 2 messages sur le forum et qui sont dans des sections fermées.

[Nest]

Oups, j'avais pas pensé à ça, je corrige de suite !
Et bonjour et merci au fait !

[Nest]

J'ai posté des messages de tests dans les deux forums publics, et j'ai ouvert le premier aux invités, puisque c'est le seul pour lequel la modif de hauteur de ligne à bien voulu être prise en compte.

J'ai l'impression que les modifs, concernant la largeur de la colonne comportant le titre du sujet, n'interviennent que pour le premier "tableau" quand il y en a plusieurs, puisque s'il n'y a que des sujets, ça s'aligne bien, mais à partir du moment ou il y a annonces et sujets, donc deux "tableaux" séparés chez moi, alors seul celui de l'annonce est correct.
Quand à la modif de hauteur de ligne n'apparaissant que dans le premier forum, franchement je reste dubitative. A vrai dire, je sais même plus comment je suis parvenue à modifier ce truc...

Donc en gros pour résumer ce que j'aimerais parvenir à faire, c'est :
- avoir pour mes forums quasi strictement la même mise en page que sur ma page d'accueil (en terme de taille de colonnes et hauteur de ligne, j'entends ; si au passage je pouvais réduire un chouilla la largeur de la colonne "derniers messages, ce serait parfait, mais pas fondamental).
- que les infos de "derniers messages" soient sur 2 lignes assez espacées, exactement comme http://peupleslibres.forumactif.org/f11-l-ambassade-de-la-communaute-de-l-anneau-forum-public (si je pouvais avoir ça partout, ce serait l'idéal, en fait).

En somme tout ce que je demande, c'est comment faire une mise en page uniforme (au moins en apparence) sur toutes les pages, sans pour autant que mes titres de sujets ne viennent grignoter leurs icones !

[Nest]

Malgré mes recherches, je n'ai toujours pas trouvé de solution, alors si qqun a une idée, je prends !
J'ai fais des tas de modifs entre temps, mais pour le moment le pbm est toujours là.
En fait le code CSS plus haut, ca permet de rétrécir la colonne liste de sujet (et encore pas partout comme je l'ai dit, c'est bien le pbm). Dans l'idéal, il faudrait toutefois remplacer ce code par un autre (fonctionnant partout !) me permettant de soit d'agrandir les en-têtes SUJETS" et ANNONCES ET NOTES"; soit de "décaler" le début de l'entête "réponses" (ce qui devrait de ce fait décaler les suivantes "vues" et "derniers messages", non ?)

---------------------------

Un dernier post pour ce soir : voici les lignes rajoutées dans le CSS par mes soins... Il doit y avoir une erreur qqpart dans mes intitulés d'éléments pour que ca bug de cette façon :

Code:

/* Solution chevauchement titre sujet-message sur icone*/
ul.pmlist dl.icon dt {
    padding-left: 12%;
}
ul.topics dd.dterm {
    padding-left: 12%;
}
   /* Solution PROVISOIRE décalage en-têtes*/
ul.topics dd.dterm, dd.dterm {
    width: 42%;
}

[Nest]

Souci toujours d'actualité malgré mes efforts !

[Nest]

Hello ! Après un weekend chargé, je relance mon post !

[Nest]

Problème toujours d'actualité...

[Nest]

Personne pour me filer un coup de patte ?

[Nest]

Toujours là, même si j'essaie de pas trop spammer non plus...

[Nest]

Up !

[Nest]

Up !

[Nest]

Up !

[MasDan]

Bonjour,

Pour corriger le tout, il s'agit de coder à l'identique (même structure).

Capture 1: «Annonce & Note»


Capture 2: «Sujets»


Modifier le code de votre template pour la section des sujets (cadre rouge à la deuxième capture):
1 - à votre premiere ligne, remplacer votre balise dd par une balise dt et supprimer la class et le style
2 - à votre deuxième ligne, supprimer le style

[Nest]

Merci beaucoup pour votre réponse !
Alors en effet, ça marche sur l'inspecteur d'éléments Firefox, mais je ne vois pas où il faut que je modifie ça dans le panneau admin du forum. Sur le CSS ? Ou dans un des template ? Et dans ce cas, lequel ?
Encore merci.

[Nest]

Up !

[MasDan]

Ou dans un des template ? Et dans ce cas, lequel ?

C'est le template index-box.

[Nest]

Merci d'avoir pris le temps de me répondre, mais je n'arrive toujours pas à changer les lignes en questions, car bien évidement, le code du template ne ressemble pas vraiment à celui de l'examinateur l'élément, sinon, ce serait trop simple !
Voici le code complet du template index_box :

Code:

<ul class="linklist">
   <!-- BEGIN switch_user_logged_in -->
   <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>&nbsp;•&nbsp;</li>
   <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>&nbsp;•&nbsp;</li>
   <!-- END switch_user_logged_in -->
   <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
   <!-- BEGIN switch_user_logged_in -->
   <li class="rightside"><a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a></li>
   <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="forabg">
         <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
                  <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
                  <dd class="topics">{L_TOPICS}</dd>
                  <dd class="posts">{L_POSTS}</dd>
                  <dd class="lastpost"><span>{L_LASTPOST}</span></dd>
               </dl>
            </li>
         </ul>
         <ul class="topiclist forums">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
            <li class="row">
               <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
                  <dd class="dterm">
                     <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
                        <h{catrow.forumrow.LEVEL} class="hierarchy">
                        <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                        </h{catrow.forumrow.LEVEL}>
                        <br />
                        {catrow.forumrow.FORUM_DESC}

                        <!-- BEGIN switch_moderators_links -->
                           {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                        <!-- END switch_moderators_links -->
                        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                        <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                     </div>
                  </dd>
                  <dd class="topics">{catrow.forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></dd>
                  <dd class="posts">{catrow.forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
                  <dd class="lastpost">
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->

                     <span>
                     <!-- BEGIN switch_topic_title -->
                     <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                     <!-- END switch_topic_title -->
                     {catrow.forumrow.USER_LAST_POST}
                     </span>
                  </dd>
               </dl>
            </li>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
            </ul>

         <span class="corners-bottom"><span></span></span></div>
      </div>
   <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<ul class="linklist">
   <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>&nbsp;•&nbsp;</li>
   <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>&nbsp;•&nbsp;</li>
   <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
   <!-- BEGIN switch_delete_cookies -->
   <li class="rightside"><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
   <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

Pouvez vous s'il vous plait m'indiquer ce que je dois changer précisément ?
Merci encore pour votre aide et votre patience !

[MasDan]

Bonjour Nest,

Oups désolé, le template demandée n'était pas le bon.

Au template topics_list_box, ligne 82 (selon le template par défaut) remplacer le 45px par 140px



N'oublier pas d'enregistrer
et de publier

Cette seule modification devrait être suffire.

[Nest]

Waaaaa ! Enfin !! Merci beaucoup !

Du coup j'ai pu supprimer ma "solution provisoire décalage entêtes" de ma feuille CSS. Ca m'a de nouveau tout redécalé (forcément) mais comme je savais ou chercher, j'ai pu modifier le "padding-left" des "posts" du bloc "annonces" ("announcement" sur le template topics_list_box, ligne 51 dans la version par défault) et celui du bloc "sujet", de manière à ce qu'ils s'alignent parfaitement (chez moi 75px pour le premier ; 120x pour le second).

Le problème semble donc enfin réglé, du moins sur mon écran. Car je me demande si en effectuant des modifications en "px", ça ne risque pas d'être complètement à côté sur un écran plus large ? (parce que j'ai un 17" bien carré, à l'ancienne !)

Si tu peux m'éclairer sur ce dernier point... Sinon je mènerais l'enquête auprès des usagers !

Encore merci ! Psycho-rigide comme je suis (au pixel près), un tel décalage me donnait des palpitations à chaque connexion sur le forum ! ^^

[MasDan]

Bonjour,

Car je me demande si en effectuant des modifications en "px", ça ne risque pas d'être complètement à côté sur un écran plus large ?

Il y a effectivement décalage pour un fenêtre plus grande.

Avec Examiner l'élément, on trouve à votre CSS

Code:

ul.topics dd.dterm { padding-left: 12%; }

à remplacer par ceci

Code:

ul.topics dd.dterm { padding-left: 110px; }

pour corriger le décalage.

j'ai un 17" bien carré, à l'ancienne

On doit être du même côté de la grande flaque (Atlantique).

[Nest]

Merci beaucoup ! Donc si j'ai bien compris, il suffit d'utiliser le même "type d'unité". Soit je mets tout en px, soit tout en % (en même temps, ça parait logique). Pour le moment, j'ai mis en px en suivant vos conseils. Je testerai en basculant tout en %, mais je sauvegarderais bien tout ça avant !

Et sinon, vu l'heure de vos messages, je ne pense pas que nous soyons du même côté ! Je suis sur le vieux continent, avec mon vieux moniteur ! (enfin, c'est pas non plus un CRT, il n'a que 10 ans !). Y'a des typologies plus particulières d'écrans selon les pays ?! Je l'ignorais !