Sujets similaires

Bonsoir!

Voila, j'ai un gros problème. J'ai déjà posé ce problème à plusieurs endroits mais ceux qui ont bien voulu m'aider n'ont pas trouvé la solution.

Mon problème est un problème de modification de texte, celui dans la partie "Dernier message" des catégories, où est écrit le titre du dernier sujet actualité, la date et le pseudo du posteur.

https://i.servimg.com/u/f33/11/03/29/42/33352010.png

Comme vous pouvez le voir, j'ai incliné le texte, positionné d'une certaine manière... Mais ce que je voudrais faire, c'est pouvoir modifier la taille de la police de ce texte, la police et savoir si il existe un moyen de "limiter" la largeur de la zone de texte afin que le texte ne dépasse jamais l'image.

Je vous laisse mon code index_box et la zone CSS retouchée à ce niveau là.

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>

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


<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="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>



<tr>

<td class="{catrow.forumrow.inc.INC_CLASS}" width="98"><img src="{SPACER}" height="94" width="98" alt="." /></td>


<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}" width="100%" height="53">{catrow.forumrow.FORUM_NAME}</a><br />
</span>
</h{catrow.forumrow.LEVEL}>



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

{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}

</span>
</div>
</td>
<td valign="center" align="center">
<div class="listeforums">
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</div>
</td>
</tr>
</table>


</td>



<td class="row3 over" align="center" valign="middle" height="50" width="20%">
<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>





<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></div><center><img src="http://img15.hostingpics.net/pics/608103bascat2.jpg" alt="" /></center>

Code:: .incline {
-webkit-transform: rotate(-23deg);
-moz-transform: rotate(-23deg);
-ms-transform: rotate(-23deg);
-o-transform: rotate(-23deg);
transform: rotate(-23deg);
height:50px !important;
width:120px !important;
background-color:#transp;
margin-top:42px;
margin-left:30px;
font-size:5px !important;
}

Voici mon forum de test pour la vue globale http://brotherhood.forumactif.fr/

Merci d'avance, en espérant qu'ici je trouverai mon bonheur. Réduire texte "dernier message" [resolu] 333520fff

Réduire texte "dernier message" [resolu] 333520fff

Bonsoir,

Tout d'abord, pour modifier la taille de caractères, il faut utiliser la balise :

Code:: font-size

Par exemple :

Code:: font-size : 14px;

Tu as aussi cette balise :

Code:: font-weight

Qui te permet de mettre du texte en gras ou en italique, par exemple.

Pour limiter la taille du texte, afin que ça ne dépasse pas, tu peux utiliser cette propriété :

Code:: max-width

Par exemple :

Code:: max-width : 50px

La largeur ne dépassera pas 50 pixels.

Et enfin, si tu souhaites changer la police d'écriture, tu peux utiliser cette propriété :

Code:: font-family

Exemple :

Code:: font-family: Georgia;

Tu peux consulter ce site : http://www.siteduzero.com/tutoriel-3-13639-memento-des-proprietes-css.html
Qui va t'aider à trouver les balises qui te conviennent afin d'obtenir le résultat que tu souhaites.

PS : Si ce lien est considéré comme de la publicité, supprimé le.

En espérant t'avoir aidé.

Amicalement,
DexX

Juste une petite correction par rapport au message de DexX, font-weight ne permet pas de mettre un texte en italic, c'est font-variant qui peux faire cela; weight influant uniquement sur l'épaisseur de la police, qui peut prendre l'ensemble des valeurs suivantes :

normal - épaisseur normale, équivaut à 400
bold - texte épais, équivaut à 700
lighter - texte plus fin que son parent
bolder - texte plus épais que son parent
une valeur numérique (100, 200, 300, ... 900) correspondant à l'épaisseur

Sinon le reste est bon, ce que t'as indiqué DexX précédemment devrait faire ton bonheur, parviens-tu à te débrouiller avec ça Jusuchin ?

Je tiens à ajouter qu'il ne s'agit pas de "balises" mais de propriétés CSS.

Par contre j'ai vu ceci dans ton code pour la partie concernée :

Code:: 

<td class="row3 over" align="center" valign="middle" height="50" width="20%">
<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>

La balise <td ...> n'est pas fermée (il n'y a pas de </td> après le </div> final) ! C'est un grave problème structurel à corriger è_é (je tiens à préciser que les commentaires HTML fonctionnent aussi comme des balises, donc les règles d'imbrication des balises s'appliquent U.U)

Je te conseille aussi de transformer

Code:: <div class="incline"><span class="gensmall">

et leur fermeture plus loin

Code:: </span></div>

En ceci :

Code:: <div class="gensmall incline"> ... </div>

La classe gensmall a en effet parmi ses effets de gérer la taille de ton texte, quoi que tu ajoutes à la classe .incline ce sera toujours la mise en forme associée à .gensmall qui primera.

Dans ma solution, je garde la classe .gensmall qui peut toujours servir, mais j'ajoute juste après la classe .incline. Comme elle est indiqué en second, ses propriétés seront plus importantes que celles de .gensmall.

Il ne te restera plus qu'à utiliser les propriétés données par Ddex pour régler la mise en forme du texte.

Pour le "dépassement", dans la mesure où le cadre est rond, tu ne peux pas non plus faire de miracles puisque tu peux seulement donner une largeur fixe (or la largeur change dans un cercle ^^')

Alors merci tous les trois pour votre aide, qui m'a été précieuse ! Le font-size ne marchait pas mais maintenant oui, grâce à la solution de Christa avec la fusion des deux classes! (je n'aurais jamais pensé à ça)

J'ai également corrigé mes balises non-refermées...

Pour l'histoire de dépassement, je ne cherchais pas à vouloir que la largeur suive la forme, évidemment. Mais en fait, y a t-il un moyen pour que, si le pseudo est trop long, il ne dépasse pas du cercle ? (en fait, je n'ai pas le problème avec le titre du sujet et la date, qui s'adapte à la modification du texte mais le pseudo ne change pas)

En principe, le pseudonyme devrait se plier à la limite de taille (S'il ne fait pas 26 lettres...) O.O Tu as un exemple où il dépasse ?

A la rigueur si sur ton forum les membres ont des pseudos à rallonge tu peux utiliser la propriété CSS3 word-wrap : break-word; '_'

Hey ! Voilà, je m'incruste, mais j'ai trouvé un truc interessant sur Alsacréations : Il est possible de limiter le nombre de caractères d'un mot ou d'un lien... Au cas où ça servirait à quelqu'un :

Code:: -o-text-overflow: ellipsis; /** Pour Opéra **/
text-overflow: ellipsis; /** Pour tout le reste **/

Je ne pense pas que celà soit adapté pour la situation, vu que la plupart des longs pseudos sont composés de plusieurs mots. Je ne me sens pas du tout visé par cette phrase. *FUFU

Edit : Mouhahaha ! Dans l'exemple donné sur cette page, ça fonctionne avec les trucs divisés : https://developer.mozilla.org/en-US/docs/CSS/text-overflow Ce qui permet de rajouter, par exemple, des points de suspension à la fin d'un mot qui serait coupé, ou qui passerait à la ligne sans ça... Après, je sais pas comment empêcher le lien de retourner à la ligne de lui même. ^^'

Re-Edit ; Sinon, je ne me rapelle pas avoir aperçu ce détail dans le sujet, donc je le rajoute - si jamais je répête quelqu'un, désolé d'avance ^^' - Donc voilà, pour effectuer les modifications comme les changement de taille, largeur itout, il faut utiliser le sélectionneur là :

Code:: .incline strong {

}

Voilà, j'espère avoir aidé. :3

Non mais le souci c'est que j'ai testé avec Firebug, un pseudo "long" composé de plusieurs mots ne poserait pas de problèmes, par contre si c'est un mot composé de plusieurs caractères là ça pose problème.

Et le problème des sollutions que tu mentionnes, c'est la rétrocompatibilité avec les navigateurs @_@

Du coup, la méthode la plus facile serait d'encourager les membres à ne pas adopter de pseudo de 50000 caractères... et dans le pire des cas donc, celle que j'ai suggéré, qui apparemment semble être compatible même sous IE6 @_@

Au pire, justement, on personnalise le .inline strong dont j'ai parlé de cette manière :

Code:: .inline strong {
display: block;
max-width: Xpx; /** Pour déterminer une taille maximale **/
text-align: left; /** Pour ne pas que le pseudo dépasse des deux côtés, je sais pas si c'est vraiment nécessaire **/
margin-left: auto; margin-right: auto; /** Pour centrer malgré le text-align: left; **/
overflow: hidden; /** Pour masquer ce qui dépasse **/
}

Comme ça, le pseudo est centré, et même si le mot unique est trop grand, il disparaît. *-*

Bonjour Jusuchin, ton problème est-il résolu ?

Désolée du temps de réponse, problème d'accès internet.

J'ai essayé de mettre un pseudo à rallonge pour voir ce que ça rend. Heureusement, il revient à la ligne, mais il ne faut pas qu'il dépasse tant de caractères, en effet...

Pour les codes que vous m'avez proposé, aucun changement notable si ce n'est le incline strong qui ne fait pas un effet joli du tout

Réduire texte "dernier message" [resolu] 605365coupure

Réduire texte "dernier message" [resolu] 605365coupure

J'ai essayé plusieurs variantes de pseudos longs de type Xxxxxxx X. Xxxxxxxx, ça tombe bien. Xxxxx Xxxxxx Xxxxxx tombe bien aussi. Mais alors si je fais un prénom + un nom très long, ça tombe mal... Et si je modifie la largeur du texte global, ça ramène à la ligne (et là du coup, je sors en dehors de mon image).
Le problème est donc toujours de trouver quelque chose qui pourrait faire des points de suspension si le pseudo dépasse de 2 lignes...

Réduire texte "dernier message" [resolu] 251310depassement

Réduire texte "dernier message" [resolu] 251310depassement

Test jusqu'as trouver un nombre de caractère qui rentre, il suffiras ensuite en js d'ajouter des petits points pour les pseudos qui dépassent Wink

Ah oui mais je sais pas du tout utiliser le javascript moi... A chaque fois j'utlise des codes qu'on me donne parce que je n'y connais rien
Et le problème avec le nombre de caractères c'est que ça dépend si le membre choisit un pseudo en deux ou trois "mots" ... Enfin je sais pas si ça change quelque chose du coup avec le code dont tu parles

Salut,
Pour les débordements, je te propose de lire ce tutoriel qui est bien pratique : clic. Si tu as des questions, n'hésite pas. Smile

Cordialement,

Merci pour le tuto, il est vraiment instructif !

Résultat :

Si j'utilise hyphens, la coupure du nom trop long "se passe bien" étant donné qu'elle empêche le débordement pour de bon et arrive à couper le nom intelligemment en remettant la suite à la ligne. Dans mes différents essais de pseudo, je n'ai pas remarqué de défaut.

L'ellipsis avec overflow, c'est le résultat dont je voulais vraiment approcher mais malheureusement, même en modifiant la largeur autorisée, il se contente d'enlever la seconde partie d'un pseudo (il ne garde donc que le prénom) peu importe sa longueur. C'est à dire que même si j'ai un prénom court, le nom n'apparaitra jamais (alors que c'était le résultat souhaité, avec les points de suspension s'il était trop long) et s'il est trop long et qu'il dépasse la largeur autorisée, il n'est pas coupé pour autant.

Résultat, je vais rester sur l'hyphénation Razz

C'est pas ce que j'espérais comme solution mais ça reste une bonne alternative

Hello Jusuchin,
Merci d'avoir signalé que ton sujet est résolu. A bientôt !
Je classe. Very Happy

Réduire texte "dernier message" [resolu]

Réduire texte "dernier message" [resolu]

Sujets similaires

Sujets similaires

Partenaires Or