Problème d'onglet et leur affichage.

[Hollfeather]

Bonjour à tous.
Voici mon problème, j'ai installé des onglets sur mon forum et je rencontre quelques difficultés.

Je vous illustre avec des images parce que par écris, ça sera trop compliqué. ^^
Voici la catégorie n°2 de mon forum (la catégorie 1 marche)

Spoiler:

Comme vous pouvez le voir le "lien" tout en bas est collé à la description, hors, il devrait se trouver dans l'autre onglet.

Spoiler:

Quand on clique sur lien, le "lien" apparrait au bon endroit

Spoiler:

et la catégorie "description" devient normale sans le "lien"

Mais je voudrais qu'on ne voit pas le "lien"... que faire ?
sachant que sur ma première catégorie, cela marche très bien.

j'ai évidemment changé le nom des contenus pour qu'il ne s'affiche pas dans les autres catégories.

Bref, si quelqu'un peut m'aider ce serait très gentil.

[demeter1]

J'anticipe les prochaines questions
1 apparemment, le soucis rencontré n'est pas sur le forum que vous avez en lien dans votre profil. pourrait on donc avoir le lien du forum concerné ?
2 la version du forum
3 Est ce un js que vous avez utilisé pour créer les onglets ou un modification via les templates ?? Dans tous les cas, merci de fournir les éléments (js/template et css associé)

[Hollfeather]

Hey

Merci de ta réponse rapide.
1) En sois "lien" pourrait être un texte ou autre. Je n'ai juste pas mis la balise entre <a > </a> c'était en attendant d'avoir les liens ^^

2) la version du forum est : phpbb2

3)

Code:

 /**
 * Système d'onglets automatisé
 * Version : 1.0
 * Par Emmanuel "Manumanu" B.
 **/

$(document).ready(function() {
  var ongletActuel = null;
  ongletActuel = $('.tabs-onglets a:first').attr('href');

  // Ajout de classe au premier onglet
  $('.tabs-onglets').find('a[href="'+ ongletActuel +'"]').addClass('selected');

  // Afficher l'élément par défaut correspondant à celui de l'onglet par défaut
  $(ongletActuel).show().siblings().hide();

  // Gestion de l'événement clic
  $('.tabs-onglets a').click(function(e) {
      idOnglet = $(this).attr('href');

      // Si l'élément est déjà sélectionné, ne rien faire
      if (idOnglet == ongletActuel)
        e.preventDefault();
      else {
        // Afficher le contenu demandé et masquer le contenu restant
        $(idOnglet).fadeIn().siblings().hide();

        // Retirer la classe des autres onglets et l'ajouter sur l'élément sélectionné
        $(this).addClass('selected').siblings().removeClass('selected');
        ongletActuel = idOnglet;
      }

      // Empêche le déclenchement du lien
      e.preventDefault();
  });
});

il est activé sur toutes les pages.

Code:

<center>
   
   <div style="background-image: linear-gradient(#fff4e7, #fce3c7); border: 1px solid #f8d8b3; border-bottom: 4px solid #f9d9b4; width: 510px; padding: 5px; height: 70px; text-align: justify; box-shadow: 0px 0px 2px #f8d8b3;">
      
      <div style="background-color: white; height: 60px; overflow: auto; padding: 5px; border: 1px solid #f9e6d0; font-size: 10px; line-height: 11px;">
         
         <div id="contenu">
            
            <div id="caté4">
                <aa>PANNEAU D'AFFICHAGE :</aa> C'est peut-être la partie la moins rigolote du forum, ça a un petit côté bureaucratique qui peut sembler barbant au premier abord mais qui t'assurera de ne rien louper ! D'ailleurs, si une question se fait sentir, tu pourras nous exposer tes doutes et idées ici. Tu pourras aussi y faire toutes les demandes concernant ton compte mais aussi nous informer de ton départ ou d'une absence.
            </div>
            
            <div id="caté5">
                lien
            </div>
            
         </div>
         
      </div>
      
   </div>
   
</center>
 
<center>
   
   <div class="tabs-onglets" style="margin-right: -200px;">
      
      <center>
         
         <table>
            
            <tbody>
               <tr>
                  
                  <td>
                     
                     <div style="background-color: #f8d8b3; font-size: 11px; font-family: 'Playfair Display', serif; color: #c79863; height: 12px; text-align: center; padding: 5px; padding-top: 2px; padding-bottom: 8px; width: 70px; border-radius: 0px 0px 20px 20px; margin-top: -3px; margin-left: 20px; box-shadow: 0px 0px 2px #f8d8b3;">
                          <a href="#caté4"><span class="ong1">description</span> </a>
                     </div>
                     
                  </td>
                  
                  <td>
                     
                     <div style="background-color: #f8d8b3; font-size: 11px; font-family: 'Playfair Display', serif; color: #c79863; height: 12px; text-align: center; padding: 5px; padding-top: 2px; padding-bottom: 8px; width: 70px; border-radius: 0px 0px 20px 20px; margin-top: -3px; box-shadow: 0px 0px 2px #f8d8b3;">
                         <a href="#caté5"><span class="ong1">les liens</span></a>
                     </div>
                     
                  </td>
                  
               </tr>
               
            </tbody>
         </table>
         
      </center>
      
   </div>
   
</center>

voici un code avec les onglets.

Code:

.ong1{color: white; text-shadow: 0px 0px 2px;}
.ong2{background-color: #f8d8b3; font-size: 11px; font-family: 'Playfair Display', serif; color: #c79863; height: 12px; text-align: center; padding: 5px; margin-right: -15px; border: 1px solid #eac9a2;}

un css qui aide.

merci encore.

[demeter1]

Manque le point 1 : le lien du forum.

[Hollfeather]

Désolée, je ne vois pas en quoi le lien du forum a affaire là dedans. En soit, ça pourrait être sur n'importe quel forum non ?
Le forum est en maintenance..

http://aroundthecorner.frbb.net/
Dis-moi quand tu as vu que je le remette en maintenance.
Merci

[demeter1]

C'est tout bonnement pour pouvoir analyser la source du problème en passant par les outils d'analyse d'Opera.

J'ai trouvé ceci

Code:

<div style="background-image: linear-gradient(#fff4e7, #fce3c7); border: 1px solid #f8d8b3; border-bottom: 4px solid #f9d9b4; width: 510px; padding: 5px; height: 70px; text-align: justify; box-shadow: 0px 0px 2px #f8d8b3;">
<div style="background-color: white; height: 60px; overflow: auto; padding: 5px; border: 1px solid #f9e6d0; font-size: 10px; line-height: 11px;">
<div id="contenu">
<div id="caté4">
<aa>PANNEAU D'AFFICHAGE :</aa>
 C'est peut-être la partie la moins rigolote du forum, ça a un petit côté bureaucratique qui peut sembler barbant au premier abord mais qui t'assurera de ne rien louper ! D'ailleurs, si une question se fait sentir, tu pourras nous exposer tes doutes et idées ici. Tu pourras aussi y faire toutes les demandes concernant ton compte mais aussi nous informer de ton départ ou d'une absence.
</div>
<div id="caté5"> lien </div>
</div>
</div>
</div>

Votre image de fond fait 70 px et votre texte fait 60 px. Vu que la div image est d'une taille supérieure à la div texte et que vous mettez toutes les fermeture en fin de code , la description récupère automatiquement le texte du lien dés que le contenu des écritures et d'une taille inférieure à 60px.

[Hollfeather]

Merci.

Que dois-je donc faire ? =/
Il n'y a pas de chose à mettre dans le java ?

Car sur la première catégorie, les onglets fonctionnent.

EDIT A la fin du tuto que j'ai suivi il est écrit
http://www.css-actif.com/t13863-systeme-d-onglets-simple-et-personnalisable


"Peu de choses à dire.
L'onglet activé reçoit la classe .selected. Pour le reste, c'est à vous de faire ! Wink

Faites-en bon usage !"

serait-ce ça la solution ? comment l'utiliser ?

[demeter1]

Personnellement, je modifierai légèrement le html . Pas de grande modifications , j'ai juste mis la même hauteur aux deux containers et inversé le padding sur le fond blanc histoire de récupérer l'encadrement comme à l'initial.
Vu que la hauteur est identique d'un onglet à l'autre, il n'y a plus ce jeu de 10 px qui laisse apparaitre le lien de l'onglet suivant.

Code:

<center>
   
   <div style="background-image: linear-gradient(#fff4e7, #fce3c7); border: 1px solid #f8d8b3; border-bottom: 4px solid #f9d9b4; width: 510px; padding: 5px; height: 70px; text-align: justify; box-shadow: 0px 0px 2px #f8d8b3;">
      
      <div style="background-color: white; height: 70px; overflow: auto; padding: -5px; border: 1px solid #f9e6d0; font-size: 10px; line-height: 11px;">
         
         <div id="contenu">
            
            <div id="caté4">
                <aa>PANNEAU D'AFFICHAGE :</aa> C'est peut-être la partie la moins rigolote du forum, ça a un petit côté bureaucratique qui peut sembler barbant au premier abord mais qui t'assurera de ne rien louper ! D'ailleurs, si une question se fait sentir, tu pourras nous exposer tes doutes et idées ici. Tu pourras aussi y faire toutes les demandes concernant ton compte mais aussi nous informer de ton départ ou d'une absence.
            </div>
            
            <div id="caté5">
                lien
            </div>
            
         </div>
         
      </div>
      
   </div>
   
</center>
 
<center>
   
   <div style="margin-right: -200px;" class="tabs-onglets">
      
      <center>
         
         <table>
            
            <tbody>
               <tr>
                  
                  <td>
                     
                     <div style="background-color: #f8d8b3; font-size: 11px; font-family: 'Playfair Display', serif; color: #c79863; height: 12px; text-align: center; padding: 5px; padding-top: 2px; padding-bottom: 8px; width: 70px; border-radius: 0px 0px 20px 20px; margin-top: -3px; margin-left: 20px; box-shadow: 0px 0px 2px #f8d8b3;">
                         <a href="#caté4"><span class="ong1">description</span> </a>
                     </div>
                     
                  </td>
                  
                  <td>
                     
                     <div style="background-color: #f8d8b3; font-size: 11px; font-family: 'Playfair Display', serif; color: #c79863; height: 12px; text-align: center; padding: 5px; padding-top: 2px; padding-bottom: 8px; width: 70px; border-radius: 0px 0px 20px 20px; margin-top: -3px; box-shadow: 0px 0px 2px #f8d8b3;">
                         <a href="#caté5"><span class="ong1">les liens</span></a>
                     </div>
                     
                  </td>
                  
               </tr>
               
            </tbody>
         </table>
         
      </center>
      
   </div>
   
</center>

Voir sur ce forum pour le résultat : http://crevettes-passion.forumgratuit.org/

[Hollfeather]

Merci beaucoup beaucoup de ton aide demeter1
C'est très très gentil.