| Onglets de catégories : deux problèmes | |
|
|
Freing
{ Membre }
Messages : 126
| Bonjour à tous, J'ai deux problèmes avec les onglets de mes catégories. La première est que je n'arrive pas à les mettre coller aux titres de catégories mais qu'il soit en dessous.Voici une image pour que vous compreniez ce que je voudrais : - Spoiler:
Et aller voir sur mon forum pour voir ce que j'ai (cliquer sur les www ). j'aimerais aussi leur donner une forme comme sur la photo mais je n'arrive pas à le faire non plus. Quel est le code ? Mon deuxième problème est que, quand on est dans les catégories, les onglets sont affichés mais très mochement. Voici ce que cela fait : - Spoiler:
Comment retirer cela ? Voici le template : - Code:
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<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"> <!--
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">Le petit Ecran</li> <li onMouseOver="change_cat(3)" class="onglet " id="onglet_3">Intérieur PB</li> <li onMouseOver="change_cat(4)" class="onglet " id="onglet_4">Dortoirs</li> <li onMouseOver="change_cat(5)" class="onglet " id="onglet_5">Sous-Sols</li> <li onMouseOver="change_cat(6)" class="onglet " id="onglet_6">Extérieur PB</li> <li onMouseOver="change_cat(7)" class="onglet " id="onglet_7">Ville</li> <li onMouseOver="change_cat(8)" class="onglet " id="onglet_8">Hors RP</li> <li onMouseOver="change_cat(9)" class="onglet " id="onglet_9">Forums Privés</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+']').fadeIn();; /* 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 --> Ainsi que le CSS (des onglets) : - Code:
-
/*ONGLET*/
.onglet { /*Onglet non survolé*/ background-color : #5F9EA0; display: inline-block; text-transform:uppercase; text-shadow: 0px 0px 12px #FFF; text-color: #FFFFFF; padding-left:5px; padding-right:5px; width: 100px; height: 50px; -moz-border-radius : 10px 10px 50px 50px; cursor: pointer; margin-bottom:-30px;/*entre forum et onglets*/ }
.actif { /*Onglet survolé*/ background-color : #B0E0E6; text-transform:uppercase; text-shadow: 0px 0px 12px #FFF; text-color: #FFFFFF; padding-left:15px; padding-right:15px; -moz-border-radius : 10px 10px 50px 50px; margin-bottom:-30px;/*entre forum et onglets*/ } Merci d'avance pour les réponses et l'aide qui va mettre donner, Cordialement, Freing. |
Dernière édition par Freing le Sam 22 Jan 2011, 07:15, édité 1 fois | |
|
| |
Phantasmagoria
{ Membre hyper-actif }
Messages : 1636
| Bonjour Freing
Si c'est possible d'ajouter ton code CSS ^^
Merci. M.D | | |
|
| |
Freing
{ Membre }
Messages : 126
| Oh, oui, je l'avais oublié. Je l'ajoute de ce pas. (: | | |
|
| |
Freing
{ Membre }
Messages : 126
| Des réponses à mon problème ? | | |
|
| |
Hortie
{ Membre actif }
Messages : 660
| Les Ups sont strictement interdit d'autant plus après seulement deux jours d'attente. C'est le rôle des modérateurs seulement d'actualiser les demandes d'aide. Merci d'y apporter une attention toute particulière à l'avenir | | |
|
| |
Freing
{ Membre }
Messages : 126
| |
| |
Phantasmagoria
{ Membre hyper-actif }
Messages : 1636
| Bonjour ^^ Ton problème est-il toujours d'actualité? Si ce n'est plus le cas et qu'il est résolu, je te prie d'éditer ton premier message et de cocher l'icône Merci | | |
|
| |
Freing
{ Membre }
Messages : 126
| Bonjour, Oui, mon problème est toujours d'actualité. (: | | |
|
| |
Oyoken
{ Membre }
Messages : 34
| Bonjour, De manière à obtenir comme sur l'image voulue : - Code:
-
/*ONGLET*/
.onglet { /*Onglet non survolé*/ background-color : #5F9EA0; display: inline-block; text-transform:uppercase; text-shadow: 0px 0px 12px #FFF; text-color: #FFFFFF; padding-left:5px; padding-right:5px; width: auto; height: 50px; -moz-border-radius : 10px 10px 50px 50px; cursor: pointer; margin-bottom:-30px;/*entre forum et onglets*/ text-align:center; }
.actif { /*Onglet survolé*/ background-color : #B0E0E6; } Concrètement au niveau de ton onglet survolé, tu n'as que le fond qui change de couleur. Le reste est obsolète dans la mesure où tu gardes les mêmes "options" que l'onglet non survolé. J'ai vu sur ton forum que tu avais réussi à les aligner les uns aux autres ( saufs forums privés <= Je ne sais pas à quoi il correspond... ) donc le margin-bottom n'est sans doute plus nécessaire dans mon code précédent. J'ai modifié simplement la longueur et l'ai mise en "auto" de manière à ce que tes titres ne dépassent pas de leurs cadres. De façon à obtenir le même résultat que l'image voulue j'ai également ajouté que le texte soit centré. J'ai également inversé les bordures Je n'ai pas testé le code donc je ne sais pas s'il y a des erreurs mais n'hésites pas à poster le rendu en attendant que je puisse le tester moi même Bien à toi | | |
|
| |
Freing
{ Membre }
Messages : 126
| Heu, je viens de le tester. Les onglets ne sont pas comme sur l'image. Mais les onglets reviennent toujours par dessus les titres des catégories (que je trouve très moche). Forum privée correspond au forums privés (cachés aux invités et à certains membres) du forum.
Pour plus d'information, au lieu de te faire que du texte, je te propose plutôt d'aller voir mon forum pour mieux comprendre. | | |
|
| |
Oyoken
{ Membre }
Messages : 34
| Bonjour, J'avais du boire de trop hier ^^" - Code:
-
/*ONGLET*/
.onglet { /*Onglet non survolé*/ background-color : #5F9EA0; display: inline-block; text-transform:uppercase; text-shadow: 0px 0px 12px #FFF; text-color: #FFFFFF; padding-left:5px; padding-right:5px; width: auto; height: 50px; -moz-border-radius : 50px 50px 10px 10px; cursor: pointer; margin-bottom:-30px;/*entre forum et onglets*/ text-align:center; }
.actif { /*Onglet survolé*/ background-color : #B0E0E6; } C'est le -moz-border-radius qu'il faut changer pour avoir les onglets dans le bon sens déjà ^^ Teste avec ça et dis moi ce que ça donne... Ca n'empèchera pas les onglets d'être sur les catégories mais déjà on y verra un peu mieux ^.^ Bien à toi | | |
|
| |
Freing
{ Membre }
Messages : 126
| Je viens de tester et je remarque ... que ce n'ai pas encore sa. | | |
|
| |
Oyoken
{ Membre }
Messages : 34
| Une image peut-être ^.^ ? Pour voir ce que ça a changé ... | | |
|
| |
Freing
{ Membre }
Messages : 126
| Encore plus simple, rend toi sur le forum. Ici. | | |
|
| |
Oyoken
{ Membre }
Messages : 34
| Bonjour, D'accord, d'accord... Alors on va y aller à tâtons hein ! ^^ Essaie dans l'immédiat de ne pas mettre de contours arrondis et enlève la taille fixe pour voir le rendu que cela donne ^^ Par contre tu as remis le code la longueur en place ? Parce que là les titres dépassent des onglets... Bien à toi.. |
Dernière édition par Oyoken le Dim 06 Fév 2011, 15:01, édité 1 fois (Raison : Une faute horrible que je ne préfère pas mettre ici... :/) | |
|
| |
Freing
{ Membre }
Messages : 126
| Voilà, je crois que j'ai bien fait. (D'après ce que tu ma dit.) | | |
|
| |
Oyoken
{ Membre }
Messages : 34
| Bien bien.. Là tu as enlevé les arrondis... Maintenant enlèves dans ton CSS la partie correspondant à la hauteur ==> height : xxx px ; Histoire que l'on ait quelque chose d'homogène avant d'aller plus loin ^.^ Logiquement après cela tes onglets seront beaucoup plus petit. Dis moi lorsque ce sera fait En gros ton code va ressembler à ça : - Code:
-
/*ONGLET*/
.onglet { /*Onglet non survolé*/ background-color : #5F9EA0; display: inline-block; text-transform:uppercase; text-shadow: 0px 0px 12px #FFF; text-color: #FFFFFF; padding-left:5px; padding-right:5px; width: auto; cursor: pointer; margin-bottom:-30px;/*entre forum et onglets*/ text-align:center; }
.actif { /*Onglet survolé*/ background-color : #B0E0E6; } Si ce n'est pas le cas, redonne le moi ^.^ | | |
|
| |
Freing
{ Membre }
Messages : 126
| |
| |
Oyoken
{ Membre }
Messages : 34
| Ok maintenant tu vas appliquer sur ton css une taille que l'on dira raisonnable. Du genre => 30px ou 40px => height:40px; Suivant la taille que tu vas choisir, tes onglets vont s'allonger (normal x) ). Après cela je ne me souviens plus de tête ( je suis plus adepte de tester et voir ensuite ) tu enlèveras ( si tu l'as encore ! ) le margin-bottom. Tes onglets vont être sûrement décalés mais pas d'inquiétude. En jouant ensuite avec les valeurs de margin-bottom ou margin-top (pas les deux ensemble hein ! ) tu arriveras à positionner tes onglets juste au dessus de tes catégories. Dis moi quand ce sera fait Bonne journée | | |
|
| |
Freing
{ Membre }
Messages : 126
| Voilà, j'ai fais ce que tu ma dit. | | |
|
| |
Oyoken
{ Membre }
Messages : 34
| Bien ! Maintenant tu mets un margin-bottom ( ou margin-top à toi de tester ) et tu joues avec les valeurs de manières à avoir tes onglets juste au dessus de tes catégories | | |
|
| |
Freing
{ Membre }
Messages : 126
| En faite, je veux mes onglets en dessous des catégories. | | |
|
| |
Oyoken
{ Membre }
Messages : 34
| Ah ! Dans ce style là alors => - Spoiler:
En admettant que le bas de l'onglet soit un peu plus bas que sur l'image et "rentre" dans la catégorie (j'ai pas fait de pointillés mais il devrait y en avoir dans le rectangle catégories ? ) Si c'est le cas ça doit être jouable en jouant sur les positions mais je t'avoue que je ne suis pas encore au point pour ces balises ^^' | | |
|
| |
Freing
{ Membre }
Messages : 126
| Ui, c'est comme sur le dessin ! (: | | |
|
| |
Oyoken
{ Membre }
Messages : 34
| Je ne saurais plus t'aider dans ce cas précis. Peut-être quelqu'un manierait-il les positions bien mieux que moi... | | |
|
| |
Contenu sponsorisé
| |
| |
| Onglets de catégories : deux problèmes | |
|