Mise en forme de la liste des sujets

[CathyCréation]

Bonjour,
et oui encore moi, j'ai un soucis avec la mise en forme de mes sujets, 
et j'aurai besoin d'un tit coup de pouce pour que tout sois en place quand je mettrai mon nouveau design lundi sur mon forum.

Alors voici ce que j'obtient

https://i.servimg.com/u/f82/16/13/63/20/sans_t11.png

Et voila ce que j'aimerai obtenir avec les couleur modifiable

https://i.servimg.com/u/f82/16/13/63/20/sans_t13.png

Je vous mes mon code css 

Code:

/* ----------------------- MISE EN FORME DES LISTES DE SUJETS --------------------------*/

.bloc_sujets
{
  width: 800px;
  margin: auto;
  background: #;
  border: 2px solid #7B1405;
  box-shadow: 0px 0px 0px #868686;
  -o-box-shadow: 0px 0px px #868686;
  -moz-box-shadow: 0px 0px px #868686;
  -webkit-box-shadow: 0px 0px px #868686;
  -htm-box-shadow: 0px 0px px #868686;
  padding: 5px;
}
.sujets
{
  background: #e0d3c0 ;
  border: px dotted #7B1405;
  padding: px;
  box-shadow: 2px 2px 2px 2px #7b1405;
  -o-box-shadow: 2px 2px 2px 2px #7b1405;
  -moz-box-shadow: 2px 2px 2px 2px #7b1405;
  -webkit-box-shadow: 2px 2px 2px 2px #7b1405;
  -htm-box-shadow: 2px 2px 2px 2px #7b1405;
}
.topictitle
{
  font-variant: small-caps;
  font-size: 12px;
}
.sujets_auteur
{
  display: block;
  width: 200px;
  font-size: 11px;
 
}
.sujet_last
{
  display: block;
  width: 180px;
  height: 40px;
  background: #;
  border-left: 0px solid #9e9e9e;
  border-right: 0px solid #9e9e9e;
  padding-top: 10px;
  font-size: 11px;
 
}
.sujets_stats
{
  width: 800px;
  text-align: right;
  margin-bottom: 5px;
}
.sujets_stats_contenu
{
  font-size: 10px;
  color: #540A00;
}

/* ----------------------- FIN MISE EN FORME DES LISTES DE SUJETS --------------------------*/
 

Merci de votre aide

[CathyCréation]

up

[Dr. Sam]

Bonjour,

Pourrais-je avoir votre template topics_list_box ?


Cordialement,

[CathyCréation]

Merci Mr Doc'

voici mon tamplate

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 -->

<div class="bloc_sujets">
      <!-- BEGIN multi_selection -->
      <span 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" /></span>
  <!-- END multi_selection -->
 
  <!-- BEGIN pagination -->
      <span align="right"><span class="gensmall">{PAGINATION}</span></span>
  <!-- END pagination -->
 
  <!-- END header_table --><!-- BEGIN header_row -->
<!-- END header_row -->
 
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
 
 
    <table class="sujets"><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><span class="icones_sujets"><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}" /></span></td>
      <!-- BEGIN icon -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
      <!-- END icon -->
                <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">
            {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="topictitle2" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </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>

      <td class="row3" align="center" valign="middle"><span class="sujets_auteur"><i>par {topics_list_box.row.TOPIC_AUTHOR}</i></span></td>
      <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap"><span class="sujet_last">{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></table>
  <div class="sujets_stats"><span class="sujets_stats_contenu">Ce sujet a été vu {topics_list_box.row.VIEWS} fois et a reçu {topics_list_box.row.REPLIES} réponse(s).</span></div>
  <!-- END topic --><!-- BEGIN no_topics -->
  <table><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></table>
  <!-- END no_topics --><!-- BEGIN bottom -->

  <br /><br />
<div class="pages"><span class="gensmall">{PAGINATION}</span>
  <span><a href="#top">{L_BACK_TO_TOP}</a> </span></div>
 
<!-- END bottom --><!-- BEGIN footer_table -->
</div><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

[Dr. Sam]

Bon !

Alors voici ton nouveau template:

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 -->

<div class="bloc_sujets">
      <!-- BEGIN multi_selection -->
      <span 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" /></span>
  <!-- END multi_selection -->
 
  <!-- BEGIN pagination -->
      <span align="right"><span class="gensmall">{PAGINATION}</span></span>
  <!-- END pagination -->
 
  <!-- END header_table --><!-- BEGIN header_row -->
<!-- END header_row -->
 
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
 
 
    <table class="sujets"><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><span class="icones_sujets"><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}" /></span></td>
      <!-- BEGIN icon -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20" style="background: #e0d3c0;">{topics_list_box.row.ICON}</td>
      <!-- END icon -->
                <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="400px" style="background: #e0d3c0; border-right: 2px dotted #B35A4F;">
        <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="topictitle2" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a> <span class="sujets_auteur"><i>par {topics_list_box.row.TOPIC_AUTHOR}</i></span>
            </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>

      <td class="row3" align="center" valign="middle" style="background: #e0d3c0; border-right: 2px dotted #B35A4F;"><span class="sujets_stats_contenu">Ce sujet a été vu {topics_list_box.row.VIEWS} fois et a reçu {topics_list_box.row.REPLIES} réponse(s).</span></td>
      <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap" style="background: #e0d3c0; border-radius: 0 20px 20px 0;"><span class="sujet_last">Le dernier sujet à été posté<br />{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></table>
  <div class="sujets_stats"></div>
  <!-- END topic --><!-- BEGIN no_topics -->
  <table><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></table>
  <!-- END no_topics --><!-- BEGIN bottom -->

  <br /><br />
<div class="pages"><span class="gensmall">{PAGINATION}</span>
  <span><a href="#top">{L_BACK_TO_TOP}</a> </span></div>
 
<!-- END bottom --><!-- BEGIN footer_table -->
</div><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

Et voici ton nouveau code CSS:

Code:

/* ----------------------- MISE EN FORME DES LISTES DE SUJETS --------------------------*/
 
.bloc_sujets
{
  width: 800px;
  margin: auto;
  background: #;
  border: 2px solid #7B1405;
  box-shadow: 0px 0px 0px #868686;
  -o-box-shadow: 0px 0px px #868686;
  -moz-box-shadow: 0px 0px px #868686;
  -webkit-box-shadow: 0px 0px px #868686;
  -htm-box-shadow: 0px 0px px #868686;
  padding: 5px;
}
.sujets
{
  background: #e0d3c0;
  border: px dotted #7B1405;
  border-radius: 20px;
  padding: px;
  margin-top: 10px;
  box-shadow: 1px 1px 10px #7b1405;
  -o-box-shadow: 1px 1px 10px #7b1405;
  -moz-box-shadow: 1px 1px 10px #7b1405;
  -webkit-box-shadow: 1px 1px 10px #7b1405;
  -htm-box-shadow: 1px 1px 10px #7b1405;
}
.topictitle
{
  font-variant: small-caps;
  font-size: 12px;
}
.sujets_auteur
{
  display: block;
  width: 200px;
  font-size: 11px;
 
}
.sujet_last
{
  display: block;
  width: 180px;
  height: 40px;
  background: #;
  border-left: 0px solid #9e9e9e;
  border-right: 0px solid #9e9e9e;
  padding-top: 10px;
  font-size: 11px;
 
}
.sujets_stats
{
  width: 800px;
  text-align: right;
  margin-bottom: 5px;
}
.sujets_stats_contenu
{
  font-size: 10px;
  color: #540A00;
}
 
/* ----------------------- FIN MISE EN FORME DES LISTES DE SUJETS --------------------------*/
 

Cordialement,

[Matriochka]

Bonjour vous deux,

Mr. Docteur je rappelle que le forum de support n’est pas censé délivrer des codes tout préparés. La moindre des choses, c’est d’expliquer les manœuvres aux membres afin qu’ils puissent comprendre comment les choses fonctionnent… Ça n’est pas les aider que de leur mâcher le travail.

À l’avenir, si tu veux aider, merci d’y faire attention.

Ce message n’attend aucune réponse,

Bonne journée.

[CathyCréation]

Merci beaucoup doc',
juste une chose je vais ou pour agrandir  la liste de message entre les deux ligne pointillée, je voudrais que la premiere soit plus loin que l'autre pour que le texte sois que sur deux ligne

http://passioncathy.forumactif.com/f3-essai-5

[Dr. Sam]

Alors il faut rapetisser l'espace pour le titre.

Soit ce code:

Code:

<td class="row1" onmouseover="this.className=&quot;row2&quot;" onmouseout="this.className=&quot;row1&quot;" width="400px" style="background: #e0d3c0; border-right: 2px dotted #B35A4F;">

Un fois trouvé, tu regarde le code pour trouver celui-ci:

Code:

width="400px"

Tu rapetisse le 400px par 300px par exemple


Cordialement,

[CathyCréation]

c'est parfait merci beaucoup