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! |
| Onglet de catégorie "beuguant"[merci à Radimir ] | |
| -Azuline-
{ Membre }
Messages : 35
| Bonjour/Bonsoir ! J'ai fais des catégories à onglets mais le dernier onglet fait passer le QEEL au dessus des catégories ; https://i.imgur.com/tFyAb.png Pourtant mon amie qui a le même navigateur que moi ne voit aucun bug :O https://i.imgur.com/cuJXf.png Voici mon templates ; - 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}
{CURRENT_TIME}
</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>
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
<!-- 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">1</li> <li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">2</li> <li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">3</li> <li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">4</li> <li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">5</li>
</ul> </div> ');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1','2','3','4');
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 -->
<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>
</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 --> Et ici le CSS allant avec ; - Code:
-
/* ONGLET DES CATEGORIES */
.text { color:#FFFFFF; /*Couleur du texte de vos onglets*/ cursor:pointer; }
#cat_1,#cat_2,#cat_3,#cat_4,#cat_5 /*nomonglet... à remplacer par le nom des onglets*/ { padding:0px; }
.spoiler_content { display: block; } .hidden .spoiler_content { display: none; }
.cat_forum { background-color: #BED392; margin-bottom:5px; }
.onglet { dysplay:inline-block; margin-top:0px; text-decoration:none; !important cursor:pointer; }
.onglet li { float:left; list-style-type:none; margin-bottom:0px; text-decoration:none; !important cursor:pointer; margin-left: 10px; }
.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: #BED392; /*URL de l'onglet étant actif*/ border: #D46777; width:100px; /*Largeur de l'onglet étant actif*/ height:25px; /*Hauteur de l'onglet étant actif*/ cursor:pointer; -moz-border-radius:5px; }
.onglet_nactif { background-COLOR: #BED392; /*URL de l'onglet étant inactif*/ border: #D46777; width:100px; /*Largeur de l'onglet étant inactif*/ height:25px; /*Hauteur de l'onglet étant inactif*/ cursor:pointer; -moz-border-radius:5px; }
J'espère que vous trouverez une réponse à mon problème :/ |
Dernière édition par -Azuline- le Ven 03 Déc 2010, 19:30, édité 1 fois | |
| | | Radimir
{ Membre actif }
Messages : 459
| Bonsoir ,
je ne vois moi non plus aucun QEEL qui bouge ou autre chose , sachant que vous avez toucher à cette partie en plus des catégories , puis-je voir votre template d'index_body ? | | |
| | | -Azuline-
{ Membre }
Messages : 35
| Bonsoir =D Voici mon Index_body : - Code:
-
{JAVASCRIPT} <!-- BEGIN message_admin_index --> <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <!-- BEGIN message_admin_titre --> <tr> <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td> </tr> <!-- END message_admin_titre --> <!-- BEGIN message_admin_txt --> <tr> <td class="row1" rowspan="3" align="center" valign="middle"> <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div> </td> </tr> <!-- END message_admin_txt --> </table> <!-- END message_admin_index -->
<!-- BEGIN switch_user_login_form_header --> <form action="{S_LOGIN_ACTION}" method="post" name="form_login"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline"> <tr> <td width="100%" valign="top" align="center" class="row1"> <label><span class="genmed">{L_USERNAME}:</span> <input class="post" type="text" size="10" name="username" /></label> <label><span class="genmed">{L_PASSWORD}:</span> <input class="post" type="password" size="10" name="password" /></label> {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /><br /> <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
</td> </tr> </table> </form> <!-- END switch_user_login_form_header -->
{CHATBOX_TOP} {BOARD_INDEX} <!-- BEGIN switch_user_login_form_footer --> <form action="{S_LOGIN_ACTION}" method="post" name="form_login"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline"> <tr> <td width="100%" valign="top" align="center" class="row1"> <span class="genmed">{L_USERNAME}:</span> <input class="post" type="text" size="10" name="username"/> <span class="genmed">{L_PASSWORD}:</span> <input class="post" type="password" size="10" name="password"/> {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /><br /> <span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /> </td> </tr></table></form><!-- END switch_user_login_form_footer --> <div class="gradualfader"><!-- BEGIN disable_viewonline --><br><center><span class="groupes"><font color="#0C9494"><b>sang pur</b></font></span> ♛ <span class="groupes"><font color="#19853F"><b>sang de bourbe</b></font></span> ♛ <span class="groupes"><font color="#6B1F91"><b>sang mêlé</b></font></span> ♛ <span class="groupes"><font color="#660C0C"><b>mangemorts</b></font></span> ♛ <span class="groupes"><font color="#305DAB"><b>traitre à leur sang</b></font></span> </center><div class="statistiques" style="padding-top: 12px;"><div style="float: left; width: 400px; padding-left: 12px; font-size: 11px;"><span id="matt">{TOTAL_USERS} <script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"Nous sommes");</script> <script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membre enregistré/,"sorcier recensé.");</script> <script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membres enregistrés/,"sorciers recensés.");</script></span> <span id="bert">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/,"Ils ont écris");</script> <script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/messages/,"parchemins en classe");</script></span> <span id="yosh">{NEWEST_USER} <script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"et le dernier à avoir donné la bonne réponse est");</script></span> <span id="newest">{RECORD_USERS}<script type="text/javascript">document.getElementById('newest').innerHTML=document.getElementById('newest').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de/,"Le record d'étudiants en classe est de");</script></span> <span id="delf">{TOTAL_USERS_ONLINE} <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateur en ligne/,"personne à Poudlard");</script> <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateurs en ligne/,"personnes à Poudlard");</script> <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistré/,"sorcier");</script> <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistrés/,"sorciers");</script> <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisible et/,"fantôme,");</script> <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisibles et /,"fantômes,");</script> <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invité/,"moldu.");</script> <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invités/,"moldus.");</script></span> <span id="connectes">{LOGGED_IN_USER_LIST} <script type="text/javascript">document.getElementById('connectes').innerHTML=document.getElementById('connectes').innerHTML.replace(/Utilisateurs enregistrés/,"Se promènent en ce moment entre les murs du château");</script></span></div>
<div style="float: right; width: 350px; padding-right: 15px; font-size: 10px;"><table><span id="derniers">{L_CONNECTED_MEMBERS} <script type="text/javascript">document.getElementById('derniers').innerHTML=document.getElementById('derniers').innerHTML.replace(/Membres connectés au cours des 24 dernières heures/,"Les derniers sorciers qui ont parcourus Poudlard");</script></span></table><br><br></div></div> <!-- END disable_viewonline --></div>
{AUTO_DST} | | |
| | | Radimir
{ Membre actif }
Messages : 459
| Re Bonsoir, Test avec cet index_box , ça devrait régler le problème - 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">1</li> <li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">2</li> <li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">3</li> <li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">4</li> <li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">5</li>
</ul> </div> ');
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array('0','1','2','3','4');
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 -->
<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 --> </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --> | | |
| | | -Azuline-
{ Membre }
Messages : 35
| Oh comme je t'aime x) Merci beaucoup, j'étais tellement désespérée que je croyais mon problème insolvable et en deux minutes tout est parfait =D Merci beaucoup je vais enfin pouvoir aller dormir l'esprit tranquille x) | | |
| | | Radimir
{ Membre actif }
Messages : 459
| Au plaisir , je déplace en Résolu Et bonne soirée . | | |
| | | Contenu sponsorisé
| | | | | Onglet de catégorie "beuguant"[merci à Radimir ] | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|