"Dernier message" texte en diagonal et repositionné

[Brotherhood]

Bonsoir !

Alors voila, j'ai un soucis que je ne sais pas comment régler ! Voici mon forum test : http://brotherhood.forumactif.fr

Comme vous pouvez le voir, je me suis contentée de faire une image "test" pour la zone "Dernier message" dans les catégories.
Celle-ci en fait :

Spoiler:

Je l'ai mise ainsi pour que mon problème soit plus clair.
En fait, j'aimerais que le texte où s'affiche le titre du dernier sujet actualisé, la date du message et le nom du posteur, soit vers le bas de mon image et qu'il soit mis en diagonal afin de suivre les lignes de mon image.

Voici mon template index_box

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
<!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead --><center><div class="titrecat">{catrow.tablehead.L_FORUM}</div></center><DIV CLASS="fond_forumline">
 
  <table class="forumline" width="98%" border="0" cellspacing="1" cellpadding="0">
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="80%">
        <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>
          <img src="http://img11.hostingpics.net/pics/529147titre1.png">
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
 
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="98"><img src="{SPACER}" height="94" width="98" alt="." /></td>
      <!-- END inc -->
 
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="70%" height="50">
        <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}>
 
        <!--
  ******************************************************************
  ***** Personnalisation d'affichage des forums et sous-forums *****
  ******************************************************************
      Code proposé par Lostmindy sur CSSActif
      http://www.css-actif.com
  ******************************************************************
-->

<table width="100%" cellspacing="0" cellpadding="0">
  <tr>
      <td valign="center" align="center">
        <div class="forumdesc">
            <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
            <span class="gensmall">
              <!-- BEGIN switch_moderators_links -->
              {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
              <!-- END switch_moderators_links -->
            </span>
        </div>
      </td>
      <td valign="center" align="center">
        <div class="listeforums">
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </div>
      </td>
  </tr>
</table>

<!--
  *************************************************
  ***** Fin des personnalisations d'affichage *****
  *************************************************
-->
      </td>
   
          <!-- BEGIN forum_link_no -->
 
      <td class="row3 over" align="center" valign="middle" height="50" width="20%">
                <span class="gensmall">{catrow.forumrow.LAST_POST} <br /><br /> <br /> <br /> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></span>
           
        <span class="gensmall"><b>{catrow.forumrow.TOPICS}</b> sujets <b>&</b> <b>{catrow.forumrow.POSTS}</b> messages</span><br/><br/></td>
          <!-- END forum_link_no -->
   
  <!-- 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></div><center><img src="http://img15.hostingpics.net/pics/608103bascat2.jpg" alt="" /></center><!-- END tablefoot --><!-- END catrow -->

Je ne sais même pas si cela est possible mais je vous remercie d'avance.

Bonne soirée.

[skysky]

Bonsoir,

Il faut ajouter un peu de css ...

Commence par reperer ceci :

Code:

<span class="gensmall">{catrow.forumrow.LAST_POST} <br /><br /> <br /> <br /> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></span>
           
        <span class="gensmall"><b>{catrow.forumrow.TOPICS}</b> sujets <b>&</b> <b>{catrow.forumrow.POSTS}</b> messages</span><

Tu mets une div avec classe css de ce genre :

Code:

.incline {
-webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  transform: rotate(15eg);
}

ce n'est le CSS qui ne fait que l'inclinaison.

Il faudra changer les valeurs pour adapter a ton image

Bon courage

[Brotherhood]

Bonsoir ! Merci de ta réponse

Pour la div classe à rajouter, je lui donne bien comme nom "incline" mais est-ce que j'entoure de cette classe toute la portion de template que tu m'as citée ? J'ai essayé ça et d'autres combinaisons... Mais dans tous les cas, rien ne fonctionne

[skysky]

Bonjour,

Alors je viens de tester rapidement sur mon forum et ca fonctionne.

Tu remplace :

Code:

<span class="gensmall"><b>{catrow.forumrow.TOPICS}</b> sujets <b>&</b> <b>{catrow.forumrow.POSTS}</b> messages</span>

par :

Code:

<div class="incline"><span class="gensmall"><b>{catrow.forumrow.TOPICS}</b> sujets <b>&</b> <b>{catrow.forumrow.POSTS}</b> messages</span></div>

Dans ton css tu mets :

Code:

.incline {
  -webkit-transform: rotate(XXdeg);
  -moz-transform: rotate(XXdeg);
  -ms-transform: rotate(XXdeg);
  -o-transform: rotate(XXdeg);
  transform: rotate(XXeg);
  height:XXpx !important;
  width:XXpx !important;
  background-color:#transp;
}


Tu remplace les XX par tes valeurs.
Pour l'incliner comme tu veux je tenterais -15 pour voir et adapter ensuite.
Le -15 tu le mets dans la partie css "transform"

Il y a beaucoup de transform car c'est pour la plupart des navigateur (google chrome, firefox, ...)

Si cela ne marche marche pas peux tu me donner ton image de fond ou le texte doit apparaitre que je rectifie au besoin ?

Bonne journée

[Brotherhood]

Alors en fait, ça marche bien, mais c'est pas cette partie là que je veux bouger mais le, par exemple, "Votre 1er sujet...
Mar 3 Juil 2012 - 17:18
Nathane" avec le raccourci pour voir le dernier message

[skysky]

Donc c'est la partie "1er sujet" que tu veux mettre en diagonale ?
et 1 messages dans 1 sujets ?

[Brotherhood]

Oui, c'est cette partie là que je veux mettre en diagonale et mettre en bas de l'image !

Pour la partie X messages et X sujets en fait je pensais le mettre pas du tout là ! Sous la description ou sous l'image que j'ai faite justement pour la partie Dernier message, mais je sais pas encore.

[skysky]

Ok ben j'ai jamais fait mais ca doit pas etre impossible a faire.

on va tenter le coup.

Donc supprime la partie X messages dans X sujets. C'est cette partie :

Code:

<span class="gensmall"><b>{catrow.forumrow.TOPICS}</b> sujets <b>&</b> <b>{catrow.forumrow.POSTS}</b> messages</span>

Le div class="incline" je te propose de le mettre ou tu le souhaite.
Tu cherche :

Code:

<span class="gensmall">{catrow.forumrow.LAST_POST} <br /><br /> <br /> <br /> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></span>

et tu mets ceci a la place :

Code:

<div class="incline"><span class="gensmall">{catrow.forumrow.LAST_POST} <br /><br /> <br /> <br /> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></span></div>

Se pose alors le soucis de l'image de fond. je suppose qu'elle change en fonction si un nouveau message ou pas ou s'il est vérrouiller ?

[Brotherhood]

C'est parfait, ça marche ! Par contre, est-ce qu'il y a moyen de réduire le texte (lorsque j'utilise "font-size" dans le CSS ça ne marche pas) et s'il existe un moyen de "limiter" le texte (par exemple, que le texte soit coupé si la ligne dépasse une certaine grandeur, plutôt que de retourner à la ligne) ?

Pour l'image de fond, oui ça changera selon si c'est un nouveau message ou ancien ou verrouillé. Mais là c'est pas encore le cas vu que j'ai fait juste une image test ^^

[skysky]

Bonjour,

Merci pour ces informations.
Je vais donc continuer a tester de mon coté et je reviens dans la journée ou ce soir avec la solution. (Je travaille la journée donc pas très présent)

Je me baserais sur l'image fournie pour les tests

Pour le font-size ... essaye ceci :

Code:

font-size:10px !important;

remplace le 10 par ce que tu veux

Bonne journée

[Brotherhood]

Bonjour,

Ca ne marche toujours pas, comme hier.

Pas de problème pour le temps de réponse, je comprends

[skysky]

Bonsoir,

Bon je n'arrive pas a mettre l'image de fond ni réduire la taille de l'écriture.
Je vais continuer mes tests et te tiens au courant

[Brotherhood]

Merci beaucoup ! J'attendrai

[Brotherhood]

Du nouveau ?

[skysky]

Bonjour,

Désolé je n'arrive a rien.
Je passe la main

j'espère qu'une autre personne trouvera la solution

Bonne journée

[Brotherhood]

On m'a donné la solution ailleurs !

Il faut fusionner la classe "div class="incline"" avec la "span class="gensmall"" en faisant une balise "div class="gensmall incline"" et ça marche pour la personnalisation du texte !

Merci de ton aide, tu as quand même résolu le principal problème !

Problème résolu !

[skysky]

Super pour toi et merci pour l'info