It is currently Tue 27 Sep 2016 - 20:54 - créer un forum

[Résolu] mise en page catégories

Skip to content

Post new topic Reply to topic Goto page: <  1, 2

[Résolu] mise en page catégories
Author Message
Kyosuke


Joined: 30 Mar 2009
Posts: 436

PostPosted: Sun 13 Mar 2016 - 22:40    Post subject: [Résolu] mise en page catégories Reply with quote

PublicitéSupprimer les publicités ?
Previous post review:

Tu en es où actuellement ? On peut voir un aperçu en live ?
Forum
Author Message
Yolaine
Membre


Offline
Membre

Joined: 22 Nov 2015
Posts: 12
Niveau:
Point(s): 11
Moyenne: 0.92
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Féminin Balance (23sep-22oct)

PostPosted: Mon 14 Mar 2016 - 21:32    Post subject: [Résolu] mise en page catégories Reply with quote

alors j'en suis la dans mon code


 
Code: Sélectionner - Agrandir
 <!-- BEGIN catrow -->
<table width="756px" align="center" cellpadding="0" cellspacing="0" border="0" class="forumline">
  <tr>
  <div class="catCenter" colspan="3" style="background-image:url('http://img.xooimage.com/files110/4/8/3/sidebar-haut-4e392ab-4ea32bd.png');background-repeat:no-repeat;  height:200px; "><span class="cattitle"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></span></div>

  </tr>
  
      <!-- BEGIN forumrow -->
      <tr><div class="row2" width="80%" height="50"><br>
              <span class="forumlink"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a></span>
           <div class ="description"><span class ="poststopics"> {catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets<br></span>

              <span class="desc_texte">{catrow.forumrow.FORUM_DESC}</span></div><br>
               
          
        
      <span class="row3" width="100%" align="center" height="50">
              <span class="gensmall">  
              <div class ="newoldlocked">{catrow.forumrow.LAST_POST}</div>
<div class ="imagesindex"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="<br><br>{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
</span></span>
    

    </div></tr>
    <!-- END forumrow -->





<tr><div class="catCenter" border="0" colspan="3" height="28" align="center" style="background-image:url('http://img.xooimage.com/files110/c/6/7/sidebar-bas-4ea336e.png');  background-repeat:no-repeat;height:95px;"> </div></tr>
</table>

  <!-- END catrow -->
Ce qui me donne ça en captured'écran :


Et j'aimerais savoir comment mettres mes ous categories les une à coté des autres au lieu qu'elles soit les une au desous des autres


Forum
Author Message
du78
Membre


Offline
Membre

Joined: 04 Jan 2016
Posts: 59
Niveau:
Point(s): 60
Moyenne: 1.02
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin

PostPosted: Tue 15 Mar 2016 - 16:07    Post subject: [Résolu] mise en page catégories Reply with quote

Bonjour à toi Very Happy

Pour l'instant tu ne pourras pas faire grand chose avec le code que je t'ai donné qui utilise le float:left sur des DIV
Si tu regardes bien ton code, on utilise une structure en table (<table>) où :

- Chaque catégorie est une table (tableau).
- La première ligne du tableau (entre la première balise <tr> et </tr>) donne le titre de la catégorie.
- La seconde ligne de ton tableau et les suivantes contiendront les sous catégories d'une catégorie donnée. Elles sont délimitées par <!-- BEGIN forumrow --> et <!-- END forumrow -->
- La dernière ligne de ton tableau est le bas d'une catégorie donnée.

Voici ce que ça donne si ton forum est basé sur cette architecture :




Le lien entre l'image/couleurs et le code :
<!-- BEGIN catrow -->
    <table>
        <tr> titre de la catégorie </tr>
<!-- BEGIN forumrow -->
        <tr> contenu sous catégorie</tr>
<!-- END forumrow --
>
        <tr> bas de la catégorie </tr>
    </table>
<!-- END catrow -->


Tout le code qui est entre les balises rouges (=1 catégorie)
Tout le code qui est entre les balises vertes (=1 sous catégorie)

A titre indicatif, on peut faire correspondre à ce code celui-ci d'après la structure du forum présentée en image juste au dessus :

    <table>
        <tr> titre de la catégorie 1</tr>
        <tr> contenu sous catégorie 1</tr>

        <tr> contenu sous catégorie 2</tr>
        <tr> bas de la catégorie 1 </tr>
    </table>

    <table>
        <tr> titre de la catégorie 2</tr>
        <tr> contenu sous catégorie 2</tr>

        <tr> contenu sous catégorie 2</tr>
        <tr> contenu sous catégorie 2</tr>
        <tr> bas de la catégorie 2 </tr>
    </table>

    <table>
        <tr> titre de la catégorie 3</tr>
        <tr> contenu sous catégorie 3</tr>

        <tr> contenu sous catégorie 3</tr>
        <tr> contenu sous catégorie 3</tr>
        <tr> contenu sous catégorie 3</tr>
        <tr> bas de la catégorie 3 </tr>
    </table>


Je pense qu'il faut abandonner la structure en table pour rester moins contraint par le placement.
En utilisant des DIV tu ne garder pas une structure en table et celles-ci se placeront les unes en dessous des autres (la propriété display:block est appliquée par défaut)
A partir de cette utilisation de DIV, on pourra faire des choses plus malléables et surtout poursuivre sur la solution que je t'ai donné.  Okay


Forum
Author Message
Kyosuke
Contributeurs


Offline
Contributeurs

Joined: 30 Mar 2009
Posts: 436
Niveau:
Point(s): 532
Moyenne: 1.22
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Tue 15 Mar 2016 - 21:37    Post subject: [Résolu] mise en page catégories Reply with quote

Quote:
Je pense qu'il faut abandonner la structure en table pour rester moins contraint par le placement.


Tout à fait.

Yolaine wrote:
Oui j'ai fais un shema !
Voila !


Tu as un petit exemple ici :

http://testxooit.clicforum.com/index.php

Si ça t'intéresse, je te donnerais le code source du template INDEX_BODY.TPL ainsi que la feuille de style qui va avec. Il te suffira d'éditer les différentes règles CSS pour adapter les blocs au thème de ton forum, étant donné que tu possèdes un forum de graphisme, je ne doute pas de tes capacités à rendre ça plus joli. Smile
_______________________


Forum
Author Message
Yolaine
Membre


Offline
Membre

Joined: 22 Nov 2015
Posts: 12
Niveau:
Point(s): 11
Moyenne: 0.92
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Féminin Balance (23sep-22oct)

PostPosted: Tue 15 Mar 2016 - 22:44    Post subject: [Résolu] mise en page catégories Reply with quote

du78 wrote:
Bonjour à toi Very Happy

Pour l'instant tu ne pourras pas faire grand chose avec le code que je t'ai donné qui utilise le float:left sur des DIV
Si tu regardes bien ton code, on utilise une structure en table (<table>) où :

- Chaque catégorie est une table (tableau).
- La première ligne du tableau (entre la première balise <tr> et </tr>) donne le titre de la catégorie.
- La seconde ligne de ton tableau et les suivantes contiendront les sous catégories d'une catégorie donnée. Elles sont délimitées par <!-- BEGIN forumrow --> et <!-- END forumrow -->
- La dernière ligne de ton tableau est le bas d'une catégorie donnée.

Voici ce que ça donne si ton forum est basé sur cette architecture :




Le lien entre l'image/couleurs et le code :
<!-- BEGIN catrow -->
    <table>
        <tr> titre de la catégorie </tr>
<!-- BEGIN forumrow -->
        <tr> contenu sous catégorie</tr>
<!-- END forumrow --
>
        <tr> bas de la catégorie </tr>
    </table>
<!-- END catrow -->


Tout le code qui est entre les balises rouges (=1 catégorie)
Tout le code qui est entre les balises vertes (=1 sous catégorie)

A titre indicatif, on peut faire correspondre à ce code celui-ci d'après la structure du forum présentée en image juste au dessus :

    <table>
        <tr> titre de la catégorie 1</tr>
        <tr> contenu sous catégorie 1</tr>

        <tr> contenu sous catégorie 2</tr>
        <tr> bas de la catégorie 1 </tr>
    </table>

    <table>
        <tr> titre de la catégorie 2</tr>
        <tr> contenu sous catégorie 2</tr>

        <tr> contenu sous catégorie 2</tr>
        <tr> contenu sous catégorie 2</tr>
        <tr> bas de la catégorie 2 </tr>
    </table>

    <table>
        <tr> titre de la catégorie 3</tr>
        <tr> contenu sous catégorie 3</tr>

        <tr> contenu sous catégorie 3</tr>
        <tr> contenu sous catégorie 3</tr>
        <tr> contenu sous catégorie 3</tr>
        <tr> bas de la catégorie 3 </tr>
    </table>


Je pense qu'il faut abandonner la structure en table pour rester moins contraint par le placement.
En utilisant des DIV tu ne garder pas une structure en table et celles-ci se placeront les unes en dessous des autres (la propriété display:block est appliquée par défaut)
A partir de cette utilisation de DIV, on pourra faire des choses plus malléables et surtout poursuivre sur la solution que je t'ai donné.  Okay
Oui J'avais réfléchis a enlever les tableux pour moins etre limitée ! Mais j'avoue que j'osai pas trop
Kyosuke wrote:
Yolaine wrote:
Oui j'ai fais un shema !
Voila !


Tu as un petit exemple ici :

http://testxooit.clicforum.com/index.php

Si ça t'intéresse, je te donnerais le code source du template INDEX_BODY.TPL ainsi que la feuille de style qui va avec. Il te suffira d'éditer les différentes règles CSS pour adapter les blocs au thème de ton forum, étant donné que tu possèdes un forum de graphisme, je ne doute pas de tes capacités à rendre ça plus joli. Smile
Oui vraiment ça serait vraiment super sympas de ta part ne seraice que pour avoir une base peut etre pas le copier coller mais voir comment tu as construit ton code pour que je puisse apprendre a construire la miens !!


En tout cas merci a tout les deux vous etes au top !


Forum
Author Message
Kyosuke
Contributeurs


Offline
Contributeurs

Joined: 30 Mar 2009
Posts: 436
Niveau:
Point(s): 532
Moyenne: 1.22
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Tue 15 Mar 2016 - 22:54    Post subject: [Résolu] mise en page catégories Reply with quote

Yolaine wrote:
alors j'en suis la dans mon code


 
Code: Sélectionner - Agrandir
 <!-- BEGIN catrow -->
<table width="756px" align="center" cellpadding="0" cellspacing="0" border="0" class="forumline">
  <tr>
  <div class="catCenter" colspan="3" style="background-image:url('http://img.xooimage.com/files110/4/8/3/sidebar-haut-4e392ab-4ea32bd.png');background-repeat:no-repeat;  height:200px; "><span class="cattitle"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></span></div>

  </tr>
  
      <!-- BEGIN forumrow -->
      <tr><div class="row2" width="80%" height="50"><br>
              <span class="forumlink"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a></span>
           <div class ="description"><span class ="poststopics"> {catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets<br></span>

              <span class="desc_texte">{catrow.forumrow.FORUM_DESC}</span></div><br>
               
          
        
      <span class="row3" width="100%" align="center" height="50">
              <span class="gensmall">  
              <div class ="newoldlocked">{catrow.forumrow.LAST_POST}</div>
<div class ="imagesindex"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="<br><br>{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
</span></span>
    

    </div></tr>
    <!-- END forumrow -->





<tr><div class="catCenter" border="0" colspan="3" height="28" align="center" style="background-image:url('http://img.xooimage.com/files110/c/6/7/sidebar-bas-4ea336e.png');  background-repeat:no-repeat;height:95px;"> </div></tr>
</table>

  <!-- END catrow -->


Remplace donc tout ça par :

Code: Sélectionner - Agrandir
<section class="categories">
   <!-- BEGIN catrow -->
   <section class="categorie categorie-{catrow.CAT_ID}">
      <header>
         <h2>
            <a href="{catrow.U_VIEWCAT}">{catrow.CAT_DESC}</a>
         </h2>
      </header>
      <div class="forums">
         <!-- BEGIN forumrow -->
         <div class="forum forum-{catrow.forumrow.FORUM_ID}">
            <div class="forum-haut">
               <h3>
                  <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
               </h3>
               <small class="forum-stats">
                  <span class="forum-sujets">{catrow.forumrow.TOPICS} sujet<!-- IF catrow.forumrow.TOPICS !== '0' -->s<!-- ENDIF --></span> - <span class="forum-messages">{catrow.forumrow.POSTS} message<!-- IF catrow.forumrow.POSTS !== '0' -->s<!-- ENDIF --></span>
               </small>
               <p class="forum-description">
                  <!-- IF catrow.forumrow.FORUM_DESC -->
                  {catrow.forumrow.FORUM_DESC}
                  <!-- ELSE -->
                  Aucune description disponible.
                  <!-- ENDIF -->
               </p>
               <!-- MODERATEURS INVISIBLES
               <p class="forum-moderateurs gensmall">
               {catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}
               </p>
               -->
            </div>
            <div class="forum-bas">
               <p>{catrow.forumrow.LAST_POST}</p>
               <img src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}">
            </div>
         </div>
         <!-- END forumrow -->
      </div>
   </section>
   <!-- END catrow -->
</section>


Et dans le CSS de ton forum, ajoute les règles suivantes :

Code: Sélectionner - Agrandir
section.categories {
   width: 80%;
   margin: 30px auto;
   text-align: center;
}

section.categories a {
   font-weight: normal;
   text-decoration: none;
}

section.categorie > header h2 {
   background: #073D7B;
   padding: 10px;
   margin: 0;
   text-align: center;
   font-size: 20px;
   font-weight: normal;
}

section.categorie > header a {
   display: block;
   color: #fff;
}

section.categorie > .forums {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
   -webkit-box-align: stretch;
   -webkit-align-items: stretch;
   -ms-flex-align: stretch;
   align-items: stretch;
   padding-top: 10px;
   margin: 0 -5px;
}

section.categorie > .forums > .forum {
   -webkit-box-flex: 1;
   -webkit-flex: 1 0 30%;
   -ms-flex: 1 0 30%;
   flex: 1 0 30%;
   margin: 0 5px 23px 5px;
}

section.categorie > .forums > .forum a {
   color: #073D7B;
}

section.categorie > .forums > .forum > div {
   background: #DCE1E5;
   font-size: 14px;
   color: #607D8B;
}

section.categorie > .forums > .forum > .forum-haut {
   padding: 10px;
   margin-bottom: 10px;
}

section.categorie > .forums > .forum > .forum-haut h3 {
   padding: 5px 0;
   margin: 0;
}

section.categorie > .forums > .forum > .forum-haut h3 a {
   color: #073D7B;
   font-size: 20px;
}

section.categorie > .forums > .forum > .forum-haut .forum-description {
   max-height: 100px;
   overflow: auto;
}

section.categorie > .forums > .forum > .forum-bas {
   top: -5px;
   background: #E6EAED;
   padding: 5px;
   -webkit-transform: scale(.9);
   -ms-transform: scale(.9);
   transform: scale(.9);
   -webkit-transition: all .25s;
   transition: all .25s;
}

section.categorie > .forums > .forum:hover > .forum-bas {
   top: 0;
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
}

section.categorie > .forums > .forum > .forum-bas {
   position: relative;
}

section.categorie > .forums > .forum > .forum-bas > img {
   position: absolute;
   width: 46px; /* Largeur de l'image */
   height: 25px; /* Hauteur de l'image */
   left: 50%;
   bottom: -12.5px; /* Hauteur de l'image divisé par 2 (valeur négative) */
   -webkit-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
}


Si tu as des questions, n'hésite pas.
_______________________


Forum
Author Message
Contenu Sponsorisé





PostPosted: Today at 20:54    Post subject: [Résolu] mise en page catégories

Display posts from previous:   
Reply to topic Page 2 of 2 Goto page: <  1, 2




Portal | Index | Administration Panel | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group |
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401