Sujets similaires

Bonjour, Bonsoir CSSActif !

Alors voilà. Je suis tombée sur quelque chose de particulièrement intéressant sur un forum. Je n'ai pas envie que l'un me fasse tout, ni même que l'on me fasse un tutoriel, si vous savez comment faire. Juste m'aiguillez, et m'apporter votre aide.

Je vous montre l'effet que je souhaite comprendre : http://celestinaterra.forumgratuit.org/

Sur ce forum, les catégories sont divisés en blocs, pour chaque forum avec sa description. j'avais déjà vu cet effet me semble-t-il sur le Forum des Forums, et l'un de leur sujet le reprend (sauf erreur de ma part) que voici : http://forum.forumactif.com/t184452-categorie-composite

Mais je reste assez... Septique. Le réalisé simplement que par les descriptions d'un premier forum, c'est envisageable, évidemment mais... Je ne pense pas que le premier forum s'y soit prit ainsi. Vu que leur image "dentelle" est l'image "Pas de nouveau message". Du coup, j'imagine qu'il y a eût forcément une modification des templates.

Mais pour modifier ces templates... Imaginons, je fais un tableau à deux colonnes, et je mets la même chose dans les deux cellules (forumlinks, description du forum, liens des sous forums, les images new/no new etc. ). Possible ? où il y aura tout simplement le forum en double gauche/droite ?
Existe-t-il une astuce ? Ou faut-il seulement passer tout via les descriptions, et s'amuser à appeler la variable des images no new/new ? (D'ailleurs, je ne pense pas cela possible, je ne pense pas qu'elles marchent ailleurs que dans les templates...Enfin celles-là.)

Bref... Beaucoup de question, et grand besoin que l'on éclaire ma lanterne !

Merci d'avance !

Ketsia a écrit:: Mais pour modifier ces templates... Imaginons, je fais un tableau à deux colonnes, et je mets la même chose dans les deux cellules (forumlinks, description du forum, liens des sous forums, les images new/no new etc. ). Possible ? où il y aura tout simplement le forum en double gauche/droite ?

Avec phbb2 tout est possible. Mais niveau template faut bien connaître avant de ce lancer dans ce genre d'idée. Je ne connais pas grand chose au balise [ bla bla ] du template. Mais si tu fais un tableau HTML et que tu met admettons une largeur de 800 pixel tu as 400 pixe pour hmmm... Ta double catégories (on a dire ça comme ça). Tu mets les balises du template [forum_link] (il me semble XD) et les image no new et compagnie et sa devrait le faire.

Après je ne sais pas si j'ai bien compris ta demandes mon français me joue des tours en ce moment. e_e"

L'effet que tu recherches ne peut en effet pas être atteint avec la méthode des "catégories composites" présentée par le FdF. Ca n'a strictement rien à voir. Smile

Dans ton cas, il faut toucher au template index_box pour ajouter 3 choses :
- une DIV qui va englober toute la catégorie
- une DIV qui englobera chaque forum
- une DIV vide, avec la class "clear", après les forums et avant la fin de la catégorie (elle est importante vis à vis des float qu'on applique plus tard en CSS)

A partir de là, tout repose sur le CSS, où il faudra :
- donner une largeur fixe aux DIVs des forums
- leur appliquer la propriété float, pour qu'ils se mettent les uns à côté des autres

Bref, en gros c'est ça. Smile

En tableau, tu ne pourras pas gérer la façon dont les forums s'alignent. ^^

J'espère avoir répondu à tes interrogations. Quant à l'application, eh bien n'hésite pas à demander de l'aide si besoin, notamment pour savoir où placer ces fameuses DIV... si tes propres tests demeurent infructueux. Smile

Undead : J'ai testé cela hier soir, cela ne marche pas. Si j'ai compris ce que tu as dis.

Doare : Pour modifier ce template là, j'ai assez l'habitude, donc cela devrait aller. Mais j'avoue avoir l'habitude de bien plus travailler avec des tableaux que des floats... Que je n'ai jamais utilisé il me semble.

Par contre, peux-tu me donner des précisions sur la Div vide, avec la class "clear" ? Je ne comprend pas à quoi cela correspond, ni même à quoi elle peut servir.... Merci d'avance Wink

Il s'agit de ceci :

Code:: <div class="clear"></div>

Cette class est présente dans le CSS de base de Forumactif. Elle comprend la propriété suivante :

Code:: .clear {
clear: both;
}

Cela permet d'annoncer la fin des float qui précèdent. Ainsi, les éléments "flottants" sont pris en compte dans la taille de l'élément parent, en l'occurrence la DIV "catégorie". Sans ça, si tu essayes par exemple de donner une bordure à la catégorie, ça ne pourra pas fonctionner car les éléments sont considérés comme sortis du flux de la page et ne sont pas pris en compte. La div "clear" oblige à le faire. Smile

Dans le template, tu la placeras juste avant la balise de fermeture de la DIV "catégorie".

Quant à l'histoire des tableaux, au final tu sais, les forums restent des tableaux. Peut-être d'ailleurs que tu devras déplacer les balises de début et de fin du tableau dans le template, pour avoir bien un tableau par forum. Enfin, tu verras par toi-même. Smile

Pas besoin d'utiliser une div vide, il suffit de rajouter une classe clearfix !

Code:: .clearfix:after {
display:table;
content:"";
clear:both;
}

C'est ce qu'ils utilisent dans les grilles CSS @o@

Pour ton histoire de template, il va falloir que tu vires les tableaux pour mettre des div '_' Je viens de faire ça rapidement à la truelle : http://lostmindy.forumgratuit.org/ (ce lien est susceptible d'être périmé très vite XD)

Globalement tu dois mettre dans un div toute la partie entre les balises suivantes :

Code::

Or, comme tu t'en doutes, ça risque d'être difficile vu qu'on est dans un tableau ^^'

Merci de vos réponses !

Par contre Christa je n'ai rien entre les balises code dans ton message...

Par contre, il y a quelque chose encore que je n'ai pas compris.
Quand je prend le template d'origine, je remplace donc tous les tableaux, cellules, etc par des div ?
La div clearfix, je la positionne où ?

Et j'ai seulement à le faire une fois ? Ou faut-il que je garde par exemple en esprit le fait que je veux deux forums côté à côte ? Donc partir avec une base d'un tableau à deux colonne avant de partir à modifier les div ?

(Non, non je ne suis pas fatiguée. Et je crois que j'ai presque rien compris. )

Ah oui désolée, un petit bug.

Le principe est de faire des div flottantes de largeur 50% (ou un peu moins). Les forums se placeront automatiquement côte à côte tant qu'il y aura de la place.

Donc grosso modo en pratique tu as par exemple quelque chose de ce genre :

Code:: 
<div class="UnForum clearfix">
TOUT LE CODE D'UN FORUM (image de catégorie, description, sous forums, statistiques)
</div>

Peut-être qu'une méthode "simple" serait de simplement faire de la partie entre les BEGIN/END une seule cellule (tr>td) et d'y mettre tes div, et à l'intérieur des div un nouveau tableau. A toi de voir, d'expérimenter, de tester, jusqu'à ce que ça marche o/

Je comprends soudainement mieux, merci bien ♥ !
Je l'avoue, les floats et moi, c'est la première fois !

Est-il possible de laisser le sujet ouvert si jamais j'ai d'autres questions, ou je réouvrirais un autre sujet, si jamais ?

On peut le laisser ouvert le temps que tu expérimentes, tant que tu ne considères pas le sujet comme résolu (il te faudra cependant répondre si les modérateurs uppent le sujet)

Merci beaucoup ! J'y veillerais dans ce cas !

***

J'ai commencé à y travailler dessus, c'est vrai que le tableau risque de me donner du fil à retordre.
J'ai fais plusieurs essaie, j'arrive par exemple à faire des forums des blocs, etc. Mais ils ne se mettent pas les uns après les autres. Alors il doit y avoir encore quelque chose que je n'ai pas compris, et j'imagine que c'est encore cette histoire de float....

Imaginons, donc en css :
1) Un cadre autour des catégories
2) Un autre pour les forums, avec une largeur donc de 50%. C'est ici que j'ajoute un float ? Left ? Et c'est aussi autour de ce forum que je dois ajouter ceci ?

Code:: .clearfix:after {
display:table;
content:"";
clear:both;
}

Je sais je mets du temps à comprendre bwhahaha. *sors*

Hello Ketsia.

Tu peux mettre le clearfix sur les catégories aussi.

Code:: <div class="UneCategorie clearfix">

<div class="UnForum clearfix">
TOUT LE CODE D'UN FORUM (image de catégorie, description, sous forums, statistiques)
</div>

</div>

C'est peu ou prou ce que j'ai fait sur mon forum de test, mais de mon côté j'ai viré tous les tableaux.

La classe "clearfix" permet de te débarasser du problème de dépassement des flottants. La classe UneCategorie te permettra de donner un cadre à tes catégories. La classe UnForum, c'est à elle que tu dois mettre le float:left (vu que ce sont les forums qui doivent "flotter") et la largeur.

ATTENTION : La largeur, c'est assez alambiqué. Si tu mets des marges, un padding, on a vite fait de dépasser 100% au total et hop saut de ligne. Tu dois t'arranger pour que un forum n'occupe que la moitié de l'affichage, comme ça "il y a de la place" à côté de lui et un deuxième forum viendra s'y mettre. Je ne sais pas si je suis claire...

Un peu mettre deux classes d'affilée ainsi ? Tu viens de m'apprendre quelque chose, je l'ignorais !
C'est plus clair ! Je vais me battre avec les tableaux dans ce cas ! Merci !

*repars essayer*

Je suis désolée pour le double post... Mais étant donné que je garde le même sujet pour le même "soucis" de template ._. ... Bref...

Alors voilà j'ai réussis à parvenir à mettre (à l'arrache, c'était juste pour tester) les forums les uns à côtés des autres... Mais j'ai un petit soucis que je ne parviens pas à résoudre.

Mes titres de catégories ne sont plus avant les forums, mais après... Ce qui n'est pas très pratique avouons le.

Petit screen pour illustrer : https://2img.net/h/oi47.tinypic.com/346xfnq.jpg

et voici mon template....

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
   <td valign="bottom">
      
      <span class="gensmall">{LAST_VISIT_DATE}<br />
      {CURRENT_TIME}<br />
      </span>
      
      <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
   </td>
   <td class="gensmall" align="right" valign="bottom">
      
      <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
      <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
      
      <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
   </td>
</tr>
</table>
<div class="categorie clearfix"><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>

</tr>


<tr>
   
   <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <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>


<tr>

<div class="forum clearfix">


      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />


      <h{catrow.forumrow.LEVEL} class="hierarchy">
         <span class="forumlink">
            <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
         </span>
      </h{catrow.forumrow.LEVEL}>
      <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
      <span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
</div>
</tr>


<tr>
   
   <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>


</table><img src="{SPACER}" alt="" height="5" width="1" /></div>

Merci d'avance x_x

Hello !

C'est un peu normal en fait x) Regarde, juste après le BEGIN forumrow, tu as un < tr > < div > ! Tu viens de briser les règles de construction d'un tableau ! Il manque la cellule :

Code:: <tr><td>
<div class="UnForum clearfix">
Contenu
</div>
</td></tr>

Forcément, il perd un peu la boule @o@

.... Alors là, j'ai honte ! Merci !

Seulement à présent, les blocs des forums se retrouvent les uns en dessous des autres (j'ai rien changé d'autre.) ._. ....

Ouais, je pense que c'est normal, j'ai oublié de t'expliquer ça (je l'avais oublié moi même) Bon, comment dire ça simplement...

Tout ce qu'il y a entre les balises BEGIN forumrow et END forumrow, c'est une "boucle", qui se répètera tant qu'il y aura des forums. En l'occurence ici, nous avons donc pour chaque forum une nouvelle ligne de tableau.

Il faut donc que tu t'arranges pour que la cellule contienne TOUS les forums.

En d'autres termes, pour qu'elle soit en dehors de la boucle :

Code:: <tr><td>
TES FORUMS DANS DES DIV FLOTTANTS
</td></tr>

En théorie je pense avoir compris. Mais en pratique, pas vraiment. La boucle, tout ca j'ai compris. Mais pour m'arranger à ce que la cellule contienne tous les forums... N'est-ce pas déjà le cas ?
La seule chose que contient cette cellule, c'est juste une div flottante avec les variables du forum à l'intérieur. Mais donc avec la boucle j'ai toujours une nouvelle cellule, ça j'ai compris. Mais je ne visualise pas comment je peux faire pour la sortir de la boucle... ôO...

Je t'en ai pourtant fait une démonstration XD

Bon, démonstration plus pratique. Voici ce que je t'ai indiqué comme code :

Code:: <tr><td>
DIV FLOTTANT CONTENANT UN FORUM
</td></tr>

Voici le code source qui s'affichera en pratique :

Code:: <tr><td>
DIV FLOTTANT CONTENANT UN FORUM

DIV FLOTTANT CONTENANT UN FORUM

DIV FLOTTANT CONTENANT UN FORUM

DIV FLOTTANT CONTENANT UN FORUM

DIV FLOTTANT CONTENANT UN FORUM

DIV FLOTTANT CONTENANT UN FORUM

(etc)
</td></tr>

Avec l'ancienne version, c'est à dire ceci :

Code::  <tr><td>
DIV FLOTTANT CONTENANT UN FORUM
</td></tr>

Voici le code source résultant :

Code:: <tr><td>
DIV FLOTTANT CONTENANT UN FORUM
</td></tr>
<tr><td>
DIV FLOTTANT CONTENANT UN FORUM
</td></tr>
<tr><td>
DIV FLOTTANT CONTENANT UN FORUM
</td></tr>
<tr><td>
DIV FLOTTANT CONTENANT UN FORUM
</td></tr>
<tr><td>
DIV FLOTTANT CONTENANT UN FORUM
</td></tr>
(etc)

Est-ce que tu comprends maintenant ? XD

Aaah.... Juste en déplaçant le commentaire ? Cela doit être pour ça, que je n'avais pas réellement compris.
J'ai modifié sur mon template, et a moins de mettre encore plantée, cela n'a rien changé..

Code:: <tr><td>


<div class="UnForum clearfix">
      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />


      <h{catrow.forumrow.LEVEL} class="hierarchy">
         <span class="forumlink">
            <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
         </span>
      </h{catrow.forumrow.LEVEL}>
      <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
      <span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></div>


</td></tr>

Tu as bien suivi mes remarques sur le fait qu'il fallait ajuster la largeur pour que deux forums puissent être côte à côte ? (Je peux avoir le lien ? Je ne crois pas que tu l'aies donné x_x)

Ah oui pardon, je te donne le lien tout de suite, je pensais l'avoir fait !
Le voici : Lien supprimé.

J'ai mis la largeur à 30% juste pour tester pour l'instant, donc normalement ca devrait passait. Et ca passait bien deux par deux, quand j'avais le soucis avec le titre de catégorie en dessus :O !

Histoire d'être sûre, tu as bien publié le template mis à jour ?

D'après le code source, c'est toujours des lignes, donc je plussoie la remarque de Doare x)

Sûre ! Je viens de le supprimée et de le remettre et publiée, et toujours aucune modif...

Catégories dites "composites".

Catégories dites "composites".

Sujets similaires

Sujets similaires

Partenaires Or