CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| Joli texte pour nom des catégories | |
| Antechrist
{ Membre }
Messages : 16
| Bonjour à toutes/tous, j'ai déjà fait une demande d'aide similaire mais j'ai pu trouver la solution pour celle là... Cependant, je n'arrive pas à faire de même pour le reste de mon forum. En gros, j'ai suivi le tutoriel pour faire de beaux titres. Un 2ème tutoriel avait été posté par la suite pour ne pas que les caractéristiques viennent s'incruster dans toutes les pages (et donc que ça n'apparaisse que sur l'index). Il fallait incruster la "class" avec les descriptions voulues directement dans le template (et non dans le titre de la catégorie). Le hic, c'est qu'entre-temps, j'ai "perdu" l'effet de gras que je voulais mettre. Une petite image pour illustrer mon problème : voyez, à gauche, y a pas de gras, à droite bien (magie magie !!! ). voilà mon code template d'index box : - Code:
-
<div class="pun-crumbs"> <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p> </div> <div class="main"> <div class="ajout_haut"></div> <!-- BEGIN catrow --> <!-- BEGIN tablehead --> <div class="main-content"> <table cellspacing="0" class="table"> <thead> <tr> <th class="tcl"><div class="catleft">{catrow.tablehead.L_FORUM}</div></th> <th class="tcr"><div class="catright">{L_LASTPOST}</div></th> </tr> </thead> <tbody class="statused"> <!-- END tablehead -->
<!-- BEGIN forumrow --> <tr> <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};"> <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};"> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> </span> <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}></div>
{catrow.forumrow.FORUM_DESC} <!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS} <!-- END switch_moderators_links --> {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS} </td> <td class="tcr">{catrow.forumrow.LAST_POST}</td> </tr> <!-- END forumrow -->
<!-- BEGIN tablefoot --> </tbody> </table> </div>
<!-- END tablefoot -->
<!-- END catrow --> <div class="ajout_bas"></div> </div>
<!-- BEGIN switch_on_index --> <!-- END switch_on_index -->
et mon css : - Code:
-
body{ background-position: top center; }
a { text-decoration: none; }
.chat { position: fixed; bottom: 20px; left: -4px; z-index: 999; }
.catleft{ display:block; text-decoration: none; -moz-border-radius: 10px; -webkit-border-radius: 10px; font-weight:bold;color:#ffecd5; font-size:12px; text-align:center; line-height:1,5; width: 280px; height: 17px; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/sans_t13.jpg'); border-bottom: 1px solid #b33300; border-top: 2px solid #b33300; border-right: 3px solid #b33300; border-left: 3px solid #b33300; -moz-text-shadow: black 1px 1px 2px; -webkit-text-shadow: black 1px 1px 2px; text-shadow: black 1px 1px 2px; margin: auto auto auto auto; }
.catright { display:block; text-decoration: none; -moz-border-radius: 10px; -webkit-border-radius: 10px; font-weight:bold;color:#ffecd5; font-size:12px; text-align:center; line-height:1,5; width: 150px; height: 17px; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/sans_t13.jpg'); border-bottom: 1px solid #b33300; border-top: 2px solid #b33300; border-right: 3px solid #b33300; border-left: 3px solid #b33300; -moz-text-shadow: black 1px 1px 2px; -webkit-text-shadow: black 1px 1px 2px; text-shadow: black 1px 1px 2px; margin: auto auto auto auto; }
textarea, .textarea.post, input.post {
}
#main-content{ background-color: #; background-position: top center; width: 900px; padding-bottom: 0px; margin-left: 0px; }
#onlinelist{ background-color: transparent; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond_c11.jpg'); background-repeat: repeat; }
#stats{ background-color: transparent; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond_c11.jpg'); background-repeat: repeat; border: 1px solid #000; }
button.button2, input.button2 { border: 1px solid #85C47C; width: auto !important; background-repeat: repeat-x; background-color: #FAFAFA; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond_c11.jpg'); background-position: top; overflow: visible; vertical-align:middle; }
button.button2:hover, input.button2:hover { border: 1px solid #335932; width: auto !important; background-repeat: repeat-x; background-color: #FAFAFA; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond_c11.jpg'); background-position: top; overflow: visible; vertical-align:middle; }
.frm-buttons input{ border: 3px solid #85C47C; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond_c11.jpg'); background-position: top; color: #000000; -moz-border-radius: 15px; -webkit-border-radius: 15px; }
.frm-buttons input:hover{ border: 3px solid #335932; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond_c11.jpg'); background-position: center; color: #000000; -moz-border-radius: 15px; -webkit-border-radius: 15px; }
.pun{ min-width: 900px; width: 900px; }
.pun table.table th { border-style: none ; border: 1px solid #85C47C; background-image: url('http://a.imagehost.org/0483/Sans_titre-1_copie.jpg'); }
.pun table .tcl{ background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond2_18.jpg'); width: 720px; }
.pun table .tcr{ background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond_c11.jpg'); text-align: center; }
.pun input submit .pun select{ border: 3px solid #47AB00; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond_c11.jpg'); background-position: center; color: #000000; }
.pun .post, .pun .posthead, .pun .postfoot{ border: 1px solid #47AB00; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond_c11.jpg'); }
.postmain{ background-color: transparent; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond2_18.jpg'); background-repeat: repeat; border: none; }
.pun .postfoot .user-contact{ float: left; width:430px; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond2_18.jpg'); }
#pun-intro{ background-color: #; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/banner13.png'); background-repeat: no-repeat; height:163px; width: 900px; padding:0px; margin-left: 0px; margin-bottom : -6px }
#pun-navlinks{ background-color: #; background-repeat: repeat-y; width: 900px; margin:0px; padding: 0px; margin-left: -13px; }
#pun-navlinks li a { padding: 0px; margin: 0px; text-decoration: none; }
#pun-visit { background-color: transparent; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond_c11.jpg'); background-repeat: repeat; border: 1px solid #47AB00; }
#pun-about{ background-color: transparent; border: none; }
#pun-info{ background-color: transparent; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond_c11.jpg'); background-repeat: repeat; border: 1px solid #47AB00; }
.ajout_haut { background-color: transparent; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/haut10.png'); background-repeat: no-repeat; width: 900px; height: 26px; border: none; }
.ajout_bas { background-color: transparent; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/bas10.png'); background-repeat: no-repeat; width: 900px; height: 26px; border: none; }
.legend { font-weight:bold; }
.tablesearchmembers { background-color: transparent; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond_c11.jpg'); background-repeat: repeat; border: 1px solid #47AB00; background-position: center; }
.tablesearch { margin-left: 100px; }
.membersth { border: 1px solid #47AB00; background-image: url('http://a.imagehost.org/0483/Sans_titre-1_copie.jpg'); height : 30px; }
.thTop { font-weight:bold;color:#fff; font-size: 12px; }
.forumline { background-color: transparent; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond_c11.jpg'); background-repeat: repeat; border: 1px solid #47AB00; background-position: center; }
.main .main-head .page-title { display:block; text-decoration: none; -moz-border-radius: 10px; -webkit-border-radius: 10px; font-weight:bold;color:#ffecd5; font-size:12px; text-align: center; line-height:1,5; width: 400px; height: 17px; border-bottom: 1px solid #333333; border-top: 2px solid #333333; border-right: 3px solid #333333; border-left: 3px solid #333333; -moz-text-shadow: black 1px 1px 2px; -webkit-text-shadow: black 1px 1px 2px; text-shadow: black 1px 1px 2px; margin: auto auto auto auto; }
.hierarchy { display: inline; text-transform: none; border: none; font-size: 10px; }
.sujettest { font-weight:bold;color:#ffecd5; font-size:12px; text-align:center; margin: auto auto auto auto; }
.sujetmainbar { background-image: url('http://a.imagehost.org/0483/Sans_titre-1_copie.jpg'); height: 33px; }
.forumlinebis { background-color: transparent; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond2_18.jpg'); }
tr.post td { padding-left: 20px; }
.testone { text-decoration: none; -moz-border-radius: 10px; -webkit-border-radius: 10px; font-weight:bold;color:#ffecd5; font-size:12px; text-align: center; line-height:1,5; width: 400px; height: 17px; border-bottom: 1px solid #333333; border-top: 2px solid #333333; border-right: 3px solid #333333; border-left: 3px solid #333333; -moz-text-shadow: black 1px 1px 2px; -webkit-text-shadow: black 1px 1px 2px; text-shadow: black 1px 1px 2px; margin: auto auto auto auto; }
.tcnew { background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond2_18.jpg'); }
.td-title { background-color: transparent; background-image: url('http://i68.servimg.com/u/f68/11/18/92/80/fond_c11.jpg'); background-repeat: repeat; border: 1px solid #47AB00; font-weight:bold; } Pour faire simple, les class qui nous intéressent sont catleft et catright. Remarquez dans le template, qu'il n'y aucune différence entre les class catright et left si ce n'est les dimensions et qu'elles sont appelées de la même manière dans le template pour un résultat différent... edit : en modifiant un peu le code, j'ai remplacé {catrow.tablehead.L_FORUM} par {L_FORUM} et le gras s'applique. Mais bien entendu, je n'ai plus le nom de la catégorie mais simplement "Forum". |
Dernière édition par Antechrist le Lun 31 Mai 2010, 10:26, édité 1 fois | |
| | | Ode
{ Membre }
Messages : 183
| Bonjour =) As-tu essayé tout simplement d'ajouter un "font-style: bold;" dans la class catleft? ^^" | | |
| | | Antechrist
{ Membre }
Messages : 16
| non mais je viens de le faire et il n'y a toujours pas de mise en gras.
Je précise que j'ai déjà essayé d'entourer mon texte par les balises strong et b sans résultat.
Je me demande si le problème ne vient pas de la variable en elle-même et d'une éventuelle mise en forme qui serait prédéfinie ? | | |
| | | Ode
{ Membre }
Messages : 183
| Ah.. =$ Bah honnêtement je ne saurais pas t'aider davantage... Mais peut être qu'un codeur saura te répondre. ^^ Désolée de ne pas pouvoir t'aider mieux que ça... | | |
| | | Antechrist
{ Membre }
Messages : 16
| - Ode a écrit:
Ah.. =$ Bah honnêtement je ne saurais pas t'aider davantage... Mais peut être qu'un codeur saura te répondre. ^^ Désolée de ne pas pouvoir t'aider mieux que ça... pas de soucis, je te remercie déja d'avoir essayé | | |
| | | Furase
{ Membre actif }
Messages : 312
| Bonjour !
Et bien, il est drôlement récalcitrant ce code. Je n'ai pas trouvé d'où vient le problème.
Tu as bien les classes catleft et catright pour respectivement le titre à gauche et à droite, et elles sont placées aux bons endroits sur {catrow.tablehead.L_FORUM} et {L_LASTPOST}. Le css est à priori bon. (Au lieu d'écrire deux fois la même chose et pour alléger un peu ton css, tu peux regrouper les styles identiques en mettant ".catleft , .catright" et définir ton style commun (polices, couleurs, marges et autres), et ne séparer les deux catégories que pour différencier la taille des blocs.)
Tu as un /div en trop à la fin de ton code. Ca n'a à priori rien changé quand j'ai testé, mais pense à l'enlever.
Le seul moyen que je vois pour rectifier ça, c'est enlever ta classe dans le template et l'appliquer directement dans le titre de la catégorie. C'est un peu pénible à faire, mais en attendant de trouver autre chose... ^^" Essaie toujours de tenter de mettre <font style="font-weight: blod ;"> dans ton titre de catégorie (on n'utilise plus b et évite de te servir de strong pour donner un effet visuel, cette balise sert avant tout à signaler la présence d'un mot important).
font-style sert à la mise en italique, il ne reconnait pas le gras. La mise en gras se fait avec font-weight, comme tu l'as fait, et il peut prendre les valeurs blod ou bloder (entre autres, mais c'est celles-là qui nous intéressent pour le moment).
J'essaierai de me repencher sur le problème quand j'aurai un moment (sans hélas pouvoir te garantir le résultat ^^"), à moins que tu ne trouves la solution d'ici là.
Fu' | | |
| | | Antechrist
{ Membre }
Messages : 16
| c'est réglé...
En fait, fallait mettre h2 à coté de catleft dans le css... | | |
| | | Kaiji
Blanche-Neige
Messages : 5578
| | | | Contenu sponsorisé
| | | | | Joli texte pour nom des catégories | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|