Passer le titre de forum sur la zone de description

[kiarie]

Bonjour a tous!

Alors voila j'ai un petit soucis avec le codage de mes catégories. Pour aller avec le reste de mon code j'ai inserer une class "description" pour pouvoir décorer ma zone mais celle ci ce retrouve coupé par le titre de forum et n'étant pas experte en code de templat j'aimerais qu'une ame charitable m'aide a régler ce souci x)

Voici le probleme en image


Voici ma partie de code templat qui regroupe les deux class

Code:

<!-- 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="" 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}" style="padding-left: 10px; padding-right: 10px;" />
 </td>
 <td class="" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="70">
                  <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}>
                  <table><tr><td>
                    <span class="genmed">
                      <div style="overflow: auto; height: 60px; width: 400px; text-align: justify;"><div class="description">{catrow.forumrow.FORUM_DESC}</div></div></span>
                    </td><td><div class="ssforumbloc"><div class="sous-forum">
                    <span id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
                    <script type="text/javascript">
                      jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' <br /> ')).removeAttr('id');
                    </script></div></div>
                    </td></tr></table>
 </td>
 
<td align="center" valign="middle" height="70"><div class="derniermess">
                  <span class="gensmall">{catrow.forumrow.POSTS}</span> messages | <span class="gensmall">{catrow.forumrow.TOPICS}</span> sujets<br />
 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
                  </div></td>
 </tr>
 <!-- END forumrow -->

Et mon Css

Code:

.forumlink{
  font-family: 'Kaushan Script', cursive;
  font-size: 20px;
  color: #545256!important;
  letter-spacing: -1px;
  font-weight:normal;
  text-transform:uppercase;
  text-shadow: 1px 1px 0px #FFFFFF;
  margin-top: 10px;
  -webkit-transition-duration:2s,2s,2s,2s,2s,2s;
 -moz-transition-duration:2s,2s,2s,2s,2s,2s; 
  -o-transition-duration:2s,2s,2s,2s,2s,2s; 
 transition-duration:2s,2s,2s,2s,2s,2s;
}

.description{
  font-size: 10px;
  color: #CB2078;
  height: 60px;
  width: 390px;
  text-transform:uppercase;
  border-left: 2px solid #21CCD5;
  border-right: 2px solid #21CCD5;
  background-color: #F3EDE5;
  border-radius: 15px;
  margin-top: -16px;
}

Merci d'avance pour votre aide

[kiarie]

ptit up. ma version est prête je n'ai plus que ce souci a régler pour la mettre en ligne x)

[MlleAlys]

Bonjour,
vous avez une marge négative de 16px qui remonte votre description sous le titre, retirez la ligne margin-top: -16px; de votre css.

[kiarie]

Oui mais celle ci est placé exprès car sinon la partie description n'est pas a la même hauteur que les sous forum et derniers messages.

[MlleAlys]

Essayez dans ce cas de quand même supprimer la marge négative, mais d'aligner le contenu des cellules en bas de celles-ci, ce qui donne le template :

Code:

<!-- 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="" align="center" valign="bottom">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" style="padding-left: 10px; padding-right: 10px;" />
 </td>
 <td class="" colspan="{catrow.forumrow.INC_SPAN}" valign="bottom" width="100%" height="70">
                  <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}>
                  <table><tr><td valign="bottom">
                    <span class="genmed">
                      <div style="overflow: auto; height: 60px; width: 400px; text-align: justify;"><div class="description">{catrow.forumrow.FORUM_DESC}</div></div></span>
                    </td><td valign="bottom"><div class="ssforumbloc"><div class="sous-forum">
                    <span id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
                    <script type="text/javascript">
                      jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' <br /> ')).removeAttr('id');
                    </script></div></div>
                    </td></tr></table>
 </td>
 
<td align="center" valign="bottom" height="70"><div class="derniermess">
                  <span class="gensmall">{catrow.forumrow.POSTS}</span> messages | <span class="gensmall">{catrow.forumrow.TOPICS}</span> sujets<br />
 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
                  </div></td>
 </tr>
 <!-- END forumrow -->

Sinon, serait-il possible d'avoir un lien vers le forum s'il vous plait ? ça facilite les choses...

[kiarie]

Voici le lien du forum http://nyc-private.forumactif.info
J'ai fais les modifications que tu m'as dis et en effet ça marche bien par contre je ne sais pas pourquoi ça me fait des saut de ligne entre mes sous forum que je n'avais pas avant.

Code:

.sous-forum a{
  display: block;
  width: 100px;
  height: 15px;
  text-align: left;
  background-color: #F3EDE5;
  color: #21CCD5;
  text-transform:uppercase;
  text-shadow: 1px 1px 0px #FFFFFF;
  overflow: auto;
}

.sous-forum a:hover{
  color: #CB2078;
}

.ssforumbloc {
  height: 40px;
  overflow: auto;
  padding: 20px 0px 0px 0px;
  width: 115px;
  margin-top: -30px;
}

[MlleAlys]

Les modifications que j'ai faites n'en sont normalement pas à l'origine : vous avez dans le template un code pour un retour à la ligne entre les liens, et dans le css vous forcez un affichage de type bloc à ces liens, ce qui induit un nouveau retour à la ligne, d'où le saut de ligne.
Dans le style de .sous-forum a, modifiez display: block; en display: inine-block;

[kiarie]

C'est fait mais ça n'arrange pas les choses. j'ai perdu le fond le long du lien et l'espace entre les sous forum n'est pas égal.

[MlleAlys]

oups pardon, display: inline-block;
j'avais oublié le L

[kiarie]

ah c'est bon problème réglé! j'avais aussi un margin top -16 dans le "ss forum a" a la base que j'avais retiré. en le remettant ça règle le problème.

merci beaucoup de ton aide!

(pour info ton dernier code reglé aussi le souci mais j'avais toujours un espace supplémentaire au dessus des sous forum)

[MlleAlys]

L'espace supplémentaire au dessus vient du padding de 20px appliqué à .ssforumbloc... Actuellement ça fait beaucoup de bidouillage pour pas grand chose, genre pourquoi faire simple quand on peut faire compliqué !^^"
Mieux vaudrait retirer ce padding que vous ne souhaitez pas ( padding: 20px 0 0; ), augmenter la hauteur de l'élément de 40px à 60px, la même hauteur que les autres en fait du coup, ce qui semble assez logique vu que vous souhaitez les aligner, retirer la marge négative de 16px qui ne sert plus à rien avec l'affichage inline-block.
Le codage serait ainsi plus propre et plus simple, et donc ça pourrait éviter des problèmes d'affichages ou lors de modifications futures ^^

[kiarie]

En effet c'est aussi bien!^^
Ce code est une base de LS pour ça qu'il y a beaucoup de chose auquel je ne pense pas forcement ou ne connait pas l'effet mais j'ai appris beaucoup en codant cette version aussi bien avec les catégories que qeel et pa^^

Merci beaucoup de ton aide en tout cas!