Joli texte pour nom des catégories Bouton_activeJoli texte pour nom des catégories Bouton_hoverJoli texte pour nom des catégories Fb-hoverJoli texte pour nom des catégories Fb-active
AccueilForumÉquipe 
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!

Derniers sujets
» Système d'onglets simple et personnalisable
Joli texte pour nom des catégories EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Joli texte pour nom des catégories EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Joli texte pour nom des catégories EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Joli texte pour nom des catégories EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Joli texte pour nom des catégories EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Joli texte pour nom des catégories EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Joli texte pour nom des catégories EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Joli texte pour nom des catégories EmptySam 11 Fév 2023, 06:04 par Krager

Le deal à ne pas rater :
SSD interne Crucial BX500 2,5″ SATA – 500 Go à 29,99€
29.99 €
Voir le deal

CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolusPartagez
 

Joli texte pour nom des catégories

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://crossroad.hotgoo.net/forum.htm
Antechrist
{ Membre }
{ Membre }

Masculin Messages : 16



Joli texte pour nom des catégories Empty
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 :
Joli texte pour nom des catégories Test13

voyez, à gauche, y a pas de gras, à droite bien (magie magie !!! Sad).

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

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
MessageSujet: Joli texte pour nom des catégories   Joli texte pour nom des catégories EmptyVen 28 Mai 2010, 04:47
Revenir en haut Aller en bas
http://www.across-rpg.com
Ode
Ode
{ Membre }
{ Membre }

Féminin Messages : 183



Joli texte pour nom des catégories Empty
Bonjour =)
As-tu essayé tout simplement d'ajouter un "font-style: bold;" dans la class catleft? ^^"
MessageSujet: Re: Joli texte pour nom des catégories   Joli texte pour nom des catégories EmptyVen 28 Mai 2010, 05:31
Revenir en haut Aller en bas
http://crossroad.hotgoo.net/forum.htm
Antechrist
{ Membre }
{ Membre }

Masculin Messages : 16



Joli texte pour nom des catégories Empty
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 ?
MessageSujet: Re: Joli texte pour nom des catégories   Joli texte pour nom des catégories EmptyVen 28 Mai 2010, 05:45
Revenir en haut Aller en bas
http://www.across-rpg.com
Ode
Ode
{ Membre }
{ Membre }

Féminin Messages : 183



Joli texte pour nom des catégories Empty
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...
MessageSujet: Re: Joli texte pour nom des catégories   Joli texte pour nom des catégories EmptyVen 28 Mai 2010, 05:52
Revenir en haut Aller en bas
http://crossroad.hotgoo.net/forum.htm
Antechrist
{ Membre }
{ Membre }

Masculin Messages : 16



Joli texte pour nom des catégories Empty
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é
MessageSujet: Re: Joli texte pour nom des catégories   Joli texte pour nom des catégories EmptyVen 28 Mai 2010, 06:07
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Joli texte pour nom des catégories Empty
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'
MessageSujet: Re: Joli texte pour nom des catégories   Joli texte pour nom des catégories EmptyVen 28 Mai 2010, 09:44
Revenir en haut Aller en bas
http://crossroad.hotgoo.net/forum.htm
Antechrist
{ Membre }
{ Membre }

Masculin Messages : 16



Joli texte pour nom des catégories Empty
c'est réglé...

En fait, fallait mettre h2 à coté de catleft dans le css...
MessageSujet: Re: Joli texte pour nom des catégories   Joli texte pour nom des catégories EmptyLun 31 Mai 2010, 03:46
Revenir en haut Aller en bas
http://www.i-love-harvard.com/
Kaiji
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



Joli texte pour nom des catégories Empty
    Je classe ^^
MessageSujet: Re: Joli texte pour nom des catégories   Joli texte pour nom des catégories EmptyLun 31 Mai 2010, 15:03
Revenir en haut Aller en bas
Contenu sponsorisé




Joli texte pour nom des catégories Empty
MessageSujet: Re: Joli texte pour nom des catégories   Joli texte pour nom des catégories Empty
Revenir en haut Aller en bas
 

Joli texte pour nom des catégories

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Code pour le texte justifié sur tout le forum
» Catégories zone texte arrondi
» [Question - résolue] Changer le texte de titre des catégories
» Questions pour catégories.
» Insérer une image/du texte au-dessus/en dessous des catégories

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-
ChatBox
:
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  Connexion  S'enregistrerS'enregistrer  

Partenaires Or

← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit