Séparer le titre des forums des colonnes description et derniers messages

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Séparer le titre des forums des colonnes description et derniers messages

Message par Emie * le Mer 21 Sep 2011 - 0:36

Bonjour à vous =)

Je voudrais vous demander un coup de main pour trouver comment faire ce que je souhaiterais.
Comme mentionné dans mon titre, je souhaiterais mettre le titre de mes forums au-dessus de la description et de la colonne derniers messages.

J'ai fait un petit montage pour illustrer:


Voici l'adresse de mon forum test: http://nevermore.1fr1.net
Le template index_box a connu plusieurs modifications (et je ne sais pas pourquoi il y a des séparations entre les coloonnes).

Je sais déjà comment encadrer la description et les derniers messages et changer la mise en forme du titre des forums.

Merci!



    Dernière édition par Emie * le Sam 24 Sep 2011 - 16:35, édité 1 fois

    Emie *
    ***

    Féminin
    Messages : 122
    Inscrit(e) le : 21/07/2008

    Emie * a été remercié(e) par l'auteur de ce sujet.

    Résolu Re: Séparer le titre des forums des colonnes description et derniers messages

    Message par Invité le Mer 21 Sep 2011 - 10:42

    Bonjour,

    Souhaitez vous repartir du template de base ou préférez-vous démarrer de votre template modifié?
    Dans le second cas, il faudrait nous le fournir, ainsi que la partie de votre CSS qui lui est associée.

    Cordialement

    Invité
    Invité


    Invité a été remercié(e) par l'auteur de ce sujet.

    Résolu Re: Séparer le titre des forums des colonnes description et derniers messages

    Message par Emie * le Mer 21 Sep 2011 - 17:14

    Je souhaiterais partir du template déjà modifié, alors le voilà:

    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>

    <!-- DEBUT MODIF ONGLETS -->


      <script type="text/javascript">
      //<![CDATA[
    var i = 0;

    document.write('<div align="center">
    <ul class="onglet">
     

    <li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">Vestibule</li>
    <li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">Expositions</li>
    <li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">Commerce</li>
    <li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">Ressources</li>
    <li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">Assistance</li>
    <li onMouseOver="change_cat(5);" class="onglet_nactif" id="cat_5">Compétitions</li>
    <li onMouseOver="change_cat(6);" class="onglet_nactif" id="cat_6">Récréations</li>
    <li onMouseOver="change_cat(7);" class="onglet_nactif" id="cat_7">Archives</li>

    </ul>
    </div>
    ');

    var compteur_cat = 0;

    var anc_cat = 0;

    var nom_cat = new Array('0','1','2','3','4','5','6');

     
    function change_cat(numero)
    {
     document.getElementById(nom_cat[anc_cat]).style.display = 'none';
     document.getElementById(nom_cat[numero]).style.display = 'block';
     document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif';
     document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif';
     anc_cat = numero;
    }

    function capture_cat()
    {
    if(nom_cat[compteur_cat] == nom_cat[0])
    {document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" >');
    }
    else{
     document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" style="display:none;">');
    }
    compteur_cat++;
    }

    //-->
    </script>
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->

    <script type="text/javascript">
    <!--
    capture_cat();
    //]]>
    </script>

    <!-- FIN MODIF ONGLETS -->

          <!-- 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}>

        <!-- [ DÉBUT DES MODIFICATIONS EFFECTUÉES PAR LE FORUM DES FORUMS ] -->

              <div class="forum-stats"><strong>{catrow.forumrow.POSTS}</strong> messages dans <strong>{catrow.forumrow.TOPICS}</strong> sujets.</div>
        <div class="forum-description">
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        </div>
        <div class="forum-sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
                <span class="gensmall">
                    <!-- BEGIN switch_moderators_links -->
                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                    <!-- END switch_moderators_links -->

                </span>
              </td>
              <!-- BEGIN forum_link_no -->
              <td class="row3 over" align="center" valign="middle" height="50"><div style="width: 150px">
                <span class="gensmall"><div class="arrondi">{catrow.forumrow.LAST_POST}</div></span></div>
              </td>
     

        <!-- [ FIN DES MODIFICATIONS EFFECTUEES PAR LE FORUM DES FORUMS ] -->

              <!-- 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></div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


    Et voilà le CSS qui va avec:
    Code:
    .forum-stats {
    color: #d2be98;
    font-size: 10px;
    padding-left: 10px;
    }


    .forum-description {
    text-align: justify;
    border: 1px solid #decebc;
    background-color: #f0e7dd;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    margin: 10px;
    padding: 4px;
    }






    /* CATÉGORIES EN ONGLETS */

    /* *** categories *** */

    .cat_forum {
    -moz-border-radius: ;
    border: ;
    background-color: ;
    margin: ;
    }

    /* *** liste *** */

    .onglet {
    display:inline-block;
    height:30px;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0px auto auto;
    margin-top:20px;
    padding:6px;
    }

    /* *** configuration de l'élément de liste *** */

    .onglet li {
    float:left;
    width: 80px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    font-size: 11px;
    horizontal-align: middle;
    vertical-align: ;
    list-style-type:none;
    }

    /* *** liens *** */

    .onglet li a {
    display:block;
    text-decoration:none;
    margin-left:5px;
    color: #CC0000;
    }


    /* *** liens au survol *** */

    .onglet li a:hover {
    color:#FC244F;
    }


    /* *** onglet actif *** */

    .onglet_actif {
    background: url(' ') repeat-x;
    background-color: #E6D5BD
    width:100px;
    height:30px;
    cursor:pointer;
    }

    /* *** onglet non actif *** */



    .onglet_nactif {
    background:url(' ') repeat-x;
    background-color: #deccb2
    width:100px;
    height:30px;
    cursor:pointer;
    }

    /* *** ici vos NOM DE CATEGORIE sauf un : il sera afficher en premier *** */

    #archives, #amusement, #administration {
    display : none;
    }

    /* Fin */

    /* ENCADREMENT DES DERNIERS SUJETS */

    .arrondi {
    border: 1px solid #decebc;
    background-color: #f0e7dd;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    margin: 6px;
    padding: 4px;
    }

    Je crois que c'est tout... s'il manque quelque chose je chercherai!

    Merci (:

      Emie *
      ***

      Féminin
      Messages : 122
      Inscrit(e) le : 21/07/2008

      Emie * a été remercié(e) par l'auteur de ce sujet.

      Résolu Re: Séparer le titre des forums des colonnes description et derniers messages

      Message par Emie * le Ven 23 Sep 2011 - 21:12

      Je me permets de faire un petit UP ^^

      Emie *
      ***

      Féminin
      Messages : 122
      Inscrit(e) le : 21/07/2008

      Emie * a été remercié(e) par l'auteur de ce sujet.

      Résolu Re: Séparer le titre des forums des colonnes description et derniers messages

      Message par Invité le Sam 24 Sep 2011 - 11:26

      Bonjour,

      Vous n'êtes pas loin du résultat avec votre template Wink .
      - Pour éliminer les espaces, il faut ajouter cellspacing="0" dans le script de vos onglets.
      - Ensuite, créez un tableau qui contiendra deux lignes:
      • Le titre et les statistiques dans la première ligne.
      • l'image, la description et les derniers sujets pour la deuxième.

      - Pour décaler le titre et les statistiques, on se sert de padding-left pour créer une marge plus ou moins importante, via la feuille CSS.



      Cordialement.

      Invité
      Invité


      Invité a été remercié(e) par l'auteur de ce sujet.

      Résolu Re: Séparer le titre des forums des colonnes description et derniers messages

      Message par Emie * le Sam 24 Sep 2011 - 15:37

      Ah merci beaucoup, en effet j'étais pas loin ^^' mais merci beaucoup pour votre aide =). Pour le padding-left ce sera bon ^^

      J'aurais juste une petite question, si je peux la poser dans ce même sujet : avant de mettre le code pour faire des onglets, les coins de mes catégories étaient arrondis, comme l'est l'encadré qui "contient" la page d'accueil. Je me demandais si c'était possible de recréer cet effet?


      Emie *
      ***

      Féminin
      Messages : 122
      Inscrit(e) le : 21/07/2008

      Emie * a été remercié(e) par l'auteur de ce sujet.

      Résolu Re: Séparer le titre des forums des colonnes description et derniers messages

      Message par Invité le Sam 24 Sep 2011 - 15:49

      Je ne vois pas votre page d'accueil car votre forum est fermé aux invités Wink . Essayez en ajoutant dans votre CSS, les propriétés voulues à l'identifiant td .row1, comme ceci par exemple:
      Code:
      td .row1{
      border: 1px solid #decebc;
      background-color: #f0e7dd;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
      margin: 10px;
      padding: 4px;
      }

      Cordialement.

      Invité
      Invité


      Invité a été remercié(e) par l'auteur de ce sujet.

      Résolu Re: Séparer le titre des forums des colonnes description et derniers messages

      Message par Emie * le Sam 24 Sep 2011 - 16:07

      Oh oui c'est vrai je suis désolée, j'avais oublié :/

      Voilà ce que ça me donnait:


      Et le code que vous me donnez fonctionne mais s'applique aussi à l'encadré de la page d'accueil, ce qui fait qu'il a un double contour.


      Edit: j'ai rendu le forum accessible aux invités, au cas où ^^

      Emie *
      ***

      Féminin
      Messages : 122
      Inscrit(e) le : 21/07/2008

      Emie * a été remercié(e) par l'auteur de ce sujet.

      Résolu Re: Séparer le titre des forums des colonnes description et derniers messages

      Message par Invité le Sam 24 Sep 2011 - 16:29

      En regardant plus attentivement, j'ai trouvé une partie de votre CSS qui est incomplète:
      Code:
      /* CATÉGORIES EN ONGLETS */
       
      /* *** categories *** */
       
      .cat_forum {
      -moz-border-radius: ;
      border: ;
      background-color: ;
      margin: ;
      }

      Complètez-la, et vous aurez une bordure arrondie sur vos catégories Wink. Vous pouvez ensuite ajouter le code CSS ci-dessous pour arrondir la cellule à l'intérieur, comme ça les angles ne débordent pas sur le contour:
      Code:
      td .row1{
      -moz-border-radius: 6px ;
      -webkit-border-radius: 6px ;
      border-radius: 6px ;}

      Cordialement.

      Invité
      Invité


      Invité a été remercié(e) par l'auteur de ce sujet.

      Résolu Re: Séparer le titre des forums des colonnes description et derniers messages

      Message par Emie * le Sam 24 Sep 2011 - 16:34

      Ah oui effectivement, ça marche maintenant!

      Merci encore d'avoir pris le temps de m'aider, j'en suis très reconnaissante Smile.

      Je mets en problème résolu ^^

      Emie *
      ***

      Féminin
      Messages : 122
      Inscrit(e) le : 21/07/2008

      Emie * a été remercié(e) par l'auteur de ce sujet.

      Voir le sujet précédent Voir le sujet suivant Revenir en haut


      Permission de ce forum:
      Vous ne pouvez pas répondre aux sujets dans ce forum