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.

-17%
Le deal à ne pas rater :
Continental Edison TV QLED 55” (139 cm) UHD 4K 3840×2160
299.99 € 359.99 €
Voir le deal

    [Forum] Mettre des cadres autour des tables

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Jeu 17 Sep 2009 - 22:42

    Rappel du premier message :



    Salut salut !

    Voici donc un tuto encore attendu^^ pour apprendre ma méthode (qui n'est peut-être pas la meilleure et certainement pas la seule) pour mettre des cadres autour des tables de sous-forums.

    Exemple :

    >>> EXEMPLE


    Nous allons donc commencer par faire le fond... ou plutôt VOUS allez commencer par le faire Razz

    Faites donc un cadre vierge, dans lequel vous devez pouvoir séparer l'en-tête, le pieds et l'image de fond qui se répètera verticalement.


    1) Séparer les forums :

    La première chose à faire pour faire plusieurs tables est de séparer les forums que vous avez construit. Pour cela, rien de compliqué, allez simplement dans
    Affichage > Page d'accueil > Structure et Hiérarchie

    Mettez l'une des trois apparences du bas "Séparer les catégories sur l'index".


    2) Mettre le fond :

    On va commencer par mettre le fond de nos tables, car on ne procède pas de la même manière que pour le reste.
    Pour cela, nous allons simplement utiliser le CSS, en mettant une image de fond dans la "class" forumline.

    Code:
    .forumline
    {
    background-color: transparent;
    background-image: url(adresse de votre image de fond);
    background-repeat: repeat-y;
    padding-left: 20px;
    padding-right: 18px;
    border: none;
    }

    Explications :
    repeat-y => fait se répéter le fond en hauteur
    padding => crée une marge interne, de sorte que les bords de la table ne soient pas trop prêt de celle de votre cadre (fond ici).


    Nous avons donc normalement notre fond, il nous reste à mettre les en-tête et les pieds des cadres.


    3) En-tête et pieds :

    Pour cela, il va falloir aller dans les Templates afin de placer des divisions "vides", qui vont seulement contenir les images de tête et pieds. En gros, on va faire ce schéma :

    Templates :

    => ajout division "tête"
    [code de la table de base de FA]
    => ajout division "pieds"

    CSS :


    Indication que la tête doit contenir telle image de fond.
    Indication que le pieds doit contenir telle image de fond.


    Allez donc dans Affichage > Templates > Général > index_box (page d'accueil - affichage des catégories).

    Voici le code avec indiqué sous la forme suivante ce que j'ai ajouté :

    Il est encadré par :




    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}

             {CURRENT_TIME}

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

             <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

             <!-- END switch_user_logged_in -->
             <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
          </td>
       </tr>
    </table>
    <!-- BEGIN catrow -->
    <!-- BEGIN tablehead -->

    <!---------------- Début ajout  --------------------->
    <div class="table_head"></div>
    <!---------------- Fin ajout  --------------------->

    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
          <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
          <th nowrap="nowrap" width="50">{L_TOPICS}</th>
          <th nowrap="nowrap" width="50">{L_POSTS}</th>
          <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
       </tr>
       <!-- END tablehead -->
       <!-- BEGIN cathead -->
       <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
             <h{catrow.cathead.LEVEL} class="hierarchy">
                <span class="cattitle">
                   <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
                </span>
             </h{catrow.cathead.LEVEL}>
          </td>
          <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
       </tr>
       <!-- END cathead -->
       <!-- BEGIN forumrow -->
       <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
          <!-- END inc -->
          <td class="{catrow.forumrow.INC_CLASS}" 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 class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
             <h{catrow.forumrow.LEVEL} class="hierarchy">
                <span class="forumlink">
                   <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

                </span>
             </h{catrow.forumrow.LEVEL}>
             <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
             <span class="gensmall">
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
                {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
             </span>
          </td>
          <!-- BEGIN forum_link_no -->
          <td class="row3" align="center" valign="middle" height="50">
             <span class="gensmall">{catrow.forumrow.TOPICS}</span>
          </td>
          <td class="row2" align="center" valign="middle" height="50">
             <span class="gensmall">{catrow.forumrow.POSTS}</span>
          </td>
          <td class="row3 over" align="center" valign="middle" height="50">
             <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
          </td>
          <!-- END forum_link_no -->
          <!-- BEGIN forum_link -->
          <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
          <!-- END forum_link -->
       </tr>
       <!-- END forumrow -->
       <!-- BEGIN catfoot -->
       <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
       </tr>
       <!-- END catfoot -->
       <!-- BEGIN tablefoot -->
    </table>

    <!---------------- Début ajout  --------------------->
    <div class="table_foot"></div>
    <!---------------- Fin ajout  --------------------->

    <!-- END tablefoot -->
    <!-- END catrow -->

    Nous avons donc placé nos deux divisions, pour le moment cela ne donne rien puisqu'il faut ensuite mettre en forme ce qu'elles contiennent grâce au CSS.



    Code:
    .table_head
    {
    width: largeur de votre image de fond;
    height: hauteur de votre image de fond;
    background-color: transparent;
    background-image: url(adresse de votre image);
    background-repeat: no-repeat;
    }

    .table_foot
    {
    width: largeur de votre image de fond;
    height: hauteur de votre image de fond;
    background-color: transparent;
    background-image: url(adresse de votre image);
    background-repeat: no-repeat;
    }


    Vous avez normalement votre table encadrée !!


    Alors vous observerez dans doute que sur N-U les cadres changent selon les sections, l'en-tête du qui est en ligne est par exemple différent de ceux du forum... Pour cela, il faut mettre une division possédant une "class" différente juste avant la table du "Qui est en ligne" dans le code du template adéquat, en mettant dans le css l'image voulue en fond...

    Mais là, pour ça ou l'intérieur du forum, je vous laisse chercher, c'est exactement le même principe, à vous de trouver où les placer !

    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Sparrow-style le Jeu 14 Juin 2012 - 18:52, édité 3 fois



    sign
    Niortais
    Niortais
    MasculinAge : 40Messages : 27

    Lun 22 Déc 2014 - 19:22

    superbe merci
    Kau
    Kau
    FémininAge : 22Messages : 148

    Sam 17 Jan 2015 - 20:23

    Merci !
    Akina-chan
    Akina-chan
    FémininAge : 31Messages : 140

    Mer 28 Jan 2015 - 20:59

    Merci <3
    Iliass
    Iliass
    MasculinAge : 33Messages : 24

    Sam 21 Mar 2015 - 15:10

    merci
    Kokoa
    Kokoa
    FémininAge : 25Messages : 57

    Mar 14 Avr 2015 - 1:33

    Merci !



    [Forum] Mettre des cadres autour des tables - Page 3 Cheerleader_by_CookiemagiK

    « Tous cet espace pour moi ? Fallait pas ! »
    Kadence
    Kadence
    FémininAge : 43Messages : 58

    Jeu 16 Avr 2015 - 23:18

    Merci Wink
    Chadot
    Chadot
    FémininAge : 36Messages : 248

    Lun 20 Avr 2015 - 18:26

    Merci



    [Forum] Mettre des cadres autour des tables - Page 3 2mo6y5k
    Monaka
    Monaka
    FémininAge : 32Messages : 137

    Mar 9 Juin 2015 - 11:09

    merci
    g93
    g93
    MasculinAge : 37Messages : 67

    Mar 9 Juin 2015 - 12:53

    merci
    picka234
    picka234
    FémininAge : 59Messages : 636

    Dim 14 Juin 2015 - 16:31

    merci
    QueenDancing13
    QueenDancing13
    FémininAge : 28Messages : 106

    Mar 16 Juin 2015 - 9:05

    Very Happy



    [Forum] Mettre des cadres autour des tables - Page 3 Christina_Aguilera_Signature_by_Sitic
    Tatiana.
    Tatiana.
    FémininAge : 33Messages : 53

    Jeu 30 Juil 2015 - 0:15

    merci
    Metamorphe
    Metamorphe
    FémininAge : 31Messages : 17

    Jeu 30 Juil 2015 - 17:24

    Merci beaucoup, c'est très pratique ♥
    Lessien
    Lessien
    FémininAge : 42Messages : 163

    Lun 10 Aoû 2015 - 11:14

    Merci !
    Anonymous
    Invité

    Lun 10 Aoû 2015 - 18:33

    Merci ! (*≧▽≦)
    Kripterya
    Kripterya
    FémininAge : 38Messages : 98

    Ven 14 Aoû 2015 - 6:57

    merci
    Loriel
    Loriel
    FémininAge : 33Messages : 3

    Ven 14 Aoû 2015 - 21:20

    Merci c'est top !
    Chocolakato
    Chocolakato
    FémininAge : 34Messages : 837

    Sam 10 Oct 2015 - 15:42

    Merci beaucoup !



    Delena
    Delena
    FémininAge : 41Messages : 100

    Mar 13 Oct 2015 - 3:07

    Merci !



    [Forum] Mettre des cadres autour des tables - Page 3 8s6x
    Hancok
    Hancok
    FémininAge : 40Messages : 1497

    Jeu 29 Oct 2015 - 10:03

    Merci beaucoup pour ce tuto *o*




    [Forum] Mettre des cadres autour des tables - Page 3 A67g
    sweetheart.
    sweetheart.
    FémininAge : 37Messages : 120

    Mar 1 Déc 2015 - 1:18

    Merci



    Un bisou pour Invité


    Un bisou pour...
    Invité
    Zomega
    Zomega
    FémininAge : 34Messages : 31

    Sam 26 Déc 2015 - 2:25

    merci *o*
    Nausicäa Kaer
    Nausicäa Kaer
    FémininAge : 30Messages : 171

    Jeu 31 Déc 2015 - 4:11

    Merci **
    caline74
    caline74
    FémininAge : 50Messages : 4

    Lun 18 Jan 2016 - 14:18

    Trop top merci
    Mohank
    Mohank
    MasculinAge : 29Messages : 20

    Dim 24 Jan 2016 - 15:48

    Merci Beaucoup!
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 23:39