Passer le titre de forum sur la zone de description

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

Résolu Passer le titre de forum sur la zone de description

Message par kiarie le Jeu 30 Avr 2015 - 20:20

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 Smile


Dernière édition par kiarie le Ven 1 Mai 2015 - 22:06, édité 1 fois

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Passer le titre de forum sur la zone de description

Message par kiarie le Ven 1 Mai 2015 - 20:29

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

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Passer le titre de forum sur la zone de description

Message par MlleAlys le Ven 1 Mai 2015 - 21:26

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.

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

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

Résolu Re: Passer le titre de forum sur la zone de description

Message par kiarie le Ven 1 Mai 2015 - 21:31

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.

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Passer le titre de forum sur la zone de description

Message par MlleAlys le Ven 1 Mai 2015 - 21:41

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...

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

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

Résolu Re: Passer le titre de forum sur la zone de description

Message par kiarie le Ven 1 Mai 2015 - 21:49

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;
}

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Passer le titre de forum sur la zone de description

Message par MlleAlys le Ven 1 Mai 2015 - 21:56

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;

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

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

Résolu Re: Passer le titre de forum sur la zone de description

Message par kiarie le Ven 1 Mai 2015 - 22:01

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.

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Passer le titre de forum sur la zone de description

Message par MlleAlys le Ven 1 Mai 2015 - 22:03

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

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

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

Résolu Re: Passer le titre de forum sur la zone de description

Message par kiarie le Ven 1 Mai 2015 - 22:06

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)

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Passer le titre de forum sur la zone de description

Message par MlleAlys le Ven 1 Mai 2015 - 22:13

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 ^^

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

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

Résolu Re: Passer le titre de forum sur la zone de description

Message par kiarie le Ven 1 Mai 2015 - 22:21

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!

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie 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