AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le deal à ne pas rater :
Jeux, jouets et Lego : le deuxième à -50% (large sélection)
Voir le deal

    Changer les statistiques de place.

    Kahlan
    Kahlan
    FémininAge : 37Messages : 371

    Mer 28 Jan 2015 - 16:35

    Hello tout le monde,

    Je suis désolée de vous déranger mais j'aurais souhaité personnaliser un très joli codage proposé en LS. Il s'agit du codage d'Alzufen : Catégories bord arrondies - Grey & Black Style.

    J'aurais aimé mettre les statistiques : dernier posteur - date - titre du sujet - nombre de message et nombre de sujet dans l'encadré réservé à la description du forum. Si jamais vous avez besoin d'un petit schéma pour mieux comprendre ce que je veux dire, n'hésitez pas à me le dire car je ne sais pas toujours m'exprimer :-)

    Je ne suis pas douée en codage donc je me lance pas trop à tester ce changement de place XD En revanche, je peux le faire toute seule avec de bonnes explications XD

    Merci pour votre aide.

    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 37Messages : 371

    Sam 31 Jan 2015 - 17:34

    petit up =)
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Sam 31 Jan 2015 - 18:13

    Hello Kahlan :)

    Tu veux inverser le placement des 2 colonnes (colonne description / colonne stat + dernier message) comme ceci ?
    Changer les statistiques de place. Yo6bk1J

    Ou bien tu veux mettre les stats + dernier message à l'intérieur du bloc de description ? Si oui, je pense qu'un schéma aiderait à mieux comprendre. Wink
    Tu veux qu'elles soient sur la gauche ? Sur la droite ? Comment se place la description ensuite ? Beaucoup de questions tu vois, sans schéma pas facile de te guider (^-^)

    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 37Messages : 371

    Sam 31 Jan 2015 - 18:41

    Bonsoir Nihil,

    En faites, je voudrais mettre tout ça dans le cadre des descriptions. J'ai réalisé un petit schéma :

    Changer les statistiques de place. 1422726093-schema

    Merci beaucoup pour ton aide =)
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mar 3 Fév 2015 - 21:17

    Pourrais tu rajouter ton template index_box ainsi que ton css s'il te plait :) ?

    Petite question question supplémentaire, actuellement les informations messages / sujets sont séparées du bloc "dernier message". Tu veux les mettre dans une seule boite c'est bien ça ?

    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 37Messages : 371

    Mer 4 Fév 2015 - 17:40

    Je te donne mon template :

    Code:
        <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
        <tr>
          <td valign="bottom">
              <!-- BEGIN switch_user_logged_in -->
              <span class="gensmall">{LAST_VISIT_DATE}<br/>
              {CURRENT_TIME}<br/>
              </span>
              <!-- END switch_user_logged_in -->
              <div class="nav">
                <a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}
              </div>
          </td>
          <td class="gensmall" align="right" valign="bottom">
              <!-- BEGIN switch_user_logged_in -->
              <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br/>
              <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br/>
              <!-- END switch_user_logged_in -->
              <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
          </td>
        </tr>
        </table>
        <!-- BEGIN catrow -->
        <!-- BEGIN tablehead --><div class="cat_titre">
          {catrow.tablehead.L_FORUM}
        </div>
        <!-- END tablehead -->
        <!-- BEGIN cathead -->
        <!-- END cathead -->
        <!-- BEGIN forumrow --><div class="cat_forum"><div class="forum_titre">
          <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
        </div>
          <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" style="display: inline-block; border-radius: 15px;" /><div class="last_post_stats">
          <div class="last_post">
              {catrow.forumrow.LAST_POST}
          </div>
          <div class="stats">
              {catrow.forumrow.TOPICS} Sujets<br/>
              {catrow.forumrow.POSTS} Messages
          </div>
        </div>
        <div class="descri_forum">
            {catrow.forumrow.FORUM_DESC}
        </div>
        <div class="bloc_sf">
        <img src="http://image.noelshack.com/fichiers/2014/37/1410479048-200x200.jpg" alt="sous-forums" class="image_sf" />
        <img src="http://img15.hostingpics.net/pics/183380sousF.png" alt="fond_sforum" class="fond_sforum" />
                  <div class="s_forum" id="s_forum">
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                    <script type="text/javascript">jQuery('#s_forum').html(jQuery('#s_forum').html().replace(/, /g,'<br />')).removeAttr('id');</script>
                  </div>
        </div>
        </div>
        <!-- END forumrow -->
        <!-- BEGIN catfoot -->
        <!-- END catfoot -->
        <!-- BEGIN tablefoot -->
        <!-- END tablefoot -->
        <!-- END catrow -->

    Mon CSS entier si cela peut t'aider XD

    Code:
    /**************************************************************************
                      BASE PRINCIPAL DU FORUM
    **************************************************************************/

    /*bannière de fond*/
    body {
    background-position: top center;
    background-position: top center;
    background-color: #ECE5DF;
    background-attachment: scroll !important;
      background-image: url('http://image.noelshack.com/fichiers/2014/48/1417016080-artacademyv1d.png');
      background-repeat: no-repeat, repeat;}

    a:link
    {
     text-decoration:none;
    }

    /**************************************************************************
                      CATEGORIE
    **************************************************************************/

    /* Titre des Catégories */

    .cat_titre {
        height: 65px;
        border: 4px solid #000;
        border-radius: 15px;
        text-align: center;
    }

    .cat_titre h2 {
        margin: -5px auto 0;
        font: 42px 'Pacifico';
    }

    /* Bloc des Forums */

    .cat_forum {
        width: 892px;
        height: 260px;
        margin: auto;
    }

    /* Titre des Forums */

    .forum_titre {
        text-align: center;
    }

    .forum_titre a,
    .forum_titre a:visited,
    .forum_titre a:link {
        font: 34px 'Marck Script';
        color: black;
        transition: 1s all;
    }

    .forum_titre a:hover {
        color: white;
    }

    /* Derniers Messages et Statistiques du forum */

    .last_post_stats {
        display: inline-block;
        margin-right: 10px;
        margin-left: 10px;
        vertical-align: top;
    }

    .last_post {
        width: 100px;
        height: 122px;
        margin-bottom: 5px;
        padding-top: 30px;
        border: 1px solid #000;
        border-radius: 10px;
        text-align: center;
        font: 14px 'gabriela';
        background: #282828;
    }

    .last_post .gensmall {
        font: 14px 'gabriela';
    }

    .last_post a,
    .last_post a:visited,
    .last_post a:link {
        color: grey;
    }

    .last_post a:hover {
        color: darkgrey;
    }

    .stats {
        width: 100px;
        height: 40px;
        border: 1px solid #000;
        border-radius: 10px;
        text-align: center;
        font: 16px 'gabriela';
        background: #282828;
    }

    /* Description du Forum */

    .descri_forum {
        display: inline-block;
        width: 400px;
        height: 180px;
        margin-right: 10px;
        padding: 10px;
        border: 1px solid #000;
        border-radius: 25px;
        text-align: justify;
        font: 12px 'gabriela';
        vertical-align: top;
        background: #282828;
    }

    /* Bloc des Sous-Forums */

    .bloc_sf {
        display: inline-block;
        position: relative;
        width: 200px;
        height: 200px;
        overflow: hidden;
    }

    .bloc_sf .image_sf {
        z-index: 997;
        position: absolute;
        border-radius: 25px;
        opacity: 1;
        transition: 1s all;
    }

    .bloc_sf:hover .image_sf {
        opacity: 0;
    }

    .fond_sforum {
        z-index: 998;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 25px;
    }

    .s_forum {
        z-index: 999;
        position: relative;
        width: 150px;
        height: 100px;
        margin-top: 50px;
        margin-left: 25px;
        overflow: auto;
        text-align: center;
        font: 11px 'gabriela';
        opacity: 0;
        transition: 2s all;
    }

    .bloc_sf:hover .s_forum {
        opacity: 1;
    }

    .s_forum a,
    .s_forum a:visited,
    .s_forum a:link {
        color: black;
    }

    .s_forum a:hover {
        color: grey;
    }

    /**************************************************************************
                      MESSAGE + LA SIGNATURE
    **************************************************************************/

    .ILTMGlobale
    {
      margin:10px 10px 10px -10px;
      padding:10px 10px 10px 20px;
      min-height:320px;
      background:#fbf8f5;
      border-bottom:3px solid white;
      font-size:11px;
    }

    .postdetails
    {
      font-size:8px;
      padding-right:20px;
    }

    .ILTMEdite
    {
      float:right;
      margin:-16px 0px 0px 0px;
    }

    .ILTMMessage
    {
      width:500px;
      margin:10px auto;
      max-width:500px;
      overflow:hidden;
    }
    .ILTMTitreSignature
    {
      font-size:12;
      color:#d7cabe;
      font-weight:bold;
      text-transform:uppercase;
      width:450px;
      margin:10px auto -6px;
    }
    .ILTMSignature, .signature_div
    {
      width:490px;
      margin:0px auto 10px;
      padding:5px;
      max-width:500px;
      background:white;
      overflow:hidden;
    }

    .ILTMSignature img, .signature_div img
    {
      max-width:490px;
    }

    .EspaceSignature
    {
      margin-top:-30px;
    }

    /**************************************************************************
                         PROFILS
    **************************************************************************/

    .ILTPGlobale
    {
      margin:10px 0px 20px 10px;
      padding:10px;
      min-height:320px;
      background:#fbf8f5;
      border-bottom:3px solid white;
      border-right:1px solid white;
      font-size:11px;
    }

    .ILTPTitre
    {
      margin:-20px 0px -4px 0px;
      font-size:15px;
      text-align:center;
    }

    .ILTPRang
    {
      margin:0px;
      font-size:8px;
      text-align:center;
      text-transform:uppercase;
      line-height:10px;
    }

    .ILTPAvatar
    {
      border:4px solid #f0eae4;
      margin:7px 0px;
    }

    .ILTPSoustitre
    {
      font-size:12;
      color:#d7cabe;
      font-weight:bold;
      text-align:center;
      text-transform:uppercase;
      margin:5px auto -6px;
    }

    .ILTPProfil
    {
      background:#f0eae4;
      font-size:9px;
      padding:5px;
      color:#776654;
      margin:0px auto 5px;
      text-align: justify;
    }

    .ILTPProfil img
    {
      border:4px solid white;
      margin:5px 0px;
      width:190px;
     
    }

    .ILTPLien
    {
      text-align:center;
      background:#f0eae4;
      padding:5px;
      margin:0px auto;
    }

    /**************************************************************************
                         SUJET ADMIN
    **************************************************************************/

    .LSCONTENU
    {font-family:'arial';
      font-size: 11px;
      text-align: justify;
      width: 410px}

    .LSTITRE
    {border: 1px solid silver;
      box-shadow: 0px 0px 1px silver;
      width: 480px;
      background-color : white;
      text-align:justify;
      line-height: 14px;}

    .LSNOM
    {font-family: 'Kaushan Script', cursive;
      font-size: 20px; color:#E55451;
      text-align: center;
      text-shadow: silver 1px 0px 1px;
      margin-top: 2px;}

    .LSTITRE2
    {font-family:'Carrois Gothic SC';
      text-align: center;
      margin-top: 2px;}

    .LSCADRE
    {border-bottom:3px solid #E55451;
      width:310px;
      margin-top: 4px;}

    .LSTITRE3
    {font-family: 'Patrick Hand', cursive;
      text-transform: uppercase;
      text-shadow: 0 0 1px silver;
      font-size: 14px;
      text-align: center;}

    .LSCADRE2
    {width:220px;
      height:250px;
      background-color:#FFFFFF;
      text-align:justify;
      border: solid 1px silver;
      padding: 5px;
      font-family: arial;
      font-size: 9px;
      overflow:auto;}

    .LSCADRE3
    {width:440px;
      height:150px;
      background-color:#FFFFFF;
      text-align:justify;
      border: solid 1px silver;
      padding: 5px;
      font-family: arial;
      font-size: 9px;
      overflow:auto;}

    Pour répondre à ta question, oui je voudrais que ce soit dans une boîte (comme sur le schéma) :-)
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mar 10 Fév 2015 - 0:33

    Allez hop on y va petit à petit Very Happy

    Toute la partie "dernier message et statistique" se situe ici :
    Code:
    <div class="last_post_stats">
      <div class="last_post">
          {catrow.forumrow.LAST_POST}
      </div>
      <div class="stats">
          {catrow.forumrow.TOPICS} Sujets<br/>
          {catrow.forumrow.POSTS} Messages
      </div>
    </div>

    Pour mettre les statistiques en haut, il faut inverser
    Code:
      <div class="last_post">
          {catrow.forumrow.LAST_POST}
      </div>

    et
    Code:
      <div class="stats">
          {catrow.forumrow.TOPICS} Sujets<br/>
          {catrow.forumrow.POSTS} Messages
      </div>

    Et la description du forum se trouve ici :
    Code:
    <div class="descri_forum">
        {catrow.forumrow.FORUM_DESC}
    </div>

    On va donc déplacer le code du bloc "dernier message + statistique" à la fin de la description du forum :
    Code:
    <div class="descri_forum">
        {catrow.forumrow.FORUM_DESC}
        <div class="last_post_stats">
          <div class="stats">
              {catrow.forumrow.TOPICS} Sujets<br/>
              {catrow.forumrow.POSTS} Messages
          </div>
          <div class="last_post">
              {catrow.forumrow.LAST_POST}
          </div>
        </div>
    </div>


    Ensuite, il va falloir que tu touches un peu au CSS ♥, on te laisse toucher un peu pour que tu essayes par toi même :p

    Petite piste : pense à retirer la hauteur et les bordures sur .last_post et sur .stats, jouer avec les marges, etc :)

    Pour qu'on puisse t'aider pour la suite, n'hésite pas à rajouter le lien de ton forum pour qu'on te guide en ayant directement le résultat sous les yeux ♥

    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 37Messages : 371

    Dim 15 Fév 2015 - 15:16

    Bonjour,

    Je vous remercie beaucoup pour votre aide. J'ai effectué les manœuvres indiquées. Je touche actuellement le CSS mais je ne sais pas comment dire à la boîte "LAST POST et STATS" de se placer à droite de la description ><

    J'ai mis ainsi :

    /* Titre des Catégories */

    .cat_titre {
    height: 65px;
    border: 4px solid #000;
    border-radius: 15px;
    text-align: center;
    }

    .cat_titre h2 {
    margin: -5px auto 0;
    font: 42px 'Pacifico';
    }

    /* Bloc des Forums */

    .cat_forum {
    width: 800px;
    height: 260px;
    margin: auto;
    }

    /* Titre des Forums */

    .forum_titre {
    text-align: center;
    }

    .forum_titre a,
    .forum_titre a:visited,
    .forum_titre a:link {
    font: 34px 'Marck Script';
    color: black;
    transition: 1s all;
    }

    .forum_titre a:hover {
    color: white;
    }

    /* Derniers Messages et Statistiques du forum */

    .last_post_stats {
    background- position : top right;
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
    vertical-align: top;
    }

    .last_post {
    background- position : top right;
    width: 150px;
    height: 50px;
    margin-bottom: 5px;
    padding-top: 30px;
    border: 1px solid #000;
    border-radius: 10px;
    text-align: center;
    font: 14px 'gabriela';
    background: #282828;
    }

    .last_post .gensmall {
    font: 14px 'gabriela';
    }

    .last_post a,
    .last_post a:visited,
    .last_post a:link {
    color: grey;
    }

    .last_post a:hover {
    color: darkgrey;
    }

    .stats {
    background- position : top right;
    width: 150px;
    height: 20px;
    border: 1px solid #000;
    border-radius: 10px;
    text-align: center;
    font: 16px 'gabriela';
    background: #282828;
    }

    /* Description du Forum */

    .descri_forum {
    display: inline-block;
    width: 400px;
    height: 180px;
    margin-right: 10px;
    padding: 10px;
    border: 1px solid #000;
    border-radius: 25px;
    text-align: justify;
    font: 12px 'gabriela';
    vertical-align: top;
    background: #282828;
    }

    /* Bloc des Sous-Forums */

    .bloc_sf {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
    }

    .bloc_sf .image_sf {
    z-index: 997;
    position: absolute;
    border-radius: 25px;
    opacity: 1;
    transition: 1s all;
    }

    .bloc_sf:hover .image_sf {
    opacity: 0;
    }

    .fond_sforum {
    z-index: 998;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 25px;
    }

    .s_forum {
    z-index: 999;
    position: relative;
    width: 150px;
    height: 100px;
    margin-top: 50px;
    margin-left: 25px;
    overflow: auto;
    text-align: center;
    font: 11px 'gabriela';
    opacity: 0;
    transition: 2s all;
    }

    .bloc_sf:hover .s_forum {
    opacity: 1;
    }

    .s_forum a,
    .s_forum a:visited,
    .s_forum a:link {
    color: black;
    }

    .s_forum a:hover {
    color: grey;
    }

    Je vous communique le lien du forum : http://evenstar.forumactif.com/

    Pour faire un espace entre les boutons et la description, je dois diminuer la taille de l'un des deux ? J'ai un peu trop bidouillé et je n'arrive plus à mettre l'image 200x200 avec les sous-forums à côté du bloc des descriptions >< D'ailleurs, je fais comment pour raccourcir la taille de la description mais garder le fond à une taille fixe ?

    Merci beaucoup pour votre aide.
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 15 Fév 2015 - 18:07

    Je crois qu'il y a un petit problème dans le template, pourrais-tu nous le copier / coller après la modification s'il te plait :) ?

    En plus j'ai zappé de te proposer une modification qui va te simplifier la vie x).

    De même pour le CSS, il y a écrit :
    Code:
    .last_post_stats {
    background- position : top right;
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
    vertical-align: top;
    }

    Mais sur ton forum dans l'inspecteur d'élément on peut voir :
    Code:
    .last_post_stats {
    float : top right;
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
    vertical-align: top;
    }

    Pas exactement la même chose o-0

    Au passage /!\, float : top right; n'est pas une valeur acceptée en fait, tu peux mettre left ou right, mais top ou bottom. xD (oui oui, je sais, c'est très tentant pourtant :p)
    Si tu veux en savoir plus, tu peux lire les étapes du cursus codage, par exemple celle ci : Partie 1 - Etape 6 : Disposer ses éléments : le "float".

    Ne t'inquiète pas, on va revenir sur les différents point petit à petit jusqu'à ce que tu obtiennes exactement ce que tu veux :)

    PS : n'hésite pas à utiliser la balise code et non pas quote pour ton code ♥

    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 37Messages : 371

    Dim 15 Fév 2015 - 18:13

    Oui je crois que j'ai fais une bêtise en voulant mettre "sujets" et "messages" sur la même ligne et dans le même cadre que les stats du dernier poste :-/ Je mets le template que j'ai modifié :

    Code:
            <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
            <tr>
              <td valign="bottom">
                  <!-- BEGIN switch_user_logged_in -->
                  <span class="gensmall">{LAST_VISIT_DATE}<br/>
                  {CURRENT_TIME}<br/>
                  </span>
                  <!-- END switch_user_logged_in -->
                  <div class="nav">
                    <a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}
                  </div>
              </td>
              <td class="gensmall" align="right" valign="bottom">
                  <!-- BEGIN switch_user_logged_in -->
                  <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br/>
                  <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br/>
                  <!-- END switch_user_logged_in -->
                  <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
              </td>
            </tr>
            </table>
            <!-- BEGIN catrow -->
            <!-- BEGIN tablehead --><div class="cat_titre">
              {catrow.tablehead.L_FORUM}
            </div>
            <!-- END tablehead -->
            <!-- BEGIN cathead -->
            <!-- END cathead -->
            <!-- BEGIN forumrow --><div class="cat_forum"><div class="forum_titre">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            </div>
              <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" style="display: inline-block; border-radius: 15px;" />
                  <div class="descri_forum">
            {catrow.forumrow.FORUM_DESC}
            <div class="last_post_stats">
              {catrow.forumrow.TOPICS} sujets, {catrow.forumrow.POSTS} messages<br/>
                    {catrow.forumrow.LAST_POST}
              </div>
            <div class="bloc_sf">
            <img src="http://image.noelshack.com/fichiers/2014/37/1410479048-200x200.jpg" alt="sous-forums" class="image_sf" />
                              <div class="s_forum" id="s_forum">
                        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                        <script type="text/javascript">jQuery('#s_forum').html(jQuery('#s_forum').html().replace(/, /g,'<br />')).removeAttr('id');</script>
                      </div>
            </div>
            </div>
            <!-- END forumrow -->
            <!-- BEGIN catfoot -->
            <!-- END catfoot -->
            <!-- BEGIN tablefoot -->
            <!-- END tablefoot -->
            <!-- END catrow -->

    Merci beaucoup pour le lien des explications car j'avoue que je ne sais pas quoi mettre pour bouger le cadre des stats. D'habitude je mets tout sous code mais je ne sais pas ce que j'ai fichu :-/ Désolée ! Je ferais attention :-)

    Merci pour ton aide :-)
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Lun 16 Fév 2015 - 17:48

    Alors on va remplacer toute cette zone là :
    Code:
          <div class="descri_forum">
    {catrow.forumrow.FORUM_DESC}
    <div class="last_post_stats">
      {catrow.forumrow.TOPICS} sujets, {catrow.forumrow.POSTS} messages<br/>
            {catrow.forumrow.LAST_POST}
      </div>
    <div class="bloc_sf">
    <img src="http://image.noelshack.com/fichiers/2014/37/1410479048-200x200.jpg" alt="sous-forums" class="image_sf" />
                      <div class="s_forum" id="s_forum">
                {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                <script type="text/javascript">jQuery('#s_forum').html(jQuery('#s_forum').html().replace(/, /g,'<br />')).removeAttr('id');</script>
              </div>
    </div>
    </div>

    Par ceci :
    Code:
    <div class="descri_forum">
        <div class="description-forum">{catrow.forumrow.FORUM_DESC}</div>
        <div class="last_post_stats">
            <div class="stats">
                {catrow.forumrow.TOPICS} sujets, {catrow.forumrow.POSTS} messages<br/>
                <div class="last_post">{catrow.forumrow.LAST_POST}</div>
            </div>
            <div class="bloc_sf">
                <img src="http://image.noelshack.com/fichiers/2014/37/1410479048-200x200.jpg" alt="sous-forums" class="image_sf" />
                <div class="s_forum" id="s_forum">
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                    <script type="text/javascript">jQuery('#s_forum').html(jQuery('#s_forum').html().replace(/, /g,'<br />')).removeAttr('id');</script>
                </div>
            </div>
        </div> <!-- fermeture de .last_post_stats -->
    </div>

    Avoir une base "propre" des éléments dans le template va nous permettre de simplifier la modification du CSS.

    On aura donc :
    Code:
    .description-forum {
        float: left;
    }

    .last_post_stats {
      float: right;
    }

    Avec ceci, est ce qu'on est mieux ? Pense à laisser ce code sur ton forum (même si ça fonctionne mieux) pour qu'on regarde ce qui ne va pas :p

    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 37Messages : 371

    Lun 16 Fév 2015 - 20:00

    Merci beaucoup pour ton aide.

    J'ai suivi tes recommandations mais je crois que j'ai encore fais une connerie ><

    Code:
            <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
            <tr>
              <td valign="bottom">
                  <!-- BEGIN switch_user_logged_in -->
                  <span class="gensmall">{LAST_VISIT_DATE}<br/>
                  {CURRENT_TIME}<br/>
                  </span>
                  <!-- END switch_user_logged_in -->
                  <div class="nav">
                    <a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}
                  </div>
              </td>
              <td class="gensmall" align="right" valign="bottom">
                  <!-- BEGIN switch_user_logged_in -->
                  <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br/>
                  <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br/>
                  <!-- END switch_user_logged_in -->
                  <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
              </td>
            </tr>
            </table>
            <!-- BEGIN catrow -->
            <!-- BEGIN tablehead --><div class="cat_titre">
              {catrow.tablehead.L_FORUM}
            </div>
            <!-- END tablehead -->
            <!-- BEGIN cathead -->
            <!-- END cathead -->
            <!-- BEGIN forumrow --><div class="cat_forum"><div class="forum_titre">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            </div>
              <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" style="display: inline-block; border-radius: 15px;" />
                          <div class="descri_forum">
            <div class="description-forum">{catrow.forumrow.FORUM_DESC}</div>
            <div class="last_post_stats">
                <div class="stats">
                    {catrow.forumrow.TOPICS} sujets, {catrow.forumrow.POSTS} messages<br/>
                    <div class="last_post">{catrow.forumrow.LAST_POST}</div>
                </div>
                <div class="bloc_sf">
                    <img src="http://image.noelshack.com/fichiers/2014/37/1410479048-200x200.jpg" alt="sous-forums" class="image_sf" />
                    <div class="s_forum" id="s_forum">
                        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                        <script type="text/javascript">jQuery('#s_forum').html(jQuery('#s_forum').html().replace(/, /g,'<br />')).removeAttr('id');</script>
                    </div>
                </div>
            </div> <!-- fermeture de .last_post_stats -->
        </div>
            <!-- END forumrow -->
            <!-- BEGIN catfoot -->
            <!-- END catfoot -->
            <!-- BEGIN tablefoot -->
            <!-- END tablefoot -->
            <!-- END catrow -->

    Code:
    /**************************************************************************
                      CATEGORIE
    **************************************************************************/

        /* Titre des Catégories */

        .cat_titre {
      background-image: url('http://img11.hostingpics.net/pics/315898slidebarhaut.png');
            height: 100px;
            text-align: center;
        }

        .cat_titre h2 {
              text-align: center;
      font-family: 'Great Vibes';
          font-size: 36px;
      color: #6C7446;
        }

        /* Bloc des Forums */

        .cat_forum {
            width: 860px;
            height: 260px;
            margin: auto;
      background-color: #D0B380;
     
        }

        /* Titre des Forums */

        .forum_titre {
            text-align: center;
          }

    .forum_titre a,
    .forum_titre a:visited,
    .forum_titre a:link {
    font-family: 'Great Vibes';
          font-size: 36px;
      color: #6C7446;
    }

    .forum_titre a:hover {
    color: #6C7446;
    }
          /* Derniers Messages et Statistiques du forum */

        .description-forum {
            float: left;
        }

        .last_post_stats {
          float: right;
        }

        .last_post_stats {
            display: inline-block;
            margin-right: 10px;
            margin-left: 10px;
            vertical-align: top;
      text-align: center;
        }

        .last_post {
            width: 200px;
            height: 90px;
            margin-bottom: 5px;
            padding-top: -30px;
            text-align: center;
            font: 14px 'gabriela';
            background: #DBC08E;
        }

        .last_post .gensmall {
            font: 14px 'gabriela';
        }

        .last_post a,
        .last_post a:visited,
        .last_post a:link {
            color: grey;
        }

        .last_post a:hover {
            color: darkgrey;
        }

        .stats {
     float: right;
            width: 200px;
            height: 20px;
            text-align: center;
            font: 12px 'gabriela';
            background: #DBC08E;
        }

        /* Description du Forum */

        .descri_forum {
            display: inline-block;
            width: 500px;
            height: 180px;
            margin-right: 10px;
            padding: 10px;
            border: 1px solid #6C7446;
            border-radius: 25px;
            text-align: justify;
            font: 12px 'gabriela';
            vertical-align: top;
            background: #D8BA89;
        }

        /* Bloc des Sous-Forums */

        .bloc_sf {
            display: inline-block;
            position: relative;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }

        .bloc_sf .image_sf {
            z-index: 997;
            position: absolute;
            border-radius: 25px;
            opacity: 1;
            transition: 1s all;
        }

        .bloc_sf:hover .image_sf {
            opacity: 0;
        }

        .fond_sforum {
            z-index: 998;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: 25px;
        }

        .s_forum {
            z-index: 999;
            position: relative;
            width: 150px;
            height: 100px;
            margin-top: 50px;
            margin-left: 25px;
            overflow: auto;
            text-align: center;
            font: 11px 'gabriela';
            opacity: 0;
            transition: 2s all;
        }

        .bloc_sf:hover .s_forum {
            opacity: 1;
        }

        .s_forum a,
        .s_forum a:visited,
        .s_forum a:link {
            color: black;
        }

        .s_forum a:hover {
            color: grey;
        }

    La partie "sous-forum" s'est déplacée ainsi que le lien pour le panneau admin O_o
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Lun 16 Fév 2015 - 20:38

    Oups, j'avais pas vu qu'il y avait un petit bug dans ton template ^^'

    Il y a un problème de fermeture de balise, on va remplacer :
    Code:
    <!-- END forumrow -->

    Par
    Code:
    </div>
    <!-- END forumrow -->

    Dans le CSS de .descri_forum, on peut aussi ajouter une petite marge à gauche:
    Code:
    margin-left: 10px;

    Petite question, tu voudrais que le bloc avec la description + les sous forums + les stat prenne le reste de l'espace vide à droite ou pas ?

    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 37Messages : 371

    Lun 16 Fév 2015 - 20:52

    Je ne comprends pas :-/ Je suis tes indications mais maintenant il y a carrément plus de codage :-/
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Lun 16 Fév 2015 - 21:05

    Tiens, voici un template qui sur mon forum fonctionne, peux tu me dire si c'est bon pour toi ? :
    Code:
    <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
    <tr>
      <td valign="bottom">
          <!-- BEGIN switch_user_logged_in -->
          <span class="gensmall">{LAST_VISIT_DATE}<br/>
          {CURRENT_TIME}<br/>
          </span>
          <!-- END switch_user_logged_in -->
          <div class="nav">
            <a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}
          </div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
          <!-- BEGIN switch_user_logged_in -->
          <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br/>
          <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br/>
          <!-- END switch_user_logged_in -->
          <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
    </tr>
    </table>
    <!-- BEGIN catrow -->
    <!-- BEGIN tablehead --><div class="cat_titre">
      {catrow.tablehead.L_FORUM}
    </div>
    <!-- END tablehead -->
    <!-- BEGIN cathead -->
    <!-- END cathead -->
    <!-- BEGIN forumrow -->
    <div class="cat_forum">
        <div class="forum_titre">
          <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
        </div>
       
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" style="display: inline-block; border-radius: 15px;" />
       
        <div class="descri_forum">
            <div class="description-forum">{catrow.forumrow.FORUM_DESC}</div>
           
            <div class="last_post_stats">
                <div class="stats">
                    {catrow.forumrow.TOPICS} sujets, {catrow.forumrow.POSTS} messages<br/>
                </div>
                <div class="last_post">{catrow.forumrow.LAST_POST}</div>
                <div class="bloc_sf">
                    <img src="http://image.noelshack.com/fichiers/2014/37/1410479048-200x200.jpg" alt="sous-forums" class="image_sf" />
                    <div class="s_forum" id="s_forum">
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                    <script type="text/javascript">jQuery('#s_forum').html(jQuery('#s_forum').html().replace(/, /g,'<br />')).removeAttr('id');</script>
                    </div>
                </div>
            </div> <!-- fermeture de .last_post_stats -->
           
        </div> <!-- fermeture de .descri_forum -->
       
    </div> <!-- fermeture de .cat_forum -->

    <!-- END forumrow -->
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
    <!-- END tablefoot -->
    <!-- END catrow -->

    Une fois que ce template marchera, on se concentrera uniquement sur le CSS :p

    Courage, ne te décourage pas, je te promets qu'on va y arriver ♥

    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 37Messages : 371

    Lun 16 Fév 2015 - 21:09

    J'ai changé le template mais le codage est bien revenu sauf que la partie sous-forum n'est pas à la bonne place :-/

    Je désespère car je n'y comprends pas grand chose en codage XD J'ai l'impression de faire que des bêtises XD
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Lun 16 Fév 2015 - 21:29

    T'inquiète pas XD, c'est de ma faute aussi j'aurai du regarder l'ensemble du template et non pas juste la partie à modifier.

    On va commencer par décoler l'image new / no new / lock de la description en ajoutant au CSS de .descri_forum une marge à gauche :
    Code:
    margin-left: 10px;

    Ensuite on va donner une largeur aux descriptions texte, en ajoutant au CSS de .description-forum une width:
    Code:
    width: 250px;

    Puis on va bien replacer l'image des sous forums. Pour l'instant elle flotte n'importe où, on va régler ça en changeant le CSS de .bloc_sf .image_sf en la positionnant :
    Code:
    top: 0;
    left: 0;

    Comme cela, on devrait déjà avoir un résultat un peu mieux !

    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 37Messages : 371

    Lun 16 Fév 2015 - 21:38

    Merci beaucoup pour ta patience :-) J'ai fais les modifications demandées. La partie sous-forum est plus visible mais elle veut pas bouger XDDD
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mer 18 Fév 2015 - 19:15

    Comment ça bouger °-° ? Tu veux la mettre où exactement ? *perdue*

    Si tu veux changer ses dimensions, il faut toucher le CSS de .bloc_sf :)

    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 37Messages : 371

    Jeu 19 Fév 2015 - 11:34

    Bah en faites sur le forum, en touchant au description du forum, le bloc sf. est parti sur les descriptions :

    https://i.servimg.com/u/f38/18/93/04/36/sans_t10.jpg

    Elle devrait se trouver à droite de la description et des stats :-)
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Ven 20 Fév 2015 - 23:46

    Ok, j'avais mal compris * à l'ouest *

    A droite dans le même bloc ou bien à droite à l'extérieur dans l'espace vide ?
    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 37Messages : 371

    Sam 21 Fév 2015 - 0:58

    Je me suis sûrement mal exprimée ^-^ J'aimerai bien qu'elle soit dans l'espace vide ^-^
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Sam 21 Fév 2015 - 13:51

    Je viens de re-regarder ton schéma, tu étais très claire, désolée o-o, j'étais totalement à l'ouest. Dans ton template, on va donc mettre la zone "sous forum" après la description.

    Alors, la zone sous forum est ici :
    Code:
    <div class="bloc_sf">
        <img src="http://image.noelshack.com/fichiers/2014/37/1410479048-200x200.jpg" alt="sous-forums" class="image_sf" />
        <div class="s_forum" id="s_forum">
        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        <script type="text/javascript">jQuery('#s_forum').html(jQuery('#s_forum').html().replace(/, /g,'<br />')).removeAttr('id');</script>
        </div>
    </div>

    Et nous on va la déplacer pour la mettre juste après cette ligne là :
    Code:
    </div> <!-- fermeture de .descri_forum -->

    Ensuite dans le CSS de .bloc_sf, on remplace position: absolute; par position: relative;. Si on le laisse, ça va causer un petit problème x)
    Même chose, pour éviter un mauvais placement, on retire le float: right;
    Et enfin, on rajoute une ligne pour l'alignement vertical : vertical-align: top;

    Désolée encore pour avoir mal compris, tu étais très claire :hug:
    • Revenir en haut
    Kahlan
    Kahlan
    FémininAge : 37Messages : 371

    Sam 21 Fév 2015 - 14:45

    OOOoooh non ! Ne t'excuse pas ! Nous nous sommes pas comprises XD

    Merci beaucoup pour ton aide. Tes explications étaient toujours très claires, elles m'ont beaucoup aidées et j'ai appris des choses en codage grâce à toi :-)

    Pour décoller les images OLD/NEW/LOCK du bord du cadre, je mets une margin-right, non ? si oui je ne vois pas dans quelle partie du CSS :-/

    Pour mettre une hauteur prédéfinie au description du forum, je rajoute height dans la partie .description-forum ?

    J'aimerai que le titre des catégories se trouve au milieu de la création et ne flotte pas au-dessus. Je fais comment ?
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Sam 21 Fév 2015 - 16:45

    Kahlan a écrit:Pour décoller les images OLD/NEW/LOCK du bord du cadre, je mets une margin-right, non ? si oui je ne vois pas dans quelle partie du CSS :-/

    C'est normal, dans le codage de base il n'y a rien dans le CSS pour modifier cette image.
    Dans ton template, elle se trouve ici :
    Code:
    <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" style="display: inline-block; border-radius: 15px;" />

    On peut voir qu'elle a déjà du CSS directement sur la balise inline : style="display: inline-block; border-radius: 15px;"

    Le mieux est de retirer ce CSS et plutôt de lui mettre une classe, ici je met .f_img_new_no_new_old :
    Code:
    <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="f_img_new_no_new_old" />

    Ensuite dans le CSS on va rajouter ceci :
    Code:
    /* Image new no new old pour un forum */
    .f_img_new_no_new_old {
        display: inline-block;
        border-radius: 15px; /* bords arrondi */
    }

    Tu n'as plus qu'à rajouter ton CSS à toi ici ♥


    Pour mettre une hauteur prédéfinie au description du forum, je rajoute height dans la partie .description-forum ?
    Bingo, tu lui rajoutes une height effectivement. Pense à mettre un overflow: auto pour la barre de défilement aussi. :)
    Attention néanmoins, certains de tes forums ont déjà une taille définie dans la description de leur forum :

    Exemple :
    Code:
    <span style="margin-left: 10px; overflow: auto; height: 190px;"><strong>annonces - questions - points & absences.</strong> → cette section vous permet de vous tenir au courant de toutes les mises à jour faites sur le forum, les lire régulièrement est donc nécessaire. elle regroupe également toutes les questions que vous posez mais aussi celles des invités. vous trouverez aussi les sujets concernant le système de points et ceux pour les absences.
    </span>
    Tu peux retirer cette span autour, tu n'en as pas besoin si tu définis déjà autre part la hauteur Wink


    J'aimerai que le titre des catégories se trouve au milieu de la création et ne flotte pas au-dessus. Je fais comment ?
    Pour avoir quelque chose comme ceci ?
    Changer les statistiques de place. QAhIIbh
    Si oui, la méthode la plus rapide est de rajouter à .cate_titre h2 un padding-top de la valeur de ton choix :)
    Code:
    padding-top: 25px;
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Mer 8 Mai 2024 - 14:18