Catégorie et avatar décalés. (terminé)

Bonjour :)
Je viens vers vous, car j'ai plusieurs problèmes avec mon forum. Actuellement en pleine construction, je tente de me débrouiller par mes propres moyens mais bon, c'est pas tellement une réussite ! Bref, tout cela pour vous expliquez que j'ai vraiment deux problèmes majoritaires. Je précise que je suis sous Mozilla, et que j'ai vérifié plusieurs fois avant de poster, mais il n'est pas impossible que j'ai oublié quelque chose, je ne suis pas une pro' des codes

Mon premier problème vient de mes sujets. J'ai utilisé le code de Okhmhak que l'on peut retrouver ici mais je ne comprend pas pourquoi les sujets sortent du forum. J'ai beau retourner le problème plusieurs fois dans ma tête et dans les templates/ CSS, je ne vois pas d'où vient le problème.

Spoiler:

Mon second problème provient du profil. Déjà à la base, je suppose qu'il y a un souci puisque les avatars ressentent comme vous pouvez le voir dans le spoiler. Là, déjà, je trouve pas d'où vient le problème et je suppose que tant que ça ce n'est pas réparé, le code que je veux mettre ne marchera pas bref, je vous montre. Il y a un petit trait vert qui est censé délimiter le profil mais qui ne fonctionne pas.

Spoiler:

Et puis ensuite, j'ai tenté de personnaliser mes profils avec le code d'Alumine ici . J'ai utilisé la version violette, et puis là, ce fut un peu le drame :

Spoiler:

Premier beug, de nouveau la page est déformée au niveau du post. J'ai essayé d'élargir la page, mais c'est toujours déformé entre le haut du forum et le haut du post. Ensuite, le contour violet autour de la fiche de scénario beug aussi, mais là je suppose que c'est parce que ce n'est pas à la bonne taille ou pas adapté à une fiche de scénario, et puis c'est un problème mineur. L'avantage, c'est que le profil ne beug plus au moins

Bref, je pense avoir fait le tour, merci beaucoup à ceux qui réussiront à trouver le problème et me l'expliquer, ce serait vraiment très gentil de votre part !

Salut,

On ne peut pas résoudre un problème à base de captures d'écran. Est-ce qu'on peut donc avoir l'adresse de ton forum et tes codes ? (pense à toujours les donner)
Et du coup, tu veux garder le profil avec le trait vert ou utiliser celui d'Alumine ?

Bonjour !
Voici le forum : http://starwarsunivers.forumactif.org/ . Comme tout se trouvait dans la Zone Admin, j'ai remis les mêmes sujets dans la partie administration pour les membres ici
Du coup j'aimerais bien garder le code d'Alumine si c'est possible évidemment. Autrement, si c'est plus simple, garder la version de base, m'ira aussi parfaitement :)

Pour les codes, ne sachant pas ce qui pourrait t’intéresser voici le CSS du forum :

Code:

      /* --------------------------------- CATEGORIES --------------------------------- */

            #liens_sf1 a {
              background-color: #D3AFCB;
              display: block;
            }

            #liens_sf1 a:hover {
              background-color: #C0C4DD;
            }

            .essai {
              background-color: #000000;
            }

            /*** FONDS GENERAUX ***/

            /* Contenu de l'ensembre des forum */
            .categorie {
              width: 500px;
          height: 20px;
              padding: 5px;
            }

        /* Mise en forme nom de catégorie */
              .cate_titre h2 {
                  font-size: 35px;
                  font-family: 'Lobster', cursive;
                  color: #000000;
                  text-align: center;
                  position: relative;
                  top: -0.8em;
                }


            /*** MISE EN FORME DES FORUM ***/

            /* Mise en forme du texte des titres de forum */
            .forumlink {
              color: #946AAC !important;
              font-family: 'Lobster', cursive;
              font-size: 25px !important;
              font-weight: none !important;
              position: relative;
              top: -2.2em;
              left: -3em;
              z-index: 1;
            }

            .forumlink:hover {
              color: #A9B2D1 !important;
              text-decoration: none !important;
            }

            .forumlink a {
              font-size: 16px;
            }

            /* Mise en forme de la description */
            .bloc1 {
              background-color: #FFFFFF;
              color: #C8B1CB;
              font-size: 11px;
              text-align: justify;
              height: 120px;
              width: 380px;
              position: relative;
              left: -7em;
              top: -6em;
              border-radius: 20px;
            }

            .imgillustration {
              border-radius: 10px;
            }


            /*** SOUS-FORUM ***/

            .lienssf {
              width: 130px;
              background-color: #ffffff;
              height: 110px;
              overflow: auto;
              padding-top: 15px;
              padding-bottom: 15px;
              position: relative;
              top: -3em;
              left: -4em;
              border-radius: 25px;
              text-align: center;
            }

            .lienssf a {
              color: #8F7ABB !important;
              text-decoration: none !important;
            }

            .lienssf a:hover {
              text-decoration : none !important;
            }




            /*** DERNIERS MESSAGES ***/

            .last_mess {
              width: 120px;
              height: 130px;
              position: relative;
              left: -8em;
          top: -4.5em;
              background-color: #FFFFFF;
              color: #A67CA4;
              padding: 5px;
              font-size: 11px;
              border-radius: 50px;
            }

            .last_mess a {
              color: #CBC8E5 !important;
              text-decoration: none !important;
            }

            /* --------------------------------- FIN CATEGORIES --------------------------------- */
    /* --------------------------------- PA --------------------------------- */

        /* Base de la PA */
        .fond_PA {
          background-color: #B3BFF2;
          width: 690px;
          padding: 20px;
          border-radius: 50px;
          text-align: justify;
          font-size: 11px;
        }

        .titre_PA {
          position: relative;
          top: -1.3em;
          font-family: 'Lobster', cursive;
          font-size: 35px;
          color: #7F5E95;
          text-shadow: 1px 1px 2px white;
          text-align: center;
        }

        .sous_titre_PA {
          position: relative;
          top: -0.5em;
          z-index: 1;
          font-family: 'Lobster', cursive;
          font-size: 25px;
          color: #8CC6D7;
          text-shadow: 1px 1px 2px white;
          text-align: center;
        }

        /* Blocs à fond bleu de la PA + couleur de leurs liens */
        .bloc_PA {
          background-color: #D9EFF5;
          color: #183152;
       border-radius: 25px;
          padding: 15px;
          font-size: 11px;
          position: relative;
          top:-2em;
          left: -1em;
          text-align: justify !important;
        }

        .bloc_PA a {
          color: #5F8CA3 !important;
          text-decoration: none !important;
        }

        /* Bloc spécial pour la navigation */
        .bloc_PA_navig {
          background-color: #B3E3E3;
          color: #377B7A;
          border-radius: 25px;
          padding-top: 15px;
          padding-bottom: 15px;
          font-size: 11px;
          position: relative;
          top:-2em;
          left: -1em;
          text-align: justify !important;
        }

        /* Liens de la navigation */
        .bloc_PA_navig a {
          text-decoration: none !important;
          color: #295654 !important;
        }

        /*Fond "normal" des liens */
        #liens_navig a {
          background-color: #8CC8C1;
          display: block;
        }

        /* Fond des liens au survol */
        #liens_navig a:hover {
          background-color: #99CDFF;
          display: block;
        }

        /* Info-bulles staff et vacants */
        a.info{
          position: relative;
          z-index: 24;
          color: #000;
          text-decoration: none;
        }
       
        a.info:hover{
          z-index: 25;
        }
       
        a.info span{
          display: none;
        }
       
        a.info:hover span{
          display: block;
          position: absolute;
          top: -8em;
          right: -10em;
          width: 100px;
          height: 200px;
          border-radius: 25px;
          overflow: auto;
          background-color: #B3E3E3;
          text-align: center;
          font-weight: none;
          padding: 5px;
        }

        /* Rotations des images au survol du staff et des vacants */
        .imgstaff {
          border-radius: 80%;
          -moz-transition-duration: 1s;
          -moz-transition-timing-function: linear;
          -webkit-transition-duration: 1s;
          -webkit-transition-timing-function: linear;
          transition-duration: 1s;
          transition-timing-function: linear;
        }

        .imgstaff:hover {
          border-radius: 80%;
          -moz-transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }

        /* Info-bulles Evènements */
        a.events{
          position: relative;
          z-index: 24;
          color: #000;
          text-decoration: none;
        }
       
        a.events:hover{
          z-index: 25;
        }
       
        a.events span{
          display: none;
        }
       
        a.events:hover span{
          display: block;
          position: absolute;
          top: -8em;
          right: -10em;
          width: 200px;
          height: 60px;
          overflow: auto;
          border-radius: 25px;
          overflow: auto;
          background-color: #B3E3E3;
          text-align: center;
          font-weight: none;
          padding: 5px;
        }

        /* Rotation au survol images évènements */
        .imgevents {
          border-radius: 25px;
          -moz-transition-duration: 1s;
          -moz-transition-timing-function: linear;
          -webkit-transition-duration: 1s;
          -webkit-transition-timing-function: linear;
          transition-duration: 1s;
          transition-timing-function: linear;
        }

        .imgevents:hover {
          border-radius: 25px;
          -moz-transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }

        /* --------------------------------- FIN PA --------------------------------- */
          /***************************** QEEL *****************************/

        /* Fond du QEEL */
        .fond_qeel {
          background-color: #B3BFF2;
          width: 700px;
          border-radius: 25px;
          padding: 25px;
          position: relative;
          top: -7em;
          z-index: 1;
        }

        /* Mise en forme des blocs du QEEL */
        .bloc_qeel {
          background-color: #E1E6FA;
          color: #377B7A;
          text-align: center;
          border-radius: 25px;
          padding: 15px;
          font-size: 11px;
          position: relative;
          top:-2em;
        }

        /* Taille et position de la Pokéball */
        .img_qeel {
          position: relative;
          top: -4em;
          z-index: 2;
          width: 180px;
        }

        /*** SYSTEME D'ONGLETS ***/

        .qeelonglet {
      padding-left: 10px;
      padding-right: 10px;
      font-family: 'Parisienne', cursive;
      font-size: 15px;
      display: block;
    }
                 
        .qeelonglet_0 {
        }

        .qeelonglet_1 {
        }

        .contenu_qeelonglet {
          padding: 25px;
          display: none;
          width: 320px;
          height: 45px;
          overflow: auto;
          border-radius: 25px;
          position: relative;
          left: -1.5em;
          text-align: justify;
        }

        .contenu_qeelonglet a{
          text-decoration: none !important;
        }

        /***************************** FIN QEEL *************************/

/*BOUTON HAUT/BAS*/
    .haut{
            position:fixed;
            bottom:18px;
            left:1280px;}
         
    .bas{
            position:fixed;
            bottom:10px;
            left:1280px;}
/*Fin bouton*/

    /* MISE EN FORME DES LISTES DE SUJETS */

    .bloc_sujets
    {
      width: 950px;
      margin: auto;
      background: #dfdfdf;
      border: 1px solid #ececec;
      box-shadow: 0px 0px 3px #868686;
      -o-box-shadow: 0px 0px 3px #868686;
      -moz-box-shadow: 0px 0px 3px #868686;
      -webkit-box-shadow: 0px 0px 3px #868686;
      -htm-box-shadow: 0px 0px 3px #868686;
      padding: 5px;
    }
    .sujets
    {
      background: #ececec;
      border: 1px dotted #ffffff;
      padding: 3px;
    }
    .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: #f4f4f4;
      border-left: 3px solid #9e9e9e;
      border-right: 3px solid #9e9e9e;
      padding-top: 10px;
      font-size: 11px;
    }
    .sujets_stats
    {
      width: 900px;
      text-align: right;
      margin-bottom: 5px;
    }
    .sujets_stats_contenu
    {
      font-size: 10px;
      color: #a4a4a4;
    }

/*********************************************************************************/
/*PROFIL*/

    /*Cadre autour des messages par Alu' pour Never-Utopia *****************************************************************/

    .profilmembre, .infoprofil, .imageavatar {
      height: 320px;/*hauteur de l'avatar*/
      width: 200px;/*largeur de l'avatar*/
    }

    .rangée .thRight, .infoprofil, .nomavatar, .rangée .thLeft, .basviolet .browse-arrows{
      font-family: Voltaire; /*police utilisée*/
      font-variant:small-caps;/*texte en petites majuscules*/
    }

    .basviolet, .postviolet{ background-color:#dce2e5;}/*couleur de fond des messages*/

    .imageavatar{
      background-image: url(http://image.noelshack.com/fichiers/2014/50/1418219387-sur-avatar.png);
      /*image par-dessus l'avatar, laisser vide pour l'enlever*/
      position:absolute;
      top:0;
      left:0;
      z-index:3;
    }
    .infoprofil {
      background-image:url(http://nsa33.casimages.com/img/2014/11/30//14113007024612472.png);
      /*image de fond des infos du profil, laisser vide pour l'enlever*/
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: 0;
      padding:15px;
      font-size: 13px;
      color:#9d8ab0;
      z-index:0;
      overflow: auto;
    }
   
    .nomavatar{
      background-image:url(http://nsa33.casimages.com/img/2014/11/30//141130070245722186.png);/*image de fond du pseudo*/
      height:61px;/*largeur de l'image de fond*/
      width: 208px;/*hauteur de l'image de fond*/
      color:#9d8ab0;/*couleur du texte du rang*/
      text-transform:uppercase !important;/*rang en majuscules*/
      font-size: 18px;
      line-height:110%;
      text-align:center;
      position:relative;
      padding-top:20px;
      margin-top: -25px;
      z-index: 3;
    }

    .fondpost{
      border: 3px solid #ad9ebd;/*bordures fines autour du message*/
      border-radius:20px;/*arrondi*/
      padding: 15px;
      min-height: 325px;
      margin: 10px 30px auto 30px;
    }

    .profilmembre {
      border: 5px solid #ad9ebd;/*bordures autour de l'avatar*/
      position:relative;
      margin: 10px 0;
    }

    .rangée{
      background-color:#9d8ab0;/*couleur de fond de la ligne "auteur-message"*/
      border-radius:20px 20px 0 0;/*arrondis*/
      display:block;
      margin-top:15px;
    }
    .rangée .thRight{
      color:#dce2e5;/*couleur du texte "message"*/
      font-size: 15px;
      font-weight:bold;
      display:block;
      margin-left:255px;
      padding-top:7px;
      height:19px;
    }
    .rangée .thLeft, .basviolet .browse-arrows{
      color:#dce2e5;/*couleur du texte "auteur"*/
      font-size: 15px;
      font-weight:bold;
      display:block;
      float:left;
      width:255px;
      padding-top:7px;
      height:19px;
    }
    .basviolet{
      border:5px solid #9d8ab0;/*bordures de la partie basse du message*/
      display:block;
      border-radius:0 0 20px 20px;
      border-top:none;
      margin-bottom:30px;
    }

    .postviolet{
      border-left:5px solid #9d8ab0;/*bordures de la partie centrale du message*/
      border-right:5px solid #9d8ab0;
      display:block;
    }



    .postviolet .postdetails {display:none;}/*enlève la date et l'heure du sujet*/
    .postviolet .post-options{padding-right:30px;}
    .avatar img: {width:100%; height: 100%;}/*redimensionne les avatars à la bonne taille*/
    .pseudo {display:block;font-size:25px; /*taille du pseudo*/font-variant:small-caps;text-transform:none;}
    th.thBottom, th.thCornerL, th.thCornerR, th.thHead, th.thLeft, th.thRight, th.thSides, th.thTop { border:none;font-weight:normal;}

    .profilmembre:hover > .avatars {/*ne pas modifier*/
      opacity: 0;
      filter: alpha(opacity=0);
      visibility: hidden;
      z-index:1;
    }
    .avatars {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index:2;
      -webkit-transition:all 1s;
      -moz-transition:all 1s;
      -o-transition:all 1s;
      -ms-transition:all 1s;
      transition:all 1s;
    }
/*****************************************************************************************************************/

Les templates 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="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>&nbsp;</span></div>
   
    <!-- END bottom --><!-- BEGIN footer_table -->
    </div><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

Si tu as besoin des templates : index_body, index_box, je les copierais à la suite alors !

Alors, pour ton problème au niveau de la liste des sujets, tu peux simplement modifier les "width" (largeur) dans le CSS. Il faut surtout que tu changes le "bloc_sujets" qui est à 950px de largeur et le "sujets_stats" qui est à 900px.

Et pour ton problème d'affichage des sujet, ça ne vient pas du code d'Alumine mais de ta fiche qui est trop grande. Donc soit tu élargis ton forum (tu devrais pouvoir le faire en passant par panneau d'admin > général > configuration (sous Forum) > [La largeur pour ce thème doit être au minimum de 700 ou 70%] Largeur du forum (nombre ou %)) soit tu réduis la largeur de la fiche. Et pour le contexte ici, c'est pareil. Dans ta fiche, tu as un "width:450px;" à un moment qui fait ressortir le texte du reste.

Ah d'accord !
Ca parait plus clair d'un coup, merci beaucoup :) !