Problème nom de sujet

[Cever]

Bonjour,

J'ai un problème avec les noms de sujets.

A l'état normal, le nom du sujet s'affiche très mal, on dirait qu'il se positionne en valign="top".
Tandis qu'à l'état survolé, il se positionne très bien, en valign="middle".

J'ai aussi remarqué que pour les longs titres de sujets, ça ne fait pas ce problème. Ce problème surgit uniquement pour les petits titres de sujets.

Voici une capture :





J'ajoute que le problème est survenu bien avant la mise à jour du 24/02/2011 par ForumActif.

Merci à celui ou celle qui prendra en charge ma demande d'aide.

[ge80]

Bonjour,


sur votre forum, ce problème est-il visible en tant qu'invité ?

Cordialement,

Ge

[Cever]

Oui, le problème apparaît aussi en tant qu'Invité

[ge80]

Je regarde le forum de votre profil et je ne vois pas la même chose que vos copies d'écran ?

[Cever]

Ce n'est pas le forum de mon profil. Je vous envoie le lien par MP.

[ge80]

Reçu.

Le problème est-il visible aussi avec Ie ou chrome car je ne le vois pas ?

Seulement avec firefox ?

Edit : ok je l'ai détecté dan sun sous forum avec les deux ...

J'analyse votre css et code.

[Cever]

Merci à vous de prendre du temps pour régler mon problème
Le temps n'est pas compter Ça ne presse pas.

[ge80]

Ceci provient de votre feuille de style ou de vos templates modifiés.

Regarder la partir topic-title et topictitle et mettre la ligne avec le dysplay : inline; en commentaires et vous n'aurez plus les sauts de positionnement.

[Cever]

Le problème est toujours là. Voici donc le template topics_list_box :

Code:

<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
   var all_checked = true;
   for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
   }
   document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
   for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
   }
}
</script>
<!-- END multi_selection -->

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap"> {topics_list_box.row.L_TITLE} </th>
      <th align="center" nowrap="nowrap" width="95"> Informations </th>
      <th align="center" nowrap="nowrap" width="150"> {topics_list_box.row.L_LASTPOST} </th>
      <!-- BEGIN multi_selection -->
      <th align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th>
   <!-- END multi_selection -->
   </tr>
   <!-- BEGIN pagination -->
   <tr>
      <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
   </tr>
   <!-- END pagination -->
   <!-- END header_table --><!-- BEGIN header_row -->
   <tr>
      <td class="row3" colspan="{topics_list_box.row.COLSPAN}" valing="middle"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
   </tr>
<!-- END header_row -->

<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
   <tr>
      <!-- BEGIN single_selection -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
      <!-- END single_selection -->
      <td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>
      <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
         <div class="topictitle" style="display:inline !important;">
            {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
            <h2 class="topic-title" style="display:inline !important;">
               <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}" style="display:inline !important;">{topics_list_box.row.TOPIC_TITLE}</a> par <b>{topics_list_box.row.TOPIC_AUTHOR}</b>
            </h2>
         </div>
         <!-- BEGIN switch_description -->
         <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
         </span>
         <!-- END switch_description -->
         <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span> 
         <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td></td>

      <td class="row2" align="center" valign="middle"><span class="postdetails"><table width="100%" border="0">
  <tr>
    <td><div align="right"><img src="http://img253.imageshack.us/img253/1677/commentsnc.png" width="16" height="16" /></div></td>
    <td valign="middle">Rép. :</td>
    <td><div align="left"><b>{topics_list_box.row.REPLIES}</b></div></td>
  </tr>
  <tr>
    <td><div align="right"><img src="http://img517.imageshack.us/img517/2299/eyeig.png" width="16" height="16" /></div></td>
    <td valign="middle">Vues :</td>
    <td><div align="left"><b>{topics_list_box.row.VIEWS}</b></div></td>
  </tr>
</table></span></td>
      <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap"><span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span></td>
<!-- BEGIN multi_selection -->
      <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
   <!-- END multi_selection -->
   </tr>
   <!-- END topic --><!-- BEGIN no_topics -->
   <tr>
      <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
   </tr>
   <!-- END no_topics --><!-- BEGIN bottom -->
   <tr>
      <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td> <span class="gensmall">{PAGINATION}</span></td>
               <td align="right"><a href="#top">{L_BACK_TO_TOP}</a> </td>
            </tr>
         </table>
      </td>
   </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

[ge80]

Je voulais dire les classes dans votre CSS.

Avez-vous modifié votre CSS spécifique ?

[Cever]

Je n'ai pas modifié la partie du CSS donc je viens de le faire à l'instant. En somme, voici ce que j'ai apporté :

PARTIE CONCERNÉE DU CSS :

Code:

div.topictitle {
   /* display: inline; */
   }
h2.topic-title {
   /* display: inline; */
    margin: 0;
    padding: 0;
   }
a.topictitle:link{
    text-decoration: none;
    color : #590d0b;
    }
a.topictitle:visited{
    text-decoration: none;
    color : #590d0b;
    }
a.topictitle:active{
    text-decoration: none;
    color : #590d0b;
    }
a.topictitle:hover{
    text-decoration: none;
    color : #993935;
    }

PARTIE CONCERNÉE DU TEMPLATE :

Code:

            <div class="topictitle">
                {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
                <h2 class="topic-title">
                  <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a> par <b>{topics_list_box.row.TOPIC_AUTHOR}</b>
                </h2>
            </div>

C'est déjà mieux, il n'y a plus de saut de positionnement, cependant, la hauteur du titre du sujet s'est agrandie. Je vous laisse voir

[ge80]

Voila c'est bien ce que je demandais de faire.

Plus de saut.

La hauteur est celle par défaut.

Je regarderai plus tard car je termine un travail en retard sur un tutoriel.

[Cever]

Ok. Pas de soucis

[ge80]

J'ai regardé et je ne vois pas de souci.

La taille me semble adaptée au contenu et elle me semble tout à fait correcte.

Je n'ai certainement pas compris ce qui vous gêne ou ce qu'il faut améliorer.

[Cever]

En fait, le problème c'est que ça déforme... :/



Peut-être est-ce à cause de la colonne Informations.. :/

[ge80]

Je ne vois pas de déformation.
Avec quel navigateur ?

[Cever]

Le problème est résolu. C'était un problème de width.
Merci en tout cas à toi ge80!

[ge80]

Entendu, je n'avais pas compris dans ce sens

Bonne journée



......
Je file manger mon dessert.