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! |
| Conséquences indésirables d'un forum à onglets | |
| Bichou
{ Membre }
Messages : 42
| Bonsoir tout le monde Encore une fois j'ai besoin de votre aide chers amis (et oui, lorsque je crois avoir réglé tous les problèmes un nouveau surgit.) Alors je vais vous expliquer mon problème. Depuis que j'ai installé mes onglets, j'ai remarqué que la bordure qui entourait mes catégories était devenue plus large, plus imposante, et j'aimerai savoir comment rétrécir cette taille, si c'est possible. Je vous poste l'adresse de mon forum : http://blood-falls.forumactif.com Et une petite capture : Selon moi le problème vient de mon template étant donné que tout est arrivé lorsque je l'ai mis, alors je vous le poste également : - Spoiler:
- Code:
-
<table width="100%" border="-1" 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"> <!--
document.write('<div align="center"> <ul class="conteneur_onglets">
<li onMouseOver="change_cat(1)" class="onglet actif" id="onglet_1">administration</li> <li onMouseOver="change_cat(2)" class="onglet " id="onglet_2">gestion des personnages</li> <li onMouseOver="change_cat(3)" class="onglet " id="onglet_3">monde réel</li> <li onMouseOver="change_cat(4)" class="onglet " id="onglet_4">monde alternatif</li> <li onMouseOver="change_cat(5)" class="onglet " id="onglet_5">flood &amp; cie</li>
</ul></div>');
var compteur_cat = 1;
function change_cat(numero) { if(document.getElementById('categorie_'+numero)) { /* affichage de la bonne categorie */ $('table[id^=categorie_]').css('display','none'); $('table[id=categorie_'+numero+']').css('display','block'); /* affichage du bon onglet */ $('.actif').removeClass("actif"); $('.onglet[id=onglet_'+numero+']').addClass("actif"); } }
function capture_cat() { if(compteur_cat == 1) { document.write('<table class="forumline" id="categorie_' + compteur_cat + '" >'); } else { document.write('</table><table class="forumline" id="categorie_' + 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 -->
Voilà. Merci d'avance pour votre aide |
Dernière édition par Bichou le Dim 30 Jan 2011, 18:37, édité 1 fois | |
| | | Cannelle Eussuinsse
{ Membre }
Messages : 35
| Salut =) Il faudrait que tu modifie dans ton CSS la largeur des lignes Si tu veux bien me le montrer, stp | | |
| | | Bichou
{ Membre }
Messages : 42
| Pas de soucis, le voici : - Spoiler:
/* liens */ a { text-decoration: none; outline: none;} A:link {text-decoration: none !important;} A:visited {text-decoration: none !important;} A:active {text-decoration: none !important;} A:hover {text-decoration: none !important;}
.navtop { top : 0px; text-align : center; width : 100% ; }
/*fond du forum */ body { background-repeat: repeat-y; background-position: top center; margin-bottom: 0px; margin-top: 0px; }
/* contour du forum */ .bodyline { -moz-border-radius: 25px; border: 8px solid #transp; border-top: none !important; border-bottom: none !important; } .bodyline { padding-right: 0px; padding-left:0px; }
/* zones de texte */ .postbody { display: block; padding-left: 15px; padding-right: 15px; text-align:justify; }
tr.post span.gensmall { display: none; }
/* menu du forum */ a.mainmenu{ color: #916E3A; text-align : center; text-decoration:none; text-transform: uppercase; font-size : 16px padding-left:0px; padding-right:0px; font-family: Courier New; } a.mainmenu:hover{ color: #b49360; text-decoration:none; text-align : center; text-transform: uppercase; font-size : 16px padding-left:0px; padding-right:0px; font-family: Courier New; } /* contour du forum */ .forumline { border-width: 0px 4px 0px 4px; -moz-border-radius:6px; }
/* Titres des forums */ .forumlink { Padding-left: 16px; Font-Family : Time New Roman; Font-Size: 25px; Font-weight: normal; Letter-spacing: -2px; text-transform: uppercase; }
input, select { color : #825D2F; border-color : #0d0d0d; -moz-border-radius: 6px; } textarea { color: #825D2F!important; border-color : #0d0d0d; -moz-border-radius: 6px; background-image: url(https://2img.net/r/ihimizer/img185/836/70548037.jpg) ! important; }
/* Titre des catégories */ a.cattitle{ text-shadow: #362a21 1px 1px 1px; }
/* tableaux */ th{ text-shadow: #362a21 1px 1px 1px;} .td{ text-shadow: #362a21 1px 1px 1px;}
/* ¨Profil */ .profilentour { padding:6px; background-color:#0d0d0d; -moz-border-radius:8px; } .fondavatar { border : 3px double #3B2A16;}
td.row1{ background-image : url(https://2img.net/r/ihimizer/img535/851/sanstitre1ox.png); }
td.row2{ background-image : url(https://2img.net/r/ihimizer/img535/851/sanstitre1ox.png); }
td.row3{ background-image : url(https://2img.net/r/ihimizer/img535/851/sanstitre1ox.png); }
td.row4{ background-image : url(https://2img.net/r/ihimizer/img535/851/sanstitre1ox.png); }
.onglet { /*Onglet non survolé*/ font-family: Time New Roman; font-size : 22px; Font-weight: bold; Font-style: italic; Letter-spacing: -2px; text-shadow: #362a21 1px 1px 1px; padding-left: 32px; padding-right: 32px; display: inline-block; margin-bottom:-18px; margin-left: -40px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; cursor: pointer; }
.actif { /*Onglet survolé*/ font-family: Time New Roman; font-size : 22px; Font-weight: bold; Font-style: italic; Letter-spacing: -2px; text-shadow: #362a21 1px 1px 1px; text-decoration:none; !important -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; }
Ce qui est étrange c'est que justement avant la modification du template elles étaient parfaites, donc ça ne peut venir du CSS logiquement, si ? | | |
| | | Bichou
{ Membre }
Messages : 42
| Non, mon problème n'est toujours pas résolu. J'attends encore patiemment qu'on me réponde. | | |
| | | Looney
{ Membre }
Messages : 105
| Bonsoir, En effet le problème est lien au templates a causes des onglets, je l'avais remarqué moi aussi en essayant le code, cela dit, le CSS devrait pouvoir régler le problème. Essaie de rajouter une ligne à ta partie forumline : - Code:
-
border-width:1px; Et tiens moi au courant | | |
| | | Bichou
{ Membre }
Messages : 42
| Bonsoir, J'ai ajouté ton code et je n'ai malheureusement vu aucun changement. J'en viens à me demander si c'est vraiment possible de pouvoir inverser ça. | | |
| | | james1920
{ Membre actif }
Messages : 422
| Salut,
Ajoute le code donné par Looney mais toutes à la fin de ton CSS perso.
James | | |
| | | Bichou
{ Membre }
Messages : 42
| Bonsoir, J'ai essayé James, mais toujours rien. | | |
| | | Looney
{ Membre }
Messages : 105
| Je peux voir comment tu l'ajoutes à ton css et ou ? Je sais pas très clair là, alors est ce que tu peux faire le rajout comme on te l'a dit, ou tu veux, comme james te le conseil ou pas, et nous montrer ton css suite à ça s'il te plait ? Edit : Désolée, c'était pas le bon code... Essaie plutôt ça : - Code:
-
.forumline .row1, .forumline .row2, .forumline .row3, .forumline .row3Right { border-width: 1px; } | | |
| | | Bichou
{ Membre }
Messages : 42
| Aucun changement, j'ai pourtant essayé le code aux deux endroits. Je reposte le CSS pour vous montrer : - Spoiler:
/* liens */ a { text-decoration: none; outline: none;} A:link {text-decoration: none !important;} A:visited {text-decoration: none !important;} A:active {text-decoration: none !important;} A:hover {text-decoration: none !important;}
.navtop { top : 0px; text-align : center; width : 100% ; }
/*fond du forum */ body { background-repeat: repeat-y; background-position: top center; margin-bottom: 0px; margin-top: 0px; }
/* contour du forum */ .bodyline { -moz-border-radius: 25px; border: 8px solid #transp; border-top: none !important; border-bottom: none !important; } .bodyline { padding-right: 0px; padding-left:0px; }
/* zones de texte */ .postbody { display: block; padding-left: 15px; padding-right: 15px; text-align:justify; }
tr.post span.gensmall { display: none; }
/* menu du forum */ a.mainmenu{ color: #916E3A; text-align : center; text-decoration:none; text-transform: uppercase; font-size : 16px padding-left:0px; padding-right:0px; font-family: Courier New; } a.mainmenu:hover{ color: #b49360; text-decoration:none; text-align : center; text-transform: uppercase; font-size : 16px padding-left:0px; padding-right:0px; font-family: Courier New; } /* contour du forum */ .forumline { border-width: 0px 4px 0px 4px; -moz-border-radius:6px; }
/* Titres des forums */ .forumlink { Padding-left: 16px; Font-Family : Time New Roman; Font-Size: 25px; Font-weight: normal; Letter-spacing: -2px; text-transform: uppercase; }
input, select { color : #825D2F; border-color : #0d0d0d; -moz-border-radius: 6px; } textarea { color: #825D2F!important; border-color : #0d0d0d; -moz-border-radius: 6px; background-image: url(https://2img.net/r/ihimizer/img185/836/70548037.jpg) ! important; }
/* Titre des catégories */ a.cattitle{ text-shadow: #362a21 1px 1px 1px; }
/* tableaux */ th{ text-shadow: #362a21 1px 1px 1px;} .td{ text-shadow: #362a21 1px 1px 1px;}
/* ¨Profil */ .profilentour { padding:6px; background-color:#0d0d0d; -moz-border-radius:8px; } .fondavatar { border : 3px double #3B2A16;}
td.row1{ background-image : url(https://2img.net/r/ihimizer/img535/851/sanstitre1ox.png); }
td.row2{ background-image : url(https://2img.net/r/ihimizer/img535/851/sanstitre1ox.png); }
td.row3{ background-image : url(https://2img.net/r/ihimizer/img535/851/sanstitre1ox.png); }
td.row4{ background-image : url(https://2img.net/r/ihimizer/img535/851/sanstitre1ox.png); }
.onglet { /*Onglet non survolé*/ font-family: Time New Roman; font-size : 22px; Font-weight: bold; Font-style: italic; Letter-spacing: -2px; text-shadow: #362a21 1px 1px 1px; padding-left: 32px; padding-right: 32px; display: inline-block; margin-bottom:-18px; margin-left: -40px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; cursor: pointer; }
.actif { /*Onglet survolé*/ font-family: Time New Roman; font-size : 22px; Font-weight: bold; Font-style: italic; Letter-spacing: -2px; text-shadow: #362a21 1px 1px 1px; text-decoration:none; !important -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; } .forumline .row1, .forumline .row2, .forumline .row3, .forumline .row3Right { border-width: 1px; }
Peut être est-ce dans les templates qu'il faut modifier ? | | |
| | | Looney
{ Membre }
Messages : 105
| J'ai finis par trouver ! lol C'était en effet dans le templates, je pensais juste qu'il était possible d'arranger sans avoir à le modifier... Voila ton template avec les corrections, normalement ca devrait être bon - Code:
-
<table width="100%" border="-1" 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"> <!--
document.write('<div align="center"> <ul class="conteneur_onglets">
<li onMouseOver="change_cat(1)" class="onglet actif" id="onglet_1">administration</li> <li onMouseOver="change_cat(2)" class="onglet " id="onglet_2">gestion des personnages</li> <li onMouseOver="change_cat(3)" class="onglet " id="onglet_3">monde réel</li> <li onMouseOver="change_cat(4)" class="onglet " id="onglet_4">monde alternatif</li> <li onMouseOver="change_cat(5)" class="onglet " id="onglet_5">flood & cie</li>
</ul></div>');
var compteur_cat = 1;
function change_cat(numero) { if(document.getElementById('categorie_'+numero)) { /* affichage de la bonne categorie */ $('table[id^=categorie_]').css('display','none'); $('table[id=categorie_'+numero+']').css('display','block'); /* affichage du bon onglet */ $('.actif').removeClass("actif"); $('.onglet[id=onglet_'+numero+']').addClass("actif"); } }
function capture_cat() { if(compteur_cat == 1) { document.write('<table class="forumline" border="0" cellspacing="1" cellpadding="0" id="categorie_' + compteur_cat + '" >'); } else { document.write('</table><table class="forumline" border="0" cellspacing="1" cellpadding="0" id="categorie_' + 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 --> | | |
| | | Bichou
{ Membre }
Messages : 42
| Oui c'est enfin bon ! Merci Looney tu es ma sauveuse. Problème résolu donc. | | |
| | | Phantasmagoria
{ Membre hyper-actif }
Messages : 1636
| Je classe | | |
| | | Contenu sponsorisé
| | | | | Conséquences indésirables d'un forum à onglets | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|