Mettre la liste des sujets au milieu

[Oz-Chan]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
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
Lien du forum : https://nova-aurora.forumactif.com

Description du problème

Bonjour !

J'aimerai avoir la possibilité de mettre la liste des sujets en dessous des catégories, c'est à dire au milieu et non sur le côté gauche. Voici les codes !

CSS

Code:

.cate_sujets {
background: #f4f7fa;
border-radius: 40px 20px ;
margin: 10px;
}
.subj-body{ display:flex; justify-content:space-between; margin:1px 5px; background-color:#312f60; padding:10px; border-radius:20px; height:45px;}

/* Image sur le coté */

.img-subj{ width:30px; }
.img-subj img{ width: 30px;height: 65px;  object-fit: cover;}

/* Titre & Description */

.subj-tit-descr{ width:53%; }
.subj-tit-descr a.topictitle{ margin:0;  padding:5px; color:#f4f7fa; font-family:'Roboto', sans-serif; border-radius: 10px;
  font-weight:normal; font-size:15px; letter-spacing:1px;  transition:500ms; }
.subj-tit-descr a:hover{ background:#000; }
.subj-tit-descr .genmed{ font-family:'Roboto'; font-size: 22px; color:#222; display:block; }

/* Vue Reponse et Auteur */

.author-vuerep{ width:15%; }
.vues-mess{ font-family:'Roboto', sans-serif;  font-size:10px; text-align:center; background:#050628; color:#f4f7fa; padding:5px 0px; border-radius: 10px;}
.auth-naiss{ font-family:'Roboto'; font-size:14px; text-align:center; color:#222; margin-top:5px; }
.auth-naiss a{ display:block; margin-top:5px; }
.auth-naiss a span{ text-align:center; }

/* Date et Image */

.subj-dern{ width:25%; margin-top:6px; }
.subj-dern .lastpost-avatar{ position:relative; z-index:14; }
.subj-dern .lastpost-avatar img{ border-radius: 50%;    border: 3px solid #050628;    height: 38px;    width: 38px; object-fit:cover; }
.subj-dern .dern-rep{ background-color:#050628; padding:5px; margin-left: -14px;  padding-left: 31px;position: relative;z-index: 5; border-radius: 10px;
  margin-top: 2px; display: inline-block;}
.subj-dern .dern-rep strong{ color:#f4f7fa !important; }

.author-mess{ font-size:10px; }

.liste_sujets_boutons a {
 display: block;
    }

.subjects-total {
border-radius: 30px;
font-size: 0;
padding: 7px;
border: 1px solid #0b001b;
width: 850px;
    }

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 -->
     
    <div class="forumline subjects-total" width="100%" border="0" cellspacing="1" cellpadding="0">
     
      <!-- BEGIN pagination -->
      <div class="sj-pagin gensmall">{PAGINATION}</div>
      <!-- END pagination -->
     
      <!-- END header_table -->
     
      <!-- BEGIN header_row -->
      <div class="ls-title">{topics_list_box.row.L_TITLE}</div>
      <!-- END header_row -->
     
      <!-- BEGIN topic -->
      <table width="100%">{topics_list_box.row.END_TABLE_STICKY}</table>
     
      <div class="subj-body">
       
        <div class="img-subj">
          <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}" />
        </div>
       
        <div class="subj-tit-descr">
          <h2 class="topic-title">
            <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
          </h2>
          <!-- BEGIN switch_description -->
          <div class="subj-descr genmed">{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}</div>
          <!-- END switch_description -->
        </div>
       
        <div class="author-vuerep">
          <div class="vues-mess">{topics_list_box.row.VIEWS} vues / {topics_list_box.row.REPLIES} réponses</div>
          <div class="auth-naiss">{topics_list_box.row.TOPIC_AUTHOR}</div>
        </div>
       
        <div class="subj-dern">
          <!-- BEGIN avatar -->
          <div class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</div>
          <!-- END avatar -->
          <div class="author-mess">
            {topics_list_box.row.LAST_POST_TIME}
            <br /><span class="dern-rep">{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
          </div>
        </div>
       
        <!-- BEGIN multi_selection -->
        <div 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} />
        </div>
        <!-- END multi_selection -->
     
      </div>
      <!-- END topic -->
     
  <!-- BEGIN no_topics -->
      <div class="gen row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30">{topics_list_box.row.L_NO_TOPICS}</div>
      <!-- END no_topics --> 
     
      <!-- BEGIN bottom -->
      <div class="sj-pagin gensmall">{PAGINATION}</div>
      <a class="sj-top" href="#top">{L_BACK_TO_TOP}</a>
      <!-- END bottom -->
     
      <!-- BEGIN footer_table -->
      </div>
      <!-- END footer_table -->
     
      <!-- BEGIN spacer -->
      <!-- END spacer -->
     
      <!-- END row -->
      <!-- END topics_list_box -->

Merci

[Toryudo]

Bonjour !
Je n'ai pas tous les visuels possibles pour tester, mais à priori, un margin: auto; ajouté à la class .subjects-total devrait faire l'affaire :

Code:

.subjects-total {
  border-radius: 30px;
  font-size: 0;
  padding: 7px;
  border: 1px solid #0b001b;
  width: 850px;
  margin: auto;
}

[Oz-Chan]

Bonsoir,

Oh, c'est le seul code que je n'avais pas testé... Je fatigue ahaha !
Tout est bon, merci