Image de fond des titres de catégories

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

Résolu Image de fond des titres de catégories

Message par Invité le Mar 9 Nov 2010 - 14:56

    Encore moi Razz


J'aimerais savoir comment faire pour faire un fond de titre de catégorie arrondi comme sur ce forum ? Ou au moins savoir comment le modifier.

Merci d'avance Mr. Green


Dernière édition par Ian-Fan le Mer 17 Nov 2010 - 21:16, édité 1 fois

Invité
Invité


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

Résolu Re: Image de fond des titres de catégories

Message par Arlem le Mar 9 Nov 2010 - 20:51

Bonsoir,

C'est simplement une image avec un arrondi :
http://img186.imageshack.us/img186/8813/sanstitre1vmi.png

Wink

Arlem
+ Hyperactif +

Messages : 2550
Inscrit(e) le : 30/06/2009

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

Résolu Re: Image de fond des titres de catégories

Message par Invité le Mar 9 Nov 2010 - 20:56

J'aimerais savoir où mettre l'image voulu. Dans les templates ? Le CSS ?

Invité
Invité


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

Résolu Re: Image de fond des titres de catégories

Message par funky17 le Mar 9 Nov 2010 - 21:33

P.A > affichage > Gestion des images > mode avancé >

Tu as alors trois champs :

- Image du fond des titres

- Image du fond des catégories (gauche)

- Image du fond des catégories (droite)

C'est l'un de ces trois champs suivant la version de ton forum Wink

++

funky17
***

Masculin
Messages : 161
Inscrit(e) le : 06/09/2009

http://www.golf6grandtourisme.com
funky17 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres de catégories

Message par Invité le Mar 9 Nov 2010 - 21:43

J'ai repris l'image uniquement pour tester ( elle sera bien entendu enlevée ) mais le problème étant que l'image reste dans la case, qui est trop petite. Peut-être faut-il passer par les templates ou le CSS ?

Invité
Invité


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

Résolu Re: Image de fond des titres de catégories

Message par funky17 le Mar 9 Nov 2010 - 21:51

Non, il te faut harmoniser la largeur de ton forum à la largeur de l'image de fond des titres pour qu'elle rentre pile poil.

Enfin idéalement, d'abord tu fixes la largeur de ton forum, et après tu te fais une image de fond.

++

funky17
***

Masculin
Messages : 161
Inscrit(e) le : 06/09/2009

http://www.golf6grandtourisme.com
funky17 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres de catégories

Message par Invité le Mar 9 Nov 2010 - 22:00

Le problème n'est pas la largeur mais là hauteur de la case du titre des catégories comme on peut le voir sur le forum.

EDIT. Je viens également de remarquer que l'image s'applique aussi dans les sujets comme vous pouvez le voir ici. && J'aimerais que ça ne s'applique qu'à la case du nom de catégorie.

Invité
Invité


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

Résolu Re: Image de fond des titres de catégories

Message par Anzu le Mar 9 Nov 2010 - 23:55


Bonsoir,

Non, la modification se fait via le template index_box.

Voilà le code =>
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 -->
<table width="100%" cellspacing="0px" cellpading="0px"><tr><td class="fondtitres">{catrow.tablehead.L_FORUM}</td><td></td><tr><tr><td colspan="2">

<table class="forumline" width="100%" 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="100%">
         <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>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->
   <!-- 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="{catrow.forumrow.INC_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}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" 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}>
         <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 -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
      <!-- BEGIN forum_link_no -->
      <td class="row3" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
      <!-- END forum_link_no -->
      <!-- BEGIN forum_link -->
      <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
      <!-- END forum_link -->
   </tr>
   <!-- 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></td></tr></table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Les explications =>

J'ai supprimé ceci:

Code:
<tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
   </tr>

Et à la place j'ai mis ce tableau:

Code:
<table width="100%" cellspacing="0px" cellpading="0px"><tr><td class="fondtitres">{catrow.tablehead.L_FORUM}</td><td></td><tr><tr><td colspan="2">

Dans la CSS =>

Code:

.fondtitres{
width: largeur de l'image en px;
height: hauteur de l'image en px;
text-align: center;
align: center;
background: url('lien de l'image') center;
background-repeat: no-repeat;
}

Cordialement.

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres de catégories

Message par Invité le Mer 10 Nov 2010 - 11:46

Merci beaucoup pour votre réponse mais cela ne fonctionne pas. Le problème étant que j'ai déjà modifié certaines choses dans ce template ... ( Catégories en onglets, suppression de certaines colonnes ). Je vous laisse voir ce que ça donne :ici.

Voilà mon template :

Code:
<!-- DEBUT MODIF ONGLETS -->

<script type="text/javascript">
<!--

var i = 0;

document.write('<div align="center">
<ul class="onglet">

 
<li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">un</li>
<li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">deux</li>
<li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">trois</li>
<li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">quatre</li>
<li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">cinq</li>
<li onMouseOver="change_cat(5);" class="onglet_nactif" id="cat_5">six</li>
<li onMouseOver="change_cat(6);" class="onglet_nactif" id="cat_6">sept</li>
<li onMouseOver="change_cat(7);" class="onglet_nactif" id="cat_7">huit</li>



</ul>
</div>
');

var compteur_cat = 0;

var anc_cat = 0;

var nom_cat = new Array('0','1','2','3','4','5','6','7');

 
function change_cat(numero)
{
 document.getElementById(nom_cat[anc_cat]).style.display = 'none';
 document.getElementById(nom_cat[numero]).style.display = 'block';
 document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif';
 document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif';
 anc_cat = numero;
}

function capture_cat()
{
if(nom_cat[compteur_cat] == nom_cat[0])
{document.write('<table class="forumline" id="' + nom_cat[compteur_cat] + '" >');
}
else{
 document.write('<table class="forumline" id="' + nom_cat[compteur_cat] + '" style="display:none;">');
}
compteur_cat++;
}

//-->
</script>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<script type="text/javascript">
<!--
capture_cat();
//-->
</script>   

<!-- FIN MODIF ONGLETS -->

<br><table width="100%" cellspacing="0px" cellpading="0px"><tr><td class="fondtitres">{catrow.tablehead.L_FORUM}</td><td></td><tr><tr><td colspan="2">
<!-- 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="100%">
<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>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- 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="{catrow.forumrow.INC_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}" />
</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

</span>
</h{catrow.forumrow.LEVEL}>
<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 -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td>
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">
<div class="sujets_messages"><b>{catrow.forumrow.TOPICS} sujets</b> | <b>{catrow.forumrow.POSTS} messages</b></div>
<div class="derniers_sujets">{catrow.forumrow.LAST_POST}</div></span>
</td>
<!-- BEGIN forum_link_no -->

<!-- END forum_link_no -->
<!-- BEGIN forum_link -->
<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
<!-- END forum_link -->
</tr>
<!-- 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 -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

EDIT: Vous pourrez également voir que mes onglets sont toujours là mais que toutes mes catégories sont affichées en dessous .

Invité
Invité


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

Résolu Re: Image de fond des titres de catégories

Message par Anzu le Mer 10 Nov 2010 - 16:15


Il fallait préciser Wink

Je vous ai donné un template correct, avec l'effet désiré. Si vous avez fait d'autres modifications, vous devez les adapter au code que je vous ai donné.

Après je n'ai jamais testé cet effet avec les catégories en onglet ..

Faut que je regarde de plus près, mais je vous invite à essayer quand même de votre côté en faisant les choses dans l'ordre Razz

Cordialement.


Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres de catégories

Message par Invité le Mer 10 Nov 2010 - 20:27

Ca fait un petit moment que j'y suis, j'ai recommencé plusieurs fois ... mais je ne trouve pas de solutions.
J'ai suis même revenue au template par défaut, histoire de voir si c'était les onglets qui étaient en cause mais les modifications apportées ne me donne pas l'effet voulu.


Voilà mon template actuel :

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 --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <table width="100%" cellspacing="0px" cellpading="0px"><tr><td class="fondtitres">{catrow.tablehead.L_FORUM}</td><td></td><tr><tr><td colspan="2">
   <!-- 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="100%">
         <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>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->
   <!-- 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="{catrow.forumrow.INC_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}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" 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}>
         <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 -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
      <!-- BEGIN forum_link_no -->
      <td class="row3" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
      <!-- END forum_link_no -->
      <!-- BEGIN forum_link -->
      <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
      <!-- END forum_link -->
   </tr>
   <!-- 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><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Invité
Invité


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

Résolu Re: Image de fond des titres de catégories

Message par Invité le Sam 13 Nov 2010 - 16:12

Je me permet un UP.

Invité
Invité


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

Résolu Re: Image de fond des titres de catégories

Message par Invité le Dim 14 Nov 2010 - 17:21

Ian-Fan a écrit:Je me permet un UP.

Invité
Invité


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

Résolu Re: Image de fond des titres de catégories

Message par Invité le Mar 16 Nov 2010 - 21:13

Nouveau UP Embarassed

Invité
Invité


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

Résolu Re: Image de fond des titres de catégories

Message par Anzu le Mar 16 Nov 2010 - 23:43


Bonsoir,

Il me faudrait les codes que vous avez utilisés pour faire vos onglets SANS la modification que je vous ai donné pour l'index box.

Je vais tenter d'appliquer la modification que je vous ai donnée aux catégories en onglets.

Cordialement.

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres de catégories

Message par Invité le Mer 17 Nov 2010 - 11:02

    Merci pour votre réponse.


Voici le template.

Code:
<!-- DEBUT MODIF ONGLETS -->

<script type="text/javascript">
<!--

var i = 0;

document.write('<div align=&quot;center&quot;>
<ul class=&quot;onglet&quot;>

 
<li onMouseOver=&quot;change_cat(0);&quot; class=&quot;onglet_actif&quot; id=&quot;cat_0&quot;>un</li>
<li onMouseOver=&quot;change_cat(1);&quot; class=&quot;onglet_nactif&quot; id=&quot;cat_1&quot;>deux</li>
<li onMouseOver=&quot;change_cat(2);&quot; class=&quot;onglet_nactif&quot; id=&quot;cat_2&quot;>trois</li>
<li onMouseOver=&quot;change_cat(3);&quot; class=&quot;onglet_nactif&quot; id=&quot;cat_3&quot;>quatre</li>
<li onMouseOver=&quot;change_cat(4);&quot; class=&quot;onglet_nactif&quot; id=&quot;cat_4&quot;>cinq</li>
<li onMouseOver=&quot;change_cat(5);&quot; class=&quot;onglet_nactif&quot; id=&quot;cat_5&quot;>six</li>
<li onMouseOver=&quot;change_cat(6);&quot; class=&quot;onglet_nactif&quot; id=&quot;cat_6&quot;>sept</li>
<li onMouseOver=&quot;change_cat(7);&quot; class=&quot;onglet_nactif&quot; id=&quot;cat_7&quot;>huit</li>



</ul>
</div>
');

var compteur_cat = 0;

var anc_cat = 0;

var nom_cat = new Array('0','1','2','3','4','5','6','7');

 
function change_cat(numero)
{
 document.getElementById(nom_cat[anc_cat]).style.display = 'none';
 document.getElementById(nom_cat[numero]).style.display = 'block';
 document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif';
 document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif';
 anc_cat = numero;
}

function capture_cat()
{
if(nom_cat[compteur_cat] == nom_cat[0])
{document.write('<table class=&quot;forumline&quot; id=&quot;' + nom_cat[compteur_cat] + '&quot; >');
}
else{
 document.write('<table class=&quot;forumline&quot; id=&quot;' + nom_cat[compteur_cat] + '&quot; style=&quot;display:none;&quot;>');
}
compteur_cat++;
}

//-->
</script>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<script type="text/javascript">
<!--
capture_cat();
//-->
</script> 

<!-- FIN MODIF ONGLETS -->

<br><tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
  </tr>
<!-- 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="100%">
<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>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- 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="{catrow.forumrow.INC_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}" />
</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

</span>
</h{catrow.forumrow.LEVEL}>
<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 -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td>
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">
<div class="sujets_messages"><b>{catrow.forumrow.TOPICS} sujets</b> | <b>{catrow.forumrow.POSTS} messages</b></div>
<div class="derniers_sujets">{catrow.forumrow.LAST_POST}</div></span>
</td>
<!-- BEGIN forum_link_no -->

<!-- END forum_link_no -->
<!-- BEGIN forum_link -->
<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
<!-- END forum_link -->
</tr>
<!-- 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 -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

&& le CSS des onglets . Je ne sais pas si ce sera utile mais je vous le mets quand même.

Code:
.text {
color:#FFFFFF; /*Couleur du texte de vos onglets*/
cursor:pointer;
}

#cat_un,#cat_deux,#cat_trois,#cat_quatre,#cat_cinq,#cat_six,#cat_sept,#cat_huit /*Noms des onglets*/ {
padding-top:4px;
}

.spoiler_content { display: block; }
.hidden .spoiler_content { display: none; }

.cat_forum {
background-color: #000000;
margin: auto;
margin-bottom:30px;
width:800px;
}

.onglet {
display:inline-block;
margin-top:30px;
text-decoration:none; !important
cursor:pointer;
}

.onglet li {
float:left;
list-style-type:none;
margin-bottom:-22px;
text-decoration:none; !important
cursor:pointer;
}

.onglet li:hover {
text-decoration:none; !important
cursor:pointer;
}

.onglet li a {
display:block;
text-decoration:none; !important
list-style-type: none;
cursor:pointer;
}

.onglet li a: hover {
text-decoration:none;
list-style-type:none;
cursor:pointer;
}

.onglet_actif {
background-color : #FF0000; /*Couleur de l'onglet étant actif*/
width:40px; /*Largeur de l'onglet étant actif*/
height:10px; /*Hauteur de l'onglet étant actif*/
cursor:pointer;
color: #000000; /*Couleur du texte*/
font-style: normal; /*Police d'écriture*/
font-size: 10px; /*Taille du texte*/
padding: 5px; /*Pas de chevauchement des onglets*/
margin: 5px; /*Espace entre les onglets*/
}

.onglet_nactif {
background-color : #FF0000; /*Couleur de l'onglet étant inactif*/
width:40px; /*Largeur de l'onglet étant inactif*/
height:10px; /*Hauteur de l'onglet étant inactif*/
cursor:pointer;
color: #000000; /*Couleur du texte*/
font-style: normal; /*Police d'écriture*/
font-size: 10px; /*Taille du texte*/
padding: 5px; /*Pas de chevauchement des onglets*/
margin: 5px; /*Espace entre les onglets*/
}

Invité
Invité


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

Résolu Re: Image de fond des titres de catégories

Message par Anzu le Mer 17 Nov 2010 - 11:37

Bonjour,
Code:

<!-- DEBUT MODIF ONGLETS -->

<script type="text/javascript">
<!--

var i = 0;

document.write('<div align=&quot;center&quot;>
<ul class=&quot;onglet&quot;>

 
<li onMouseOver=&quot;change_cat(0);&quot; class=&quot;onglet_actif&quot; id=&quot;cat_0&quot;>un</li>
<li onMouseOver=&quot;change_cat(1);&quot; class=&quot;onglet_nactif&quot; id=&quot;cat_1&quot;>deux</li>
<li onMouseOver=&quot;change_cat(2);&quot; class=&quot;onglet_nactif&quot; id=&quot;cat_2&quot;>trois</li>
<li onMouseOver=&quot;change_cat(3);&quot; class=&quot;onglet_nactif&quot; id=&quot;cat_3&quot;>quatre</li>
<li onMouseOver=&quot;change_cat(4);&quot; class=&quot;onglet_nactif&quot; id=&quot;cat_4&quot;>cinq</li>
<li onMouseOver=&quot;change_cat(5);&quot; class=&quot;onglet_nactif&quot; id=&quot;cat_5&quot;>six</li>
<li onMouseOver=&quot;change_cat(6);&quot; class=&quot;onglet_nactif&quot; id=&quot;cat_6&quot;>sept</li>
<li onMouseOver=&quot;change_cat(7);&quot; class=&quot;onglet_nactif&quot; id=&quot;cat_7&quot;>huit</li>



</ul>
</div>
');

var compteur_cat = 0;

var anc_cat = 0;

var nom_cat = new Array('0','1','2','3','4','5','6','7');

 
function change_cat(numero)
{
 document.getElementById(nom_cat[anc_cat]).style.display = 'none';
 document.getElementById(nom_cat[numero]).style.display = 'block';
 document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif';
 document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif';
 anc_cat = numero;
}

function capture_cat()
{
if(nom_cat[compteur_cat] == nom_cat[0])
{document.write('<table class=&quot;forumline&quot; id=&quot;' + nom_cat[compteur_cat] + '&quot; >');
}
else{
 document.write('<table class=&quot;forumline&quot; id=&quot;' + nom_cat[compteur_cat] + '&quot; style=&quot;display:none;&quot;>');
}
compteur_cat++;
}

//-->
</script>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<script type="text/javascript">
<!--
capture_cat();
//-->
</script>

<!-- FIN MODIF ONGLETS -->

<tr><td class="fondtitres">{catrow.tablehead.L_FORUM}</td><td></td><tr><tr><td colspan="2">
<!-- 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="100%">
<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>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- 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="{catrow.forumrow.INC_CLASS}" align="center" valign="middle" style="width: 50px;">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

</span>
</h{catrow.forumrow.LEVEL}>
<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 -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td>
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">
<div class="sujets_messages"><b>{catrow.forumrow.TOPICS} sujets</b> | <b>{catrow.forumrow.POSTS} messages</b></div>
<div class="derniers_sujets">{catrow.forumrow.LAST_POST}</div></span>
</td>
<!-- BEGIN forum_link_no -->

<!-- END forum_link_no -->
<!-- BEGIN forum_link -->
<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
<!-- END forum_link -->
</tr>
<!-- 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 -->
</td></tr></table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Et dans votre CSS, faudra remplacer l'autre par ceci =>

Code:
.fondtitres{
min-width: 450px;
min-height: 50px;
text-align: center;
align: center;
background: url('http://img186.imageshack.us/img186/8813/sanstitre1vmi.png') center;
background-repeat: no-repeat;
}

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres de catégories

Message par Invité le Mer 17 Nov 2010 - 11:55

Super ça marche. Merci beaucoup Razz
Seul petit hic. Il y a des espaces entres chaque colonne && chaque rangée. Comment les supprimer ?

Invité
Invité


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

Résolu Re: Image de fond des titres de catégories

Message par Anzu le Mer 17 Nov 2010 - 11:56


Je n'ai pas réussi à les enlever > < '
Désolée Razz

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond des titres de catégories

Message par Invité le Mer 17 Nov 2010 - 21:16

Pas grave. Je vais me débrouiller autrement ^^
Merci beaucoup pour ton aide I love you thumleft

Invité
Invité


Invité 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