Structure des catégories & plus

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

Résolu Structure des catégories & plus

Message par Totoplasma le Ven 29 Aoû 2014 - 1:49

Bonsoir à tous (:
Je suis actuellement en train de coder mon forum de test et je rencontre un problème (voire plus) que je n'arrive décidément pas à corriger :/

Voici le lien du forum en question :
http://espace-temps-rp.forumactif.com/

A priori rien d'alarmant concernant l'affichage des catégories, c'est tout à fait ce que je cherche à obtenir, seulement cela se complique lorsque je rajoute une deuxième catégorie (j'utilise la structure "Séparer les catégories sur l'index → Complet"). En effet, cette deuxième catégorie apparaît différemment:
- la barre contenant les liens des sous-forums a disparu (en dessous du bloc principal je crois)
- le fond du forum (td.bodyline me semble-t-il) se coupe après la deuxième catégorie et le QEEL déforme tout le forum.
Si j'ajoute une troisième catégorie, elle apparaît au dessus du QEEL mais ce semble pas comprise dans le td.bodyline.
(J'espère avoir été assez clair au niveau des description des déformation, je pourrai ajouter des screens si nécessaire).

J'ajoute que si je clique sur le nom de la catégorie, la disposition des sous-forum est catastrophique, comme vous pourrez le voir ici:
http://espace-temps-rp.forumactif.com/c1-paperasse

Ce n'est pas tout, j'ai réussi à visualiser la barre contenant les sous-forums pour la seconde catégorie, et j'ai remarqué que les sous-forums étaient les mêmes que dans la première (alors que je n'avais créé qu'un seul sous-forum pour cette deuxième catégorie...).
J'ai codé ces catégories moi-même (ce n'est pas la première fois que j'en code) mais j'avoue que mon codage fait un peu "rafistolage", notamment en ce qui concerne les tableaux que je ne gère pas bien du tout ><.

Voici tout d'abord mon template index_box :
Spoiler:
Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
   <!-- BEGIN inc -->

   <!-- 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">&nbsp;</td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <!-- END inc -->
          <span class="forumlink">
                                  <div class="catname">{catrow.forumrow.FORUM_NAME}</div><br />
            <div class="barrecat"></div></span>
             
        <table id="catcont">
          <tr><div class="ssforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
          <script type="text/javascript">
jQuery('.ssforums').html(jQuery('.ssforums').html().replace(/, /g,' • ')).removeAttr('id');
</script>
                          </tr>
      <tr><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="row3 over" align="center" valign="middle">
                        <div class="lastpost">   <span class="gensmall">{catrow.forumrow.LAST_POST}</span> <br />
                        <p>{catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets</p>
                        </div>
      </td>
                        {catrow.forumrow.FORUM_DESC}
          </tr></table>
   </tr>
<br />
   <!-- 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><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Voici mon CSS qui concerne cette partie :
Spoiler:
Code:

td.bodyline {
  border-left: 30px solid  #1b2433;
  border-right: 30px solid #1b2433;
  background: rgba(255,255,255,0.4);
  top: 0px; bottom: 0px;
  border-top: 0px;
  border-bottom: 0px;
  padding: 0px;
  box-shadow: 4px 0px 0px #7d98b5, -4px 0px 0px #7d98b5;
}
/*CATEGORIES*/

.catname, .forumlink {
font-family: 'Yanone Kaffeesatz', sans-serif !important;
  font-size: 45px !important;
  color: #1b2433 !important;
  text-shadow: 1px 0px 0px #7d98b5 !important;
  text-transform: uppercase;
  font-weight: light;
  width: 33% !important; text-align: center !important;
}

.catname::before{
  content: '“';
}

.catname::after{
  content: '”';
}

.forumlink:hover {
  text-decoration: none !important;
}

.barrecat {
  width: 33%;
  border-bottom: 5px solid #1b2433;
  margin-top: -63px;
  margin-left: -1.5px;
}

.ssforums, .ssforums a {
  width: 99.7%;
  margin-left: -1px;
  border-top: 2px solid #7d98b5;
  border-bottom: 2px solid #7d98b5;
  padding: 2px;
  font-family: 'Share', cursive !important;
  color: #7d98b5 !important;
  letter-spacing: 1px !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  text-shadow: 1px 0px 0px rgba(0,0,0,0.3) !important;
  text-decoration: none !important;
  background: #1b2433;
  margin-top: -2px;
}

.ssforums a:hover{
  color: #A1BCD8 !important;
  text-decoration: none !important;
}
 
#catcont {
  width: 100.2%;
  margin-left: -1px;
  background: #1b2433;
  height: 130px;
  border-bottom: 2px solid #7d98b5;
  border-collapse: collapse;
  margin-top: -36px;
  padding: 0px;
  position: relative;
  display: inline-block;
}

#catcont td{
  border-collapse: collapse;
}

.lastpost {
  width: 142px;
  }

.lastpost a{
  text-decoration: none !important;
  color: #7d98b5 !important;
    font-family: 'Share', cursive !important;
  font-size: 11px !important;
}
.lastpost a:first-of-type:hover {
  text-decoration: none !important;
  color: #A1BCD8 !important;
}
.lastpost a:first-of-type::before {
  content: '«';
}
.lastpost a:first-of-type::after {
  content: '»';
}
.lastpost a.gensmall::before {
  content:' ' !important;
}
.lastpost a.gensmall::after {
  content: ' ' !important;
}

.lastpost span.gensmall {
  color: #fff !important;
  font-family: 'Share', cursive !important;
  font-variant: small-caps !important;
  font-size: 12px !important;
  letter-spacing: 2px;
}
.lastpost p {
  color: #fff !important;
  font-family: 'Share', cursive !important;
  text-transform: lowercase;
  font-size: 10px !important;
  letter-spacing: 1.4px;
}
 
.catdesc {
 border-right: 5px solid #1b2433;
  text-align: center;
  background: #7d98b5;
 font-size: 12px;
  color: #1b2433;
    font-family: 'Share', cursive !important;
  font-style: italic;
  width: 350px;
margin-top: -1px;
}
.catimage {
  position: relative;
  display: inline-block;
  width: 286px;
}
.catimage img {
  margin-left: -1px; margin-top: -1px;
}


Et aussi ce que je met dans les description des catégories:
Spoiler:
Code:

<td class="catdesc">“Description de la catégorie”</td><br /><td class="catimage"><img src="url-de-l-image"></img></td>

S'il faut davantage de précisions, j'éditerai le message.
Merci beaucoup d'avance à ceux qui tenteront de m'aider Very Happy


Dernière édition par Totoplasma le Ven 29 Aoû 2014 - 14:15, édité 1 fois

Totoplasma
Nouveau membre

Messages : 3
Inscrit(e) le : 29/08/2014

http://espace-temps-rp.forumactif.com/
Totoplasma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Structure des catégories & plus

Message par Self le Ven 29 Aoû 2014 - 3:39

..
Bonjour et Bienvenue
sur le Forum des Forums ForumActif
Vu que vous êtes nouveau, voici quelques sujets importants :
Sécurité : mail de fondation - Ce qu'il ne faut pas faire
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse Wink

Je pense qu'il va falloir régler les problèmes petit à petit, donc pour commencer on a quelques erreurs de structure, que j'ai corrigé, voici le template à mettre à la place de l'actuel :
Code:
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
   <!-- BEGIN inc -->
   <!-- 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">
       &nbsp;
   </td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>
   <td>
      <!-- BEGIN inc -->
      <!-- END inc -->
      <div class="forumlink">
         <div class="catname">
             {catrow.forumrow.FORUM_NAME}
         </div>
         <br/>
         <div class="barrecat">
         </div>
      </div>
      <table id="catcont">
      <tr>
         <td>
            <div class="ssforums">
               {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </div>
            <script type="text/javascript">
                        jQuery('.ssforums').html(jQuery('.ssforums').html().replace(/, /g,' • '));
                     </script>
         </td>
      </tr>
      <tr>
         <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="row3 over" align="center" valign="middle">
            <div class="lastpost">
               <span class="gensmall">{catrow.forumrow.LAST_POST}</span><br/>
               <p>
                  {catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
               </p>
            </div>
         </td>
      </tr>
      </table>
       {catrow.forumrow.FORUM_DESC}
   </td>
</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>
<img src="{SPACER}" alt="" height="5" width="1"/>
<!-- END tablefoot -->
<!-- END catrow -->

Pour ce qui est de la description mettre les balises <br /> entre les balises de tableau(tr, th, td...) ce n'est pas possible et vous devez mettre les balises table et tr avant de placer les td, l'arborescence d'un tableau en HTML pourrait par exemple être : table>tbody>tr>th ou td>Le contenu des cellules
Voici un tutoriel pour les tableaux en complément : http://forum.forumactif.com/t370430-apprendre-a-faire-un-tableau

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

Résolu Re: Structure des catégories & plus

Message par Totoplasma le Ven 29 Aoû 2014 - 11:48

Bonjour et merci de votre réponse =)
J'ai mis le nouveau template et fait quelques modifications, tout marche impeccablement maintenant :3
Seulement il me reste encore un problème, celui des sous-forums identiques, comme vous pourrez vous en rendre compte sur l'index du forum, "Extras" a les mêmes sous-forums que "Paperasse" :/
Voici un screen de la page catégorie & forums : http://www.hapshack.com/images/UoNc4.png

Egalement, une dernière chose :
Malgré un padding de 0px sur le td.bodyline, il restait toujours une fine bordure transparente de part et d'autre du bloc de la catégorie.
J'ai mis un box-shadow inset pour régler le problème mais ça m'arrangerai qu'il y ai une solution qui fasse moins "bricolage" que ça, si c'est possible :/
Le CSS en question :
Spoiler:
Code:
td.bodyline {
  border-left: 30px solid  #1b2433;
  border-right: 30px solid #1b2433;
  background: rgba(255,255,255,0.4);
  border-top: 0px;
  border-bottom: 0px;
  padding: 0px;
  box-shadow: 4px 0 0 #7d98b5, -4px 0 0 #7d98b5, inset -1.5px 0px 0px #1b2433, inset 1.5px 0px 0px #1b2433;
}

Merci d'avance =D

Totoplasma
Nouveau membre

Messages : 3
Inscrit(e) le : 29/08/2014

http://espace-temps-rp.forumactif.com/
Totoplasma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Structure des catégories & plus

Message par Self le Ven 29 Aoû 2014 - 14:05

Bonjour,

Pour les sous-forum remplacez ce passage :
Code:
<div class="ssforums">
    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</div>
<script type="text/javascript">
    jQuery('.ssforums').html(jQuery('.ssforums').html().replace(/, /g,' • '));
</script>

Par :
Code:
<div id="sf" class="ssforums">
   {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</div>
<script type="text/javascript">
   jQuery('#sf').html(jQuery('#sf').html().replace(/, /g,' • ')).removAttr('id');
</script>

Votre template overall_header est-il modifié ? Si oui, cherchez dans celui-ci cette ligne :
Code:
<td class="bodyline">

Et si vous voyez un <br> après celle-ci supprimez le (le <br>) Wink !

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

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

Résolu Re: Structure des catégories & plus

Message par Totoplasma le Ven 29 Aoû 2014 - 14:14

Bonjour,
Tout est parfait désormais, merci beaucoup de votre aide !
Problème résolu donc =)

Totoplasma
Nouveau membre

Messages : 3
Inscrit(e) le : 29/08/2014

http://espace-temps-rp.forumactif.com/
Totoplasma 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