Sujets similaires

Bonjour !

Je viens chercher de l'aide car j'ai tenté de faire des catégories sous forme d'onglets, mais ça ne fonctionne pas. Sad

Voici les codes (sous balise hide) et un screen pour vous montrer.

Comme vous pouvez le voir, les "onglets" sont bien présents mais mal placé, et ne contiennent pas chacun leur contenu qu'ils sont censé avoir... La configuration reste celle de base. :/

Merci d'avance pour l'aide qui me sera apportée !

Je post pour avoir accès au contenu Smile

Edit : au vu de la screen, le problème vient peut être du niveau de compression de l'index. Dans ton panneau d'administration quel réglage as tu pour PA > Affichage > Page d'accueil > Structure & Hiérarchie > Niveau de compression de l'index.

Normalement il faut que tu choisisses l'un des 3 choix pour "Séparer les catégories sur l'index" (ceux du bas).

Spoiler:

C'est une erreur courante sur le tuto pour les forum en onglet. D'ailleurs pourrais tu me donner le lien du tuto que tu as utilisé ? Je vais tout de même installer ton code sur mon forum test pour voir si cela peut venir du code Wink

Edit : dans ton template, remplace

Code:: <div id="conteneur_onglets">
<td class="onglet"><div>Administration</div></td>
<td class="onglet"><div>Gestion</div></td>
<td class="onglet"><div>RPG</div></td>
<td class="onglet"><div>Flood</div></td>
</div>

par

Code:: <div id="conteneur_onglets">
<div class="onglet">Administration</div>
<div class="onglet">Gestion</div>
<div class="onglet">RPG</div>
<div class="onglet">Flood</div>
</div>

En effet si tu mets juste tes td comme cela, ça crée un bug :/

Bonjour Nihil !

Je confirme bien que au niveau de la compression de l'index, tout est bon. Wink

Pour le tuto, c'est un ami qui m'a fait une capture d'un tuto auquel je n'avait pas accès, sur NU, si tu y es...
Voici le screen : https://2img.net/image.noelshack.com/fichiers/2014/08/1393175296-tuto-onglet2.png

J'ai fais comme tu m'as indiqué, et maintenant, il me les mets en vertical, et plus en horizontal. Mais ils sont revenu du côté gauche, je crois que c'est déjà un bon point. ( Prochaine étape, les centrer !)

Et par conséquent, tu as bien vu car le soucis de contenu est résolu. Je passe bien d'un contenu à l'autre en fonction des catégories.

Ce que je voudrais donc désormais : des onglets en horizontal, centrés, et sous cette forme : https://i.servimg.com/u/f55/12/03/49/16/onglet10.png

Merci beaucoup pour ton aide ! <3

Voici un code CSS de base fait rapidement, il est à personnaliser bien entendu :

Code:: .onglet {
background: white;
display: inline-block; /* pour qu'ils se mettent à côté*/
margin: 5px;
padding: 5px;
}

Pour mettre en majuscule, cherche du côté de "text-transform", pour les bords arrondis fais une recherche sur "border-radius".

Pour les centrer, il suffit de mettre "text-align: center;" dans le CSS du conteneur.

Code:: #conteneur_onglets { text-align: center; }

"Erreur détectée
Nous avons compté un nombre impaire de guillemets donc une chaine est mal fermée. Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum.

Nous vous conseillons de relire votre code."

Voilà tout mon CSS, mais à première vue j'ai pas vu d'anomalie...

Code:: a {text-decoration: none !important;}
a:hover{text-decoration: none !important}
a.topiclink {text-decoration: none !important;}
a.topiclink:hover {text-decoration: none !important;}

tr.post span.gensmall { display: none; }

body {
margin: 0;
}

.bodyline {
padding:0px;
}

.bodyline{
border-left: 5px #645348 solid;
border-right: 5px #645348 solid;
}

#i_logo { margin: 0;}

.forumlink {
padding:5px;
text-transform:capitalize;
font-size:13px;
font-family: Arial;
text-shadow: 1px 1px 0px #ffffff;
margin-top:3px;
}
/*LIENS EN PETITES MAJUSCULES*/
a {
font-variant: small-caps;
}
/*FIN LIENS EN PETITES MAJUSCULES*/

/* CSS pour le conteneur des catégories */
#conteneur_categories
{

}

/* CSS pour les catégories */
.categorie
{

}

/* CSS pour le conteneur des onglets */
#conteneur_onglets
{
display: none;
text-align: center;
}

/* CSS pour les onglets */
.onglet {
background: white;
display: inline-block; /* pour qu'ils se mettent à côté*/
margin: 5px;
padding: 5px;
cursor: pointer;
}

En tout cas ça fonctionne bien visiblement. Merci. Smile

Apparemment le problème vient de mon commentaire en CSS, en effet j'ai utilisé une apostrophe...

Code:: display: inline-block; /* pour qu'ils se mettent à côté*/

Du coup il croit que j'ai ouvert une guillemet et cherche la fermeture XD. Tu peux enlever ce commentaire si tu veux, ou bien enlever l'apostrophe, ou encore changer le texte ^^.

N'hésite pas à éditer le titre de ton sujet pour rajouter la mention "Résolu" Wink

Ah c'était donc ça le soucis ! Merci beaucoup pour m'avoir éclairé sur ce point. Smile

Et bien non c'est pas tout à fait terminé. /me tape pas j't'en supplie xD/

L'onglet administration est OK, mais quand on passe sur un autre onglet, y'a un giga grand espace qui se créé entre l'onglet et son contenu, comme sur cette capture, par exemple : https://i.servimg.com/u/f55/12/03/49/16/captur15.png

Essaye en remplaçant le JS par ceci :

Code:: /**
* Fonction qui se déclenche lorsque tous les éléments de la page ont étés créés
* Comme nous allons effectuer des actions sur les onglets, nous voulons être sûr qu'ils existent
* Sinon ça ne servirait à rien
*/
$('document').ready(function()
{
/**
* Pour ne pas afficher les onglets dans les sous catégories
* Et pour ne pas gêner les utilisateurs qui n'activent pas Javascript,
* Les onglets sont invisibles par défaut.
* On commence donc par les rendre visibles.
*/
$('#conteneur_onglets').css( 'display' , 'block' );

/**
* On indique que l'on change de catégorie lorsque l'on clique sur un onglet
* Si vous souhaitez changer de catégorie lors du survol (ce que je déconseille)
* Il vous suffit de remplacer "click" par "hover"
*/
$('#conteneur_onglets .onglet').click(function()
{
/**
* Fonction à exécuter lors du click, ici il s'agit de changer de catégorie.
* On passe en argument l'index de l'onglet.
* L'index est le numéro de l'onglet en commençant par 0
* Pour l'onglet 1, il s'agit du première onglet, l'index vaut 0
* Pour l'onglet 2, il s'agit du seconde onglet, l'index vaut 1
* ...
* Pour l'onglet 5, il s'agit du cinquième onglet, l'index vaut 4
*/
change_categorie( $('.onglet', '#conteneur_onglets').index( this ) )
});

/**
* On choisit quelle catégorie afficher en premier.
* Par défaut, il s'agit de la première (index 0).
* Si vous souhaitez en afficher une autre, il vous suffit de remplacer le 0
* par l'index de la catégorie désirée.
* Si vous voulez toutes les afficher, supprimez cette ligne.
*/
$('.onglet:eq(0)').click();
});

/**
* Fonction qui se déclenche à chaque fois que l'on souhaite changer de catégorie
*/
function change_categorie( index )
{
/**
* On vérifie que la catégorie demandée existe
*/
if( $('.categorie:eq(' + index + ')').size() != 0 )
{
/**
* Si vous vous en souvenez, dans la partie HTML, on avait ajouté
* Un conteneur autour des catégories et l'on ne savait pas à quoi il servait.
* Ici, nous lui donnons la même hauteur que la catégorie qui sera affichée.
* Je vous explique pourquoi en dessous du code.
*/

      /* Ligne commentée : crée un bug
      $('#conteneur_categories').css( 'min-height' , $('.categorie:eq(' + index + ')').outerHeight() );
      */
/**
* On masque toutes les catégories
*/
$('.categorie').css( 'display' , 'none' );

/**
* On affiche avec un petit effet la catégorie demandée
*/
$('.categorie:eq(' + index + ')').fadeIn( 500 );

/**
* On enlève la classe "actif" de l'ancien onglet actif
*/
$('.onglet.actif').removeClass('actif');

/**
* On ajoute la classe "actif" à l'onglet de la catégorie affichée
*/
$('.onglet:eq('+ index +')').addClass('actif');
}
/**
* Si la catégorie n'existe pas, on affiche un message
*/
else alert('Vous ne pouvez pas accéder à cette catégorie');
}

J'ai mis en commentaire une ligne du code JS, celle ci :

Code:: $('#conteneur_categories').css( 'min-height' , $('.categorie:eq(' + index + ')').outerHeight() );

Elle définissait une hauteur à la div #conteneur_categories, mais il semblerait qu'il y ait un bug avec cette div... Je l'ai donc mise en commentaire. ^^

Ah d'accord ! J'avais un présentiment comme quoi ça venait du JS, mais n'étant pas sûre et ne connaissant pas suffisamment... :/
OK, j'ai encore 2 toutes petites choses à soulever, et en théorie après ça sera bon.

1- Quand je descend un peu sur ma page, et que je clique ensuite sur un onglet, il me "remonte" systématiquement en actualisant le contenu de l'onglet... C'est assez chiant, y'a moyen qu'il change d'un onglet à un autre sans que la page bouge de position ?

2- Est-il possible de supprimer ces liserets, de part en d'autre de messages et sujets, afin qu'ils soient marron comme le reste ? https://i.servimg.com/u/f55/12/03/49/16/captur16.png

Citation :: 1- Quand je descend un peu sur ma page, et que je clique ensuite sur un onglet, il me "remonte" systématiquement en actualisant le contenu de l'onglet... C'est assez chiant, y'a moyen qu'il change d'un onglet à un autre sans que la page bouge de position ?

Tiens c'est étrange sur mon forum test je n'ai pas ce bug o-o. Au niveau des templates j'ai exactement celui que tu as donné dans ton premier message, et le JS que j'ai copié / coller... Là je comprends pas trop ><

Citation :: 2- Est-il possible de supprimer ces liserets, de part en d'autre de messages et sujets, afin qu'ils soient marron comme le reste ? https://i.servimg.com/u/f55/12/03/49/16/captur16.png

Dans ton template à un endroit tu as ceci :

Code:: <div id="conteneur_categories"><div class="categorie"><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

C'est le cellspacing="1" qui est en fait l'espace entre chaque cellule du tableau Wink

. Met la valeur à 0 et cela sera bon Very Happy

Ah mince. :/ Parce que c'est vraiment gênant... Je viens même d'essayer sur mon téléphone et c'est un bug bien présent et qui s'accroche !
Tu n'as vraiment aucune idée d'où ça peut venir ? Si c'est le cas alors je clôturerai mon topic là. Et je m'habituerai à ce bug. >_<

Ah oui nickel ! Merci bien. :3

Je viens de faire un essai sur un autre de mes forum et je ne rencontre pas le problème non plus ><.

Dans le doute, je te mets exactement ce que j'ai mis comme codes :
JS :

Code:: /**
* Fonction qui se déclenche lorsque tous les éléments de la page ont étés créés
* Comme nous allons effectuer des actions sur les onglets, nous voulons être sûr qu'ils existent
* Sinon ça ne servirait à rien
*/
$('document').ready(function()
{
/**
* Pour ne pas afficher les onglets dans les sous catégories
* Et pour ne pas gêner les utilisateurs qui n'activent pas Javascript,
* Les onglets sont invisibles par défaut.
* On commence donc par les rendre visibles.
*/
$('#conteneur_onglets').css( 'display' , 'block' );

/**
* On indique que l'on change de catégorie lorsque l'on clique sur un onglet
* Si vous souhaitez changer de catégorie lors du survol (ce que je déconseille)
* Il vous suffit de remplacer "click" par "hover"
*/
$('#conteneur_onglets .onglet').click(function()
{
/**
* Fonction à exécuter lors du click, ici il s'agit de changer de catégorie.
* On passe en argument l'index de l'onglet.
* L'index est le numéro de l'onglet en commençant par 0
* Pour l'onglet 1, il s'agit du première onglet, l'index vaut 0
* Pour l'onglet 2, il s'agit du seconde onglet, l'index vaut 1
* ...
* Pour l'onglet 5, il s'agit du cinquième onglet, l'index vaut 4
*/
change_categorie( $('.onglet', '#conteneur_onglets').index( this ) )
});

/**
* On choisit quelle catégorie afficher en premier.
* Par défaut, il s'agit de la première (index 0).
* Si vous souhaitez en afficher une autre, il vous suffit de remplacer le 0
* par l'index de la catégorie désirée.
* Si vous voulez toutes les afficher, supprimez cette ligne.
*/
$('.onglet:eq(0)').click();
});

/**
* Fonction qui se déclenche à chaque fois que l'on souhaite changer de catégorie
*/
function change_categorie( index )
{
/**
* On vérifie que la catégorie demandée existe
*/
if( $('.categorie:eq(' + index + ')').size() != 0 )
{
/**
* Si vous vous en souvenez, dans la partie HTML, on avait ajouté
* Un conteneur autour des catégories et l'on ne savait pas à quoi il servait.
* Ici, nous lui donnons la même hauteur que la catégorie qui sera affichée.
* Je vous explique pourquoi en dessous du code.
*/

/* Ligne commentée : crée un bug
$('#conteneur_categories').css( 'min-height' , $('.categorie:eq(' + index + ')').outerHeight() );

/**
* On masque toutes les catégories
*/
$('.categorie').css( 'display' , 'none' );

/**
* On affiche avec un petit effet la catégorie demandée
*/
$('.categorie:eq(' + index + ')').fadeIn( 500 );

/**
* On enlève la classe "actif" de l'ancien onglet actif
*/
$('.onglet.actif').removeClass('actif');

/**
* On ajoute la classe "actif" à l'onglet de la catégorie affichée
*/
$('.onglet:eq('+ index +')').addClass('actif');
}
/**
* Si la catégorie n'existe pas, on affiche un message
*/
else alert('Vous ne pouvez pas accéder à cette catégorie');
}

Template index_box :

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">

<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>

<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">

<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />

<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<div id="conteneur_onglets">
<div class="onglet">Administration</div>
<div class="onglet">Gestion</div>
<div class="onglet">RPG</div>
<div class="onglet">Flood</div>
</div>
<div id="conteneur_categories"><div class="categorie"><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="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>


<tr>

<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

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


<tr>

<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>

<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">

{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td>
<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>
</tr>


<tr>

<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>


</table><img src="{SPACER}" alt="" height="5" width="1" /></div></div>

Juste une petite question, est ce que le problème apparaissait déjà avant que tu t'aperçoives du bug d'espace ?
Rappel :

Citation :: L'onglet administration est OK, mais quand on passe sur un autre onglet, y'a un giga grand espace qui se créé entre l'onglet et son contenu, comme sur cette capture, par exemple : https://i.servimg.com/u/f55/12/03/49/16/captur15.png

Ouais nan j'ai repris tes codes, et ça change rien... :/ C'est une bonne question. Je pourrais pas l'affirmer mais je crois que oui.

Du coup dans le doute, j'ai repris le premier JS, et je te confirme que oui, le bug y est bien. Donc ça ne provient pas de ta modification...

Je suppose que si cela fonctionne sur 2 de mes forums test avec exactement ces codes là et pas sur le tien, c'est qu'il y a quelque chose dans le tiens qui crée le bug.. O0. Mais alors là, je ne sais pas vraiment pas quoi... :S

Si c'est vraiment un problème, essaye de le mettre sur un autre forum test (éventuellement en créer un autre ?)... Là je comprends pas du tout Sad

Aller t'en fais pas. Wink

j'ai un pote qui va regarder si il trouve quelque chose. :3 dans le pire des cas, oui, j'en recréerai un autre et j'installerai le tout à nouveau. Encore merci pour ton aide, une fois de plus, qui a été précieuse ! :3 bonne continuation.

(J'edite le titre du topic ce soir, là je suis sur la version mobile de FA et je crois qu'il me propose pas cette fonction. )

Si tu arrives à trouver la solution, n'hésite pas à venir le dire sur ce topic en tout cas Smile

Problèmes de catégories en onglets

Problèmes de catégories en onglets

Sujets similaires

Sujets similaires

Partenaires Or