AccueilRechercherS'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.


    Index-Box

    Bejoy
    Bejoy
    FémininAge : 47Messages : 7

    le Sam 8 Aoû 2020 - 12:31

    Bonjour à tous, voilà, j'ai pris plusieurs thèmes sur Never-Utopia pour recoder mon forum.
    Et là, j'ai un souci car chez moi, le codage que j'ai refait fonctionne très bien mais on me dis qu'il est bancale et mal agencé et du coup, il risque de provoquer des instabilités sur d'autres forums. J'aurai aimé savoir si vous accepteriez de le regarder et me dire là où j'ai fait des erreurs et surtout comment les corriger. Merci de votre aide.
    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="cadrecat">
    <div class="cat">
    <div class="titrecat">
    <span>{catrow.tablehead.L_FORUM}</span>
    </div>
    <!-- END tablehead -->
    <!-- BEGIN cathead -->
    <!-- END cathead -->
    <!-- BEGIN forumrow -->
    <table class="forum" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="99%"><div class="forumgauche">
    <table border="0" cellspacing="0" cellpadding="0"><tr>
    <td rowspan="2" class="iconeforum" align="center" valign="middle">
    <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
    </td> <td align="left" valign="middle">
    <div class="trait"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
    <div class="messuj"><span>{catrow.forumrow.POSTS} Calligraphies</span><span>{catrow.forumrow.TOPICS} Ecrits à l'encre</span>
    </div><div class="last_mess"><span class="gensmall" id="last">{catrow.forumrow.LAST_POST}</span></div>
    <script type="text/javascript"> jQuery('#last').html(jQuery('#last').html().replace(/<br>/g,'<span style="display: inline-block; padding: 0 2px;">-</span>')).removeAttr('id');
    </script> </td>
    </tr>
    <tr>
    <td valign="middle">{catrow.forumrow.FORUM_DESC}</td>
    </tr>
    </table></div></td>
    <td rowspan="2" align="right" valign="middle">
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td align="center" valign="middle">
    <div class="indexloright">
    <div class="indeximglo">
    <div class="indexloimg"><img src="https://i.servimg.com/u/f25/20/23/52/33/img-lo10.png" title="imgloleft" alt="lookatit" /></div>
    </div></div>
    </td></tr></table>
    </td> 
    <tr>
    <td align="left" valign="middle">
    <div class="sous-forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
    </td></tr>       
    </tr>
    </table>
    <!-- END forumrow -->
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
    </div>
    </div>
    <!-- END tablefoot -->
    <!-- END catrow -->

    Code:
    /*_____INDEX BOX_____*/
    /**CATÉGORIES**/
    /*Cadrage*/
    .cadrecat {
    border: 2px solid #402203;
    border-radius: 15px;
    background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #b8a27f;
    margin-bottom: 15px;
    padding: 2px 4px 0px 3px;
    }
    .cat {
    border: 2px solid #402203; 
    border-radius: 15px;
    text-align: center; 
    background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #a88c77;
    padding: 5px 15px 5px 14px;
    margin: 5px;
    }
    /*Titre de catégorie*/
    .titrecat h2 {
    display: inline-block;
    background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
    border-radius: 5px;
    box-shadow: 2px 2px 1px #0d5938;
    margin: 0% 5% 0% 0%;
    padding: 10px 115px 0px 115px;
    font: bold 28px Papyrus;
    color: #402203;
    text-shadow: 0 2px 2px #fefdb1;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transition: 1s;
    -webkit-transition: 1s;
    }
    .titrecat h2:first-letter  {
    color: #c40606;
    text-shadow: 2px 2px 2px #c0a583;
    font: bold 40px papyrus;
    }
    .titrecat h2:hover {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    }
    /**FIN DES CATÉGORIES**/

    /**FORUM**/
    /*Cadrage1*/
    .forumgauche {
    position: relative;
    background: #0d5938 url(https://i.servimg.com/u/f14/15/30/06/17/essai_13.png) repeat;
    border-radius: 15px;
    box-shadow: 0px 0px 5px 2px #0d5938;
    padding: 1px;
    margin: 35px 0px 5px 15px;
    }
    .iconeforum img {
    width: 120px;
    height: 120px;
    margin: 60px 15px auto;
    }
    /*Trait*/
    .trait a {
    display: inline-block;
    width: 450px;
    margin-bottom: 5px;
    border-bottom: 3px solid #0d5938;
    }
    /*Titre forum*/
    a.forumlink {
    display: block;
    text-align: left;
    color: #402203!important;
    font: bold 25px papyrus ;
    text-shadow: 2px 2px 1px #0d5938;
    letter-spacing: 0px;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    }
    a.forumlink:hover {
    color: #003a00!important;
    letter-spacing: 5px;
    }
    a.forumlink:first-letter{
    color: #c40606;
    text-shadow: 2px #c0a583;
    font: bold 28px papyrus;
    }
    /*Messages&Sujets*/
    .messuj span {
    display: inline-block;
    width: 200px;
    height: 30px;
    background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938; 
    text-align: center;
    color: #402203;
    font: bold 12px papyrus;
    box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    border: 1px solid #0d5938; 
    margin-right: 2px;
    padding-top: 4px; 
    }
    .messuj span:first-letter{
    color: #c40606;
    text-shadow: 2px #c0a583;
    font: bold 14px papyrus;
    }
    .last_mess {
    padding: 2px;
    text-align: center;
    font: bold 40px papyrus;
     color: #402203!important;
    background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938; 
    }

    /*Description*/
    .blocforum {
    position: relative;
    overflow: auto; 
    z-index: 1;
    width: 400px;
    height: 200px;
    margin-top: -200px;
    text-align: justify;
    font: 12px papyrus;
    color: #402203;
    padding: 1px;
    }
    .entourage {
    overflow: hidden;
    width: 400px;
    height: 200px;
    margin-top: 15px;
     border: 1px solid #0d5938;

    }
    .forumimg {
    position: relative;
    z-index: 2;
    width: 400px;
    height: 200px;
    margin-left: 0px;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .entourage:hover .forumimg {
    margin-left: 400px;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    /**FIN FORUM**/

    /**SOUS FORUM**/
    .sous-forum {
    margin: -5px auto 15px;
    width: 400px;
    box-sizing: border-box;
    bottom: -20px;
    min-height: 20px;
    padding: 0 10px;
    background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
    border-radius: 15px #0d5938; 
    -webkit-border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -o-border-radius: 15px 15px 15px 15px;
    }
    .sous-forum a {
    font: bold 10px papyrus;
    margin-right: 10px;
    line-height: 18px;
    text-transform: lowercase;
    color: #402203!important;
    letter-spacing: 1px;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -htm-transition: 0.3s;
    -webkit-transition: 0.3s;
    }
    .sous-forum a:hover {
    color: #402203!important;
    font: bold 15px papyrus;
    text-transform: uppercase; 
    }
    .sous-forum a:first-letter{
    color: #c40606;
    text-shadow: 2px #c0a583;
    font: bold 14px papyrus;
    }
    /**FIN SOUS FORUM**/

    /**ELEMENTS IMPORTANTS**/
    /* losange-index */
    .indexloright {
    height: 110px;
    width: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    margin-right: 40px;
    margin-left: 25px;
    }
    /* losange-img physique container-child n parent */
    .indeximglo {
    height: 110px;
    width: 110px;
    display: block;
    position: absolute;
    background: #0d5938;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
    /* container-child img */
    .indexloimg {
    height: 110px;
    width: 110px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
    /* just img */
    .indexloimg img{
    width: 90px;
    height: 90px;
    display: block;
    position: absolute;
    text-align: center;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    }
    /* fin losange-index */
    /**FIN ELEMENTS IMPORTANTS**/
     /*_____ FIN INDEX BOX_____*/


    Forum test : https://bikinoutest.forumactif.com/

      La date/heure actuelle est Jeu 24 Sep 2020 - 15:36