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! |
| Classer les Catégories de votre Forum par Onglet (messages) | |
| |
Crows
{ Membre }
Messages : 18
| Je n'arrive pas a voir quelle version j'ai, mais je dois avoir une version très ancienne, j'aime pas trop le changement, une fois que je suis bien avec un navigateur, j'évite de changer lol. Je vais télécharger Mozilla pour faire un essai. Merci pour ta réponse. | | |
| | | Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Ouais, mais malheureusement il faut changer parce qu'il y a toujours des petits bugs qu'ils arrive à réparer et ça fait toujours du bien Et effectivement, je te conseille très fortement de télécharger Mozilla Firefox. De plus, ça t'offrira une meilleure navigation sur les ForumsActifs. | | |
| | | Crows
{ Membre }
Messages : 18
| Merci, je vais essayer de m'y faire alors Je viens de prendre le code dans le " générateurs d'onglets", je l'ai ajouté à mon code d'origine que j'avais modifié, mais je recois un message d'erreur : - Citation :
- La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas été ouverte.
- 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>
<!-- 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">Les bases</li> <li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">Street Team & Projets fans </li> <li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">Actualité & Presse. </li> <li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">Les livres </li> <li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">Les films - Twilight </li> <li onMouseOver="change_cat(5);" class="onglet_nactif" id="cat_5">Vos oeuvres. </li> <li onMouseOver="change_cat(6);" class="onglet_nactif" id="cat_6">La Cafet' </li> <li onMouseOver="change_cat(7);" class="onglet_nactif" id="cat_7">Nos partenaires & les demandes de partenariat . </li> <li onMouseOver="change_cat(8);" class="onglet_nactif" id="cat_8">PARTIE STAFF. </li> <li onMouseOver="change_cat(9);" class="onglet_nactif" id="cat_9">Corbeille </li>
</ul> </div> ');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1','2','3','4','5','6','7','8','9');
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="cat_forum" id="' + nom_cat[compteur_cat] + '" >'); } else{ document.write('<table class="cat_forum" 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 -->
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <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"> <table width="100%"><tr><td><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}"><div class="CLASSE-DES-TITRES" width="120">{catrow.forumrow.FORUM_NAME}</div></a></td><td align="right"><span class="gensmall"> <FONT color=#949986>Contient </FONT><b>{catrow.forumrow.POSTS}</b> <FONT color=#949986>messages dans</FONT> <b>{catrow.forumrow.TOPICS}</b> <FONT color=#949986>sujets.</FONT></span></td></tr></table> </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 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 --> | | |
| | | Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Essaye comme ceci : - 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>
<!-- 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">Les bases</li> <li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">Street Team & Projets fans</li> <li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">Actualité & Presse.</li> <li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">Les livres</li> <li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">Les films - Twilight</li> <li onMouseOver="change_cat(5);" class="onglet_nactif" id="cat_5">Vos oeuvres.</li> <li onMouseOver="change_cat(6);" class="onglet_nactif" id="cat_6">La Cafet'</li> <li onMouseOver="change_cat(7);" class="onglet_nactif" id="cat_7">Nos partenaires & les demandes de partenariat .</li> <li onMouseOver="change_cat(8);" class="onglet_nactif" id="cat_8">PARTIE STAFF.</li> <li onMouseOver="change_cat(9);" class="onglet_nactif" id="cat_9">Corbeille</li>
</ul> </div> ');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1','2','3','4','5','6','7','8','9');
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="cat_forum" id="' + nom_cat[compteur_cat] + '" >'); } else{ document.write('<table class="cat_forum" 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 -->
<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> <!-- 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 --> <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --> | | |
| | | Crows
{ Membre }
Messages : 18
| Les onglets n'apparaissent pas, et mon forum c'est élargi, par contre je n'ai plus le message d'erreur. | | |
| | | Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Si ton CSS est le même que celui du tutoriel, que tu as suivi les indications à la lettre, ça devrait marcher As-tu mis la disposition de ton forum structurée comme suit : - Spoiler:
|
Dernière édition par Hαrιcoow le Lun 30 Aoû 2010, 12:44, édité 2 fois | |
| | | Kilvizion
{ Membre }
Messages : 6
| Bonjour
J'essaie aussi d'installer le code mais j'ai quelques problèmes.
J'ai même repris le code qu'Haricoow t'as donné en page 2 Crows. Les onglets s'affichent pour moi (dans ton code CSS les onglets sont bien assez larges pour tes titres d'onglets?). Par contre j'ai aussi le problème du forum élargi. Je sais pas vraiment où arranger ça dans le index_body
Merci | | |
| | | Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Non, c'est à arranger dans le CSS | | |
| | | Kilvizion
{ Membre }
Messages : 6
| Désolé pour le double-post, j'aurais bien voulu éditer. Tant que c'est pour aider, je pense pas qu'il n'y ai de problème. Si votre page est déformée après avoir validé le code , modifiez simplement la largeur du forum en % dans Administration/Général/Configuration. Il est évidemment possible de le faire via le CSS mais j'ai pas bien cherché comment. Peut-être en ajoutant cette classe dans le CSS? - Code:
-
.bodyline{ background-color: #faf4e2; border: 1px #b27b4b solid; width: LARGEURpx;
| | |
| | | Chyna74
{ Membre }
Messages : 13
| - Hαrιcoow a écrit:
- Pour remplacer par des onglets cliquables, remplacez tous les onMouseOver par onClick
Je ne trouve pas le onMouseOver oO j'aimerai que les onglets soir cliquable mais je trouve vraiment pas o_o | | |
| | | Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Passe-ton code | | |
| | | Chyna74
{ Membre }
Messages : 13
| Ok ! Je l'est un peu modifier aussi ^^ - Spoiler:
.text { color:#633F54; /*Couleur du texte de vos onglets*/ cursor:pointer; }
#cat_Accueil,#cat_Concours,#cat_Bookcase,#cat_City,#cat_Office /*nomonglet,#cat_Asia,#cat_Poll,#cat_lounge,#cat_Cosplays,#cat_Finish,... à remplacer par le nom des onglets*/ { padding-top:4px; }
.spoiler_content { display: block; } .hidden .spoiler_content { display: none; }
.cat_forum { background-color: #e8f9fe; margin: auto; margin-bottom:30px; width:900px; -moz-border-radius: 15px ; border: 2px #e8f9fe solid; }
.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: url('https://i.servimg.com/u/f37/11/67/35/90/onglet12.png') no-repeat; /*URL de l'onglet étant actif*/ width:84px; /*Largeur de l'onglet étant actif*/ height:25px; /*Hauteur de l'onglet étant actif*/ cursor:pointer; }
.onglet_nactif { background:url('https://i.servimg.com/u/f37/11/67/35/90/onglet13.png') no-repeat; /*URL de l'onglet étant inactif*/ width:84px; /*Largeur de l'onglet étant inactif*/ height:25px; /*Hauteur de l'onglet étant inactif*/ cursor:pointer; }
| | |
| | | Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Nan mais c'est pas là que c'est onMouseOver.. C'est dans le template index_box | | |
| | | Chyna74
{ Membre }
Messages : 13
| Oula j'ai fait quoi O_O Peu pas supprimé en plus --' Si tu pouvais supprimé, désolé ^^' - Spoiler:
- 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>
<!-- 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">Accueil</li> <li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">Concours</li> <li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">Bookcase</li> <li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">City</li> <li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">Office</li> <li onMouseOver="change_cat(5);" class="onglet_nactif" id="cat_5">Asia</li> <li onMouseOver="change_cat(6);" class="onglet_nactif" id="cat_6">Poll</li> <li onMouseOver="change_cat(7);" class="onglet_nactif" id="cat_7">Lounge</li> <li onMouseOver="change_cat(8);" class="onglet_nactif" id="cat_8">Cosplay</li> <li onMouseOver="change_cat(9);" class="onglet_nactif" id="cat_9">Finish</li>
</ul> </div> ');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1','2','3','4','5','6','7','8','9');
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="cat_forum" id="' + nom_cat[compteur_cat] + '" >'); } else{ document.write('<table class="cat_forum" 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 -->
<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> <!-- 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 --> <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
| | |
| | | Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Voilà, ton code modifié et corrigé car il y avait quelques fautes : - 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>
<!-- DEBUT MODIF ONGLETS -->
<script type="text/javascript"> <!--
var i = 0;
document.write('<div align="center">') <ul class="onglet">
<li onClick="change_cat(0);" class="onglet_actif" id="cat_0">Accueil</li> <li onClick="change_cat(1);" class="onglet_nactif" id="cat_1">Concours</li> <li onClick="change_cat(2);" class="onglet_nactif" id="cat_2">Bookcase</li> <li onClick="change_cat(3);" class="onglet_nactif" id="cat_3">City</li> <li onClick="change_cat(4);" class="onglet_nactif" id="cat_4">Office</li> <li onClick="change_cat(5);" class="onglet_nactif" id="cat_5">Asia</li> <li onClick="change_cat(6);" class="onglet_nactif" id="cat_6">Poll</li> <li onClick="change_cat(7);" class="onglet_nactif" id="cat_7">Lounge</li> <li onClick="change_cat(8);" class="onglet_nactif" id="cat_8">Cosplay</li> <li onClick="change_cat(9);" class="onglet_nactif" id="cat_9">Finish</li>
</ul> </div> ');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1','2','3','4','5','6','7','8','9');
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="cat_forum" id="' + nom_cat[compteur_cat] + '" >'); } else{ document.write('<table class="cat_forum" 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 -->
<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> <!-- 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 --> <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --> | | |
| | | Crows
{ Membre }
Messages : 18
| Je n'y arrive pas :s J'ai pris le code que tu m'a donné, et mis le CSS, et voila ce que ca me donne : http://triplette.forumdefan.com/index.htm Ma structure est bien celle demandée. - 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>
<!-- 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">Les bases</li> <li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">Street Team & Projets fans</li> <li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">Actualité & Presse.</li> <li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">Les livres</li> <li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">Les films - Twilight</li> <li onMouseOver="change_cat(5);" class="onglet_nactif" id="cat_5">Vos oeuvres.</li> <li onMouseOver="change_cat(6);" class="onglet_nactif" id="cat_6">La Cafet'</li> <li onMouseOver="change_cat(7);" class="onglet_nactif" id="cat_7">Nos partenaires & les demandes de partenariat .</li> <li onMouseOver="change_cat(8);" class="onglet_nactif" id="cat_8">PARTIE STAFF.</li> <li onMouseOver="change_cat(9);" class="onglet_nactif" id="cat_9">Corbeille</li>
</ul> </div> ');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1','2','3','4','5','6','7','8','9');
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="cat_forum" id="' + nom_cat[compteur_cat] + '" >'); } else{ document.write('<table class="cat_forum" 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 -->
<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> <!-- 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 --> <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --> - Citation :
- tr.post td {padding-left: 20px;}
a:hover { text-decoration: none !important; }
a { text-decoration: none !important; }
.vignettes {-moz-border-radius:7px; background-color: #ffffff; padding-right:10px; padding-left:10px; padding-bottom: 3px; padding-top:3px;}
textarea, .textarea.post, input.post { -moz-border-radius:10px; }
.forumline{ background-color: #ffffff; -moz-border-radius: 10px ; border: 3px #ffffff solid; }
.bodyline { -moz-border-radius:10px; }
.statistiques{ border:0px; background-image: url("https://2img.net/h/oi42.tinypic.com/2i6k1t.jpg"); background-repeat: no-repeat; background-position: left; height:270px;}
.groupes{ background-color:#FFFFFF;border: 3px #910000 solid; -moz-border-radius : 5px 5px 5px 5px; height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px; font-size:15px;font-weight: bold;text-align:center; text-decoration: none !important;}
.CLASSE-DES-TITRES:hover{ font-family: garamond, times new roman, impact, serif; font-size: 120%; width: 220px;
color: #000000; background-color: #F8F8F8; text-align: center; border-left: 4px solid #F8F8F8; border-right: 4px solid #F8F8F8; }
/**TITRES DES CATEGORIES**/
.CLASSE-DES-TITRES{ font-family: garamond, times new roman, impact, serif; font-size: 120%; width: 220px;
border: 1px double #666672; color: #000000; text-align: center; background-color: #F8F8F8; border-left: 4px solid #F8F8F8; border-right: 4px solid #F8F8F8; }
.groupe { text-transform: uppercase; padding: 5px; background-color: #ECB6A2; }
.tableau_qeel { border: 5px solid #FFFFFF; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; padding: 10px; margin-left: 30px; margin-top: 40px; }
/**BODY**/ /**Enlever la marche en haut de la bannière**/ /**Répétition du fond**/
body { margin : 0px; background-repeat: no-repeat; }
/**ASCENSEUR**/
.ascenseur { position: fixed; top: 250px; right: 0px; background-color: #F2E9D9; -moz-border-radius: 0px 35px 35px 0px; -webkit-border-radius: 0px 35px 35px 0px; border-radius: 0px 35px 35px 0px; }
.ascenseur1 { position: fixed; top: 286px; right: 0px; background-color: #F2E9D9; -moz-border-radius: 0px 35px 35px 0px; -webkit-border-radius: 0px 35px 35px 0px; border-radius: 0px 35px 35px 0px; }
/**CODE**/
.code { background-color: #F2E9D9; /* couleur noire du fond */ background-image: url("https://i.servimg.com/u/f34/09/04/35/83/patter11.jpg"); background-repeat: no-repeat; border:3px #C8BFAF solid; /* bordure blanche en traits peu épais */ -border-radius: 15px; /* tous les côtés sont arrondis */ -moz-border-radius: 15px; /* tous les côtés sont arrondis */ -webkit-border-radius: 15px; /* tous les côtés sont arrondis */ color: #261D0D; /* couleur du texte blanche */ }
/**QUOTE**/ .quote { background-color: #F2E9D9; /* couleur noire du fond */ background-image: url("https://i.servimg.com/u/f34/09/04/35/83/patter11.jpg"); background-repeat: no-repeat; border:3px #C8BFAF solid; /* bordure blanche en traits peu épais */ -border-radius: 15px; /* tous les côtés sont arrondis */ -moz-border-radius: 15px; /* tous les côtés sont arrondis */ -webkit-border-radius: 15px; /* tous les côtés sont arrondis */ color: #261D0D; /* couleur du texte blanche */ }
/**SPOILER fermé**/ .spoiler_closed{ background-color: #F2E9D9; /* couleur noire du fond */ background-image: url("https://i.servimg.com/u/f34/09/04/35/83/patter11.jpg"); background-repeat: no-repeat; border:3px #C8BFAF solid; /* bordure blanche en traits peu épais */ -border-radius: 15px; /* tous les côtés sont arrondis */ -moz-border-radius: 15px; /* tous les côtés sont arrondis */ -webkit-border-radius: 15px; /* tous les côtés sont arrondis */ color: #261D0D; /* couleur du texte blanche */ }
/**SPOILER ouvert**/ .spoiler_content{ background-color: #F2E9D9; /* couleur noire du fond */ background-image: url("https://i.servimg.com/u/f34/09/04/35/83/patter11.jpg"); background-repeat: no-repeat; border:3px #C8BFAF solid; /* bordure blanche en traits peu épais */ -border-radius: 15px; /* tous les côtés sont arrondis */ -moz-border-radius: 15px; /* tous les côtés sont arrondis */ -webkit-border-radius: 15px; /* tous les côtés sont arrondis */ color: #261D0D; /* couleur du texte blanche */ }
/**ESSAI PA**/
.accueil {background-image: url(https://i.servimg.com/u/f34/09/04/35/83/patter11.jpg); border: 2px solid #7D7978; -moz-border-radius: 8px; border-left: 4px solid #7E7E7E; border-right: 4px solid #7E7E7E;}
.onglets {font-family: garamond, times new roman, impact, serif; color: #F2E9DA; background-color: #trans; text-align: center; border-left: 4px solid #7E7E7E; border-right: 4px solid #7E7E7E; margin-right: 5px; margin-left: 5px; font-size: 13px; font-variant: small-caps; letter-spacing: 2px; }
.onglets:hover {font-family: garamond, times new roman, impact, serif; color: #F2E9DA; background-color: #trans; text-align: center; border-left: 4px solid #7E7E7E; border-right: 4px solid #7E7E7E; margin-right: 5px; margin-left: 5px; font-size: 13px; font-variant: small-caps; letter-spacing: 2px; }
.contenu {text-align: justify; padding-right: 5px; padding-left: 5px; padding-top: 5px;}
.titres {border-bottom: 1px solid #7D7978; color: #000000; font-size: 13px; text-align: left; padding-left: 5px; font-variant: small-caps; letter-spacing: 2px; width:90%;}
div.infobulle {position: relative; color: #000000; text-decoration: none; font-size: 10px; border-bottom: none; text-align: center;}
div.infobulle span {display: none;}
div.infobulle:hover {background: none; z-index: 999; cursor: defaut;} div.infobulle:hover span {display: inline; position: absolute; white-space: nowrap; top: 35px; left: 35px; background-image: url(https://i.servimg.com/u/f34/09/04/35/83/patter11.jpg); -moz-border-radius: 8px; text-decoration: none; color: #000000; padding: 3px; border: 2px solid #7D7978; border-left: 2px solid #7D7978; font-size: 10px; min-width:125px; text-align: center;} /**QEEL**/
.groupes {background-image: url(https://i.servimg.com/u/f34/09/04/35/83/patter11.jpg); background-color: #EEE5D6; border: 1px solid #000000 ; -moz-border-radius : 0px 5px 0px 5px; padding-right:20px; padding-left:20px; padding-bottom:3px; margin: 5px; font-size:11px; text-align:center; text-decoration: none !important;}
#qeel td.row1 {background: none;}
/**INFO BULLE AVATAR**/
div.infobulle_avatar em { display:none; }
div.infobulle_avatar:hover { background: none; z-index: 999; cursor: hand; position: relative; text-decoration:none; border: 0; }
div.infobulle_avatar:hover em { font-style: normal; /*écriture de la police*/ font-size: 10px; /*taille de la police*/ color:#000 !important; /*couleur de la police*/ padding: 3px; display: block; position: absolute; -moz-border-radius: 5px; /* bord arrondis*/ -webkit-border-radius: 5px; /* bord arrondis*/ border-radius: 5px ; /* bord arrondis*/ background-color: #FFF; /*couleur de fond de l'infobulle*/ border: 1px solid #000; /*taille et couleur de la bordure de l'infobulle*/ width:150px; /*largeur de l'infobulle*/ top: 100px; /*infobulle à 100px du haut*/ left: 100px; /*infobulle à 100px de la gauche*/ }
/**INFO BULLE AVATAR**/
.postdetails.poster-profile a img { border: border: 5px solid #FFFFFF; /*La bordure*/ }
/**ONGLET CATEGORIE**/
.text { color:#993366; /*Couleur du texte de vos onglets*/ cursor:pointer; }
#cat_Les bases,#cat_Street Team & Projets fans,#cat_Presse.,#cat_Les livres,#cat_Les films ,#cat_Vos oeuvres.,#cat_La Cafet',#cat_Nos partenaires & les demandes de partenariat.,#cat_PARTIE STAFF,#cat_Corbeille, /*nomonglet... à remplacer par le nom 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: url('URL_ONGLET_ACTIF') no-repeat; /*URL de l'onglet étant actif*/ width:50px; /*Largeur de l'onglet étant actif*/ height:30px; /*Hauteur de l'onglet étant actif*/ cursor:pointer; }
.onglet_nactif { background:url('URL_ONGLET_INACTIF') no-repeat; /*URL de l'onglet étant inactif*/ width:50px; /*Largeur de l'onglet étant inactif*/ height:30px; /*Hauteur de l'onglet étant inactif*/ cursor:pointer; } | | |
| | | Kilvizion
{ Membre }
Messages : 6
| Tes onglets sont trop petits (50x30) pour le texte qu'ils doivent accueillir. Essaies avec 150x30? Pour voir si ça vient bien de là. | | |
| | | Crows
{ Membre }
Messages : 18
| Je viens d'essayer, ca ne change rien :s Merci beaucoup de m'aider en tout cas. | | |
| | | Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Refais le tuto, tu as du te tromper quelque part Le tutoriel MARCHE Je crois que je vais le mettre en Expert | | |
| | | Kilvizion
{ Membre }
Messages : 6
| Quand on débute, c'est pas évident de trouver les bonnes class à intégrer pour modifier comme on veut. Par exemple par défaut les onglets sont au milieu du bloc forum, alors que je voudrais les mettre à gauche. Je voudrais aussi pouvoir centrer le texte dans les onglets sachant qu'avec text-align et vertical-align il n'y a aucun changement (texte dans centré mais dans le haut de l'onglet). Des choses simples comme ça qui bloquent. D'ailleurs si vous savez comment faire, surtout fixer les onglets à gauche, ça serait simpa, merci | | |
| | | Crows
{ Membre }
Messages : 18
| Je viens de réussir. En faite, je n'avais pas pensé que le nom des catégories que je mettais devaient être exactement le même que celle de mon forum. Bref, désolée pour la perte de temps que j'ai occasionnée, et merci pour l'aide que vous m'avez apportée.
| | |
| | | ptitlac
{ Membre }
Messages : 226
| Oui Haricoow, mon template était déjà modifié, comme tu as pu le voir sur ce que je t'ai donné en page 1.
Sais-tu comment je peux régler mon problème ? | | |
| | | Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| @ ptitlac : Ça y est. J'ai changé tous les onMouseOver - 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>
<!-- DEBUT MODIF ONGLETS -->
<script type="text/javascript"> <!--
var i = 0;
document.write('<div align="center">') <ul class="onglet">
<li onClick="change_cat(0);" class="onglet_actif" id="cat_0">Accueil</li> <li onClick="change_cat(1);" class="onglet_nactif" id="cat_1">Concours</li> <li onClick="change_cat(2);" class="onglet_nactif" id="cat_2">Bookcase</li> <li onClick="change_cat(3);" class="onglet_nactif" id="cat_3">City</li> <li onClick="change_cat(4);" class="onglet_nactif" id="cat_4">Office</li> <li onClick="change_cat(5);" class="onglet_nactif" id="cat_5">Asia</li> <li onClick="change_cat(6);" class="onglet_nactif" id="cat_6">Poll</li> <li onClick="change_cat(7);" class="onglet_nactif" id="cat_7">Lounge</li> <li onClick="change_cat(8);" class="onglet_nactif" id="cat_8">Cosplay</li> <li onClick="change_cat(9);" class="onglet_nactif" id="cat_9">Finish</li>
</ul> </div> ');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1','2','3','4','5','6','7','8','9');
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="cat_forum" id="' + nom_cat[compteur_cat] + '" >'); } else{ document.write('<table class="cat_forum" 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 -->
<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> <!-- 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 --> <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --> | | |
| | | ptitlac
{ Membre }
Messages : 226
| Heu...il y a un problème...ce n'est pas mon template ><" Le voici : - Spoiler:
- Code:
-
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center"> <tr> <td valign="bottom"> <!-- BEGIN switch_user_logged_in --> <span class="gensmall"><br /> <br /><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>
<!-- 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">Administration</li> <li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">Corbeille</li>
</ul> </div> ');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1');
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="cat_forum" id="' + nom_cat[compteur_cat] + '" >'); } else{ document.write('<table class="cat_forum" 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 -->
<tr> <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </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%"> </td> <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}> </tr> <!-- END cathead --> <!-- BEGIN forumrow --> <tr border="0">
<td class="row1" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50" border="0">
<!---- DÉBUT DES MODIF ---->
<form> <fieldset class="affichage_categories"> <legend class="titre_categories"><img src="url" /><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></legend>
<table class="table_categories" align="center"> <tr> <td width="50px"> <div class="bouton_accueil"> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}"> </div> </td> <td width="600px"> <div class="forum_description"> <span class="genmed">{catrow.forumrow.FORUM_DESC}</span> </div> <div class="forum_sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><br /> </td>
<td width="150px"> <div class="messages_sujets_derniers_sujets"> <span class="gensmall"> <div class="derniers_sujets">{catrow.forumrow.LAST_POST}</div> <div class="sujets_messages">{catrow.forumrow.TOPICS} Sujets & {catrow.forumrow.POSTS} Messages</div> </span> </div> </td> </tr> </table> </fieldset> </form>
<!---- FIN DES MODIF ----> </td>
<!-- 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 -->
Et serait-il possible que tu m'explique se que tu retouche ? afin de pouvoir trouver des erreurs plus facilement par la suite si jamais. Et puis pour apprendre aussi ^^ Merci beaucoup. | | |
| | | Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Qu'est-ce qui ne fonctionne pas chez toi ? :$ | | |
| | | Contenu sponsorisé
| | | | | Classer les Catégories de votre Forum par Onglet (messages) | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|