It is currently Fri 30 Sep 2016 - 18:52 - 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
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 11 Jan 2016 - 20:35    Post subject: [Résolu] mise en page catégories Reply with quote

PublicitéSupprimer les publicités ?
Bonjour, J'ai fais quelques recherche sans résultats afin de modifier le visuel de mes catégories !
Alors après avoir essayer d'arriver ou je veux j'y suis presque mais j'en suis là



Seulement j'aimerais que mes forums sois aligner dans mes catégories ! Que le bloc les présentations sois à coté de celui du bloc Forum et que les dernier messages poster soirs juste en dessous ! J'ai que ça fasse des colonnes de 3 forums sur chaque ligne mais c'est un casse tête je n'y arrive pas !
Si vous pouviez m'aider ça serais vraiment génial ! (J'espère que c'est de l'ordre du possible )

Merci d'avance !

Voici mon HTML

 
Code: Sélectionner - Agrandir
<table width="100%" cellspacing="0" cellpadding="2" border="0" align="center">
  <tr>
  <td align="left" valign="bottom"><span class="gensmall">
  <!-- BEGIN switch_user_logged_in -->
  {LAST_VISIT_DATE}

  <!-- END switch_user_logged_in -->
  {CURRENT_TIME}
</span><span class="nav">[url=http://{U_INDEX}]{L_INDEX}[/url]</span></td>
  <td align="right" valign="bottom" class="gensmall">
    <!-- BEGIN switch_user_logged_in -->
    [url=http://{U_SEARCH_NEW}]{L_SEARCH_NEW}[/url]
[url=http://{U_SEARCH_SELF}]{L_SEARCH_SELF}[/url]

    <!-- END switch_user_logged_in -->
    [url=http://{U_SEARCH_UNANSWERED}]{L_SEARCH_UNANSWERED}[/url]</td>
  </tr>
</table>







<!-- BEGIN catrow -->
<table width="756px" align="center" cellpadding="0" cellspacing="0" border="0" class="forumline">
  <tr>
  <td class="catCenter" colspan="3" style="background-image:url('http://img.xooimage.com/files110/9/a/f/sidebar-haut-4d3a711.png');background-repeat:no-repeat; height:143px; "><span class="cattitle">[url=http://{catrow.U_VIEWCAT}]{catrow.CAT_DESC}[/url]</span></td>

  </tr>
 
       <!-- BEGIN forumrow -->
     
       


              <span class="forumlink">[url=http://{catrow.forumrow.U_VIEWFORUM}]{catrow.forumrow.FORUM_NAME}[/url]</span>
          
<span class ="poststopics"> {catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
</span>

              <span class="desc_texte">{catrow.forumrow.FORUM_DESC}</span>

               </td>
         
       
      

              <span class="gensmall">   

[img]http://{catrow.forumrow.FORUM_FOLDER_IMG}[/img]


{catrow.forumrow.LAST_POST}
</span>
   


  
   

    <!-- END forumrow -->





<td class="catCenter" border="0" colspan="3" height="28" align="center" style="background-image:url('http://img.xooimage.com/files110/9/5/1/sidebar-bas-4d425e9.png'); background-repeat:no-repeat;height:130px;"> </td>
</table>
<br class="nav" />
  <!-- END catrow -->





<center>[img]http://img.xooimage.com/files110/9/0/d/qeel-4d40f37.png[/img]</center>
<table align="center" style="background-image: url('http://img.xooimage.com/files110/9/a/3/qeel-stat-4d9735e.png'); background-repeat: no-repeat; background-attachment: no-fixed; height:400px; width:850px;"cellpadding="3" cellspacing="1" border="0" class="forumline">
  <tr>
  </tr>
  <tr>
   <td style="background-color:transparent;" class="row1" align="right" width="100%">
<span style="gensmall"><span id="nb_messages">{TOTAL_POSTS}.<script type="text/javascript">document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/Nos membres/,"Nos graphistes");</script></span>
<span id="mb_inscrits">{TOTAL_USERS}<script type="text/javascript">document.getElementById('mb_inscrits').innerHTML=document.getElementById('mb_inscrits').innerHTML.replace(/membres enregistrés/,"graphistes inscrits sur notre forum.");</script></span>
<span id="newest">{NEWEST_USER}.
{RECORD_USERS}.
<script type="text/javascript">document.getElementById('newest').innerHTML=document.getElementById('newest').innerHTML.replace(/L’utilisateur enregistré le plus récent est/,"Le dernier graphiste inscrit est ");</script>
[b]{L_LEGEND}[/b]

    <!-- BEGIN ranks_legend_row -->
    [b]::[/b] <span style="font-weight:bold;color:#{ranks_legend_row.COLOR}">{ranks_legend_row.TITLE}</span>
    <!-- END ranks_legend_row -->
    <!-- BEGIN switch_oldlegend -->
    [b]::[/b] {L_WHOSONLINE_ADMIN} [b]::[/b] {L_WHOSONLINE_MOD}
    <!-- END switch_oldlegend -->

</td>
  
<td style="background-color:transparent;" class="row1" align="left" width="100%">
<span style="gensmall"><span id="online">{TOTAL_USERS_ONLINE}<script type="text/javascript">document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/ Enregistré/," graphiste(s)");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/Invité/, "curieux.");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/utilisateur en ligne/, "personne(s) sur le forum");</script>
</span>
</span>
{LOGGED_IN_USER_LIST}
</span></span>
</td>
  </tr>

<!-- BEGIN switch_birthdays -->

 <tr>
   <td style="background-color:transparent;" class="row1" align="center"><span class="cattitle">


    {L_CONGRATULATIONS_TO}: {BIRTHDAY_USER_LIST}
    <!-- IF SHOW_NEXT_BIRTHDAYS -->
     {L_NEXT_BIRTHDAYS}: {NEXT_BIRTHDAY_USER_LIST}</span>
</td>
    <!-- ENDIF -->
  

<!-- END switch_birthdays -->
</table>

<table width="100%" cellpadding="1" cellspacing="1" border="0">
<tr>
   <td align="left" valign="top"><span class="gensmall">{L_ONLINE_EXPLAIN}</span></td>
</tr>
  <td align="left"><span class="gensmall">[url=http://{U_MARK_READ}]{L_MARK_FORUMS_READ}[/url]</span></td></table>












<span style="text-shadow: #ffffff 1px 1px 1px; font-size: 9pt;"><center>[b]© ART-DESIGN.XOOIT.COM[/b]</center>[/url]</span>
<span style="text-shadow: #ffffff 1px 1px 1px; font-size: 7pt;"><center>Toute copie totale ou partielle est interdite.</center>[/url]</span>
 





   




<!-- BEGIN switch_user_logged_out -->
<form method="post" action="{S_LOGIN_ACTION}">
  <table width="100%" cellpadding="3" cellspacing="0" border="0" class="forumline">
  <tr>
    <td class="catHead" height="28"><a name="login">[/url]<span class="cattitle">{L_LOGIN_LOGOUT}</span></td>
  </tr>
  <tr>
    <td class="row1" align="center" valign="middle" height="28"><span class="gensmall">{L_USERNAME}:
    <input class="post" type="text" name="username" size="10" />
       {L_PASSWORD}:
    <input class="post" type="password" name="password" size="10" maxlength="32" />
         {L_AUTO_LOGIN}
    <input class="text" type="checkbox" name="autologin" />
       
    <input type="submit" class="mainoption" name="login" value="{L_LOGIN}" />
    </span> </td>
  </tr>
  </table>
</form>
<!-- END switch_user_logged_out -->

<br clear="all" />




Et mon code CSS :

Code: Sélectionner - Agrandir
.description{

   background-color:#a2b1b8;
   width:150px;
   height:200px;
   padding-top: 8px;
   padding-bottom:8px;
   padding-left:10px;
   padding-right:10px;
   margin-left: 15px;
   margin-bottom: 15px;
   margin-top: -10px;
   border-radius: 20px;
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;
   box-shadow: inset 1px 1px 20px 1px #a2b1b8;
   -moz-box-shadow: inset 1px 1px 20px 1px #a2b1b8;
   -webkit-box-shadow: inset 1px 1px 20px 1px #a2b1b8;}

.poststopics{
   width: 100%;
   color: #e1e6e7;
   font-family: arial, helvetica, sans-serif;
   letter-spacing: 1px;
   font-size:10px;
   padding-bottom: 3px;
}

.desc_texte {
   text-align: justify;
   marding-top: 3px;
   font-family: 'Lato', sans-serif;
   font-size: 12px;

}

.newoldlocked{

   background-color:#a2b1b8;
   width:150px;
   padding-top:35px;
   padding-left:15px;
   padding-right:15px;
   margin-right: 15px;
   border-radius:40px 40px 40px 40px;
}




Last edited by Yolaine on Sun 20 Mar 2016 - 19:45; edited 1 time in total
Forum
Author Message
Guig Esprit du Sage
Membre


Offline
Membre

Joined: 06 Feb 2015
Posts: 35
Niveau:
Point(s): 35
Moyenne: 1.00
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin

PostPosted: Sat 6 Feb 2016 - 17:42    Post subject: [Résolu] mise en page catégories Reply with quote

si j'ai bien compris, au lieu d'utiliser la mise en forme avec chaque forum qui prends une ligne dans la catégorie, le but c’est qu'il prenne une colonne, avec chaque élément (icône de status puis icône de forum puis titre et sous-forums puis modérateurs puis nombre de sujet puis nombre de messages puis dernier messages) l'un en dessous de l'autre au lieu qu'il soit de gauche à droite?

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 9 Feb 2016 - 22:42    Post subject: [Résolu] mise en page catégories Reply with quote

Pourrais-tu faire un schéma (avec paint ou autre) pour savoir clairement ce que tu veux réaliser ?

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 7 Mar 2016 - 19:31    Post subject: [Résolu] mise en page catégories Reply with quote

Oui j'ai fais un shema !
Voila !


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 8 Mar 2016 - 10:22    Post subject: [Résolu] mise en page catégories Reply with quote

Salut à toi,

Je me penche sur ton problème, cependant je peux déjà voir que ton code présente des erreurs, des balises qui s'ouvrent et se ferment à la volée !

Combien as-tu de catégories ? Tu veux les positionner sur une seule ligne ?


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 8 Mar 2016 - 12:17    Post subject: [Résolu] mise en page catégories Reply with quote

On va essayer par étape, tout d'abord commencer par jouer avec les catégories qui englobent les sous-forums. On définira leur contenu plus tard. Wink

Tes différentes catégories sont générées automatiquement (pour ne pas rentrer dans les détails) grâce aux lignes

Code: Sélectionner - Agrandir
<!-- BEGIN catrow -->
<!-- END catrow -->


Ce sont les délimitations du contenu de tes catégories. Le code à l'intérieur n'est écrit qu'une seule fois pour toutes ces catégories mais sera personnalisé par rapport à ton schéma catégories/forums.

_______________________________________

On va rajouter un wrapper, qui va toutes les englober dans une DIV :

Place une balise avant <!-- BEGIN catrow --> comme ceci
Code: Sélectionner - Agrandir
<div id="wrap_categorie">

Et referme-là après <!-- END catrow -->

Hop, un peu de CSS pour appliquer notre style flexbox (la doc, ICI) :
Code: Sélectionner - Agrandir
#wrap_categorie{
display: flex;
justify-content: space-between;
align-items: flex-start
}


Le flexbox fonctionne avec le système Conteneur + Contenu. Le conteneur est la div que nous avons créé. Les contenus sont les enfants directs de ton conteneur. C'est la balise qui arrive juste après notre DIV wrapper. Comme le code de la table se situe dans le CATROW, il y aura autant de tables générées que de catégories, donc autant d'enfants directs définissants les éléments contenus.

Tu peux définir la largeur de ce conteneur pour que toutes tes catégories rentrent !


Je te laisse avec ça pour l'instant. N'hésite pas à demander de l'aide et ensuite on passera à l'étape suivante. (la définition du contenu des catégories, les forums, qui reprennent le même principe avec
Code: Sélectionner - Agrandir
<!-- BEGIN forumrow --> et <!-- END forumrow -->
)

Bon codage Okay


Forum
Author Message
kieffer
Membre


Offline
Membre

Joined: 12 Nov 2009
Posts: 411
Niveau:
Point(s): 396
Moyenne: 0.96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

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

Wink
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



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 8 Mar 2016 - 12:24    Post subject: [Résolu] mise en page catégories Reply with quote

Salut kieffer ! 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: Wed 9 Mar 2016 - 19:00    Post subject: [Résolu] mise en page catégories Reply with quote

Oui je sais les code de e forum sont un fouillis totale c'et en partie pourquoi je ne m'en sort pas y'a trop de balises inutile je comprend pas pourquoi !
Merci en tout cas ! Je le fais et je te dis quand c'est fais !


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: Wed 9 Mar 2016 - 19:29    Post subject: [Résolu] mise en page catégories Reply with quote

Me revoilà alors j'ai fais ce que tu m'as dis et c'est assez bien par contre je voulais le faire pour les sous catégories et non les grosses catégoris de la page principale mais du coup si je remet le code html dans la partie qui concerne les sous catégories ça feras la meme chose non ? 

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: Thu 10 Mar 2016 - 10:47    Post subject: [Résolu] mise en page catégories Reply with quote

Salut à toi,

Le schéma que tu as donné représente les sous catégories ? Donc le fond bleu clair représente la délimitation d'une catégorie c'est bien ça ?


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: Thu 10 Mar 2016 - 14:19    Post subject: [Résolu] mise en page catégories Reply with quote

Oui je me suis très mal expliqué maintenant que je revois mon dessins donc je vais vous mettre une capture d'écran


Ca c'est une catégorie comme elles sont maintenant sur le forum
Moi je voudrais que à la place d'avoir des sous catégotie en ligne comme ça l'est actuellemnt que ça fasse des colonnes Maximum 3 par ligne !
Donc oui mon fond bleu clair c'est le fond de ma categorie


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: Fri 11 Mar 2016 - 12:26    Post subject: [Résolu] mise en page catégories Reply with quote

Salut à toi ! Very Happy

Il va falloir travailler autour de <!-- BEGIN forumrow --> et <!-- END forumrow --> également.
Comme tes sous catégories sont, ensemble, délimitées par la catégorie parente, il va falloir veiller aux dimensions de tout ça.

Je te propose d'oublier notre flexbox pour la simple raison qu'on ne peut pas en réaliser sur plusieurs lignes/colonnes en même temps en gardant un contrôle sur l'alignement du contenu. (d'après ce que j'ai tenté au moins).


Je te laisse une démo qui est rapide à mettre en place : (source : http://forum.alsacreations.com/topic-4-68687-1-Centrer-div-qui-contient-div… )

http://jsfiddle.net/FVEt2/430/

_______________________________________________________________________________________


Retiens que :
● Les dimensions de la catégorie est importante pour déterminer le nombre de sous catégories par ligne.
● La dimension des sous-catégories est importante aussi.
● Dès qu'une sous catégorie ne peut plus rentrer dans une ligne on passe à la suivante.
● Dans l'exemple on garde toujours une ligne centrée horizontalement, quelque soit le nombre de sous catégories.


Tes catégories seront toutes différentes par rapport au nombre de sous-catégories qu'elles possèdent.
Il va certainement falloir les éditer une à une mais elles n'apparaissent pas toutes dans ton code. (la fameuse génération automatique des catégories et sous catégories entre <!-- BEGIN catrow --> <!-- END catrow --> ET <!-- BEGIN forumrow --> et <!-- END forumrow -->

Un petit topo sur les sélecteurs que tu devra faire correspondre avec ton code.
Ici j'ai pris un code où apparait chacune des catégories et sous-catégories. Dis toi que ça n'apparaitra pas dans le code que tu édites.

https://jsfiddle.net/0ktoodbh/

J'ai une DIV qui va englober la totalité du code.
Des DIV qui vont englober chacune des catégories.
Des DIV qui vont englober chacune des sous catégories.

Ça nous permettra de faire la sélection des différents éléments...

Je te laisse avancer avec ça, bon codage ! ^^


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: Sun 13 Mar 2016 - 21:41    Post subject: [Résolu] mise en page catégories Reply with quote

Salut, d'abord merci pour ton aide mais j'ai absolument rien compris ! J'ai 2 codes differents qui ont le meme resultat, mais quans il s'agit de faire un site de A à Z ! La je dois integrer les balises Xooit à l'interieur je ne vais pas dupliquer les balise par le nombre de catégorie ça serais un bazard total !

Forum
Author Message
Kyosuke
Contributeurs


Offline
Contributeurs

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

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

Tu en es où actuellement ? On peut voir un aperçu en live ?
_______________________


Forum
Author Message
Contenu Sponsorisé





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

Display posts from previous:   
Reply to topic Page 1 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