Problème au niveau de mes onglets

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème au niveau de mes onglets

Message par Lunay le Mer 20 Nov 2013 - 0:51

Bonjour/Bonsoir Smile

Alors voila, après maintes recherches et un énorme mal de tête, j'ai fini par réussi à faire en sorte que mes catégories se trouvent dans des onglets. Le problème, c'est que j'aurais aimé que mes onglets apparaissent de façon horizontale, et pas verticale. J'ai du me planter quelque part, dans le template, le javascript ou le css.


Le trucs, c'est que même si ça fonctionne bien, au niveau de la disposition ce n'est pas du tout ce que je souhaite ^^ Il s'agit là d'un menu vertical et je souhaite des onglets horizontaux juste au-dessus de mes forums.

Voici le code de mon template index-box :
Code:
Code supprimé
Ensuite, voici le code de la partie css concernant les onglets :

Code:
/*onglets catégories*/
#cat-onglets {
  padding: 5px;
  margin: 5px;
  text-align: center;
  width: 150px;
  position: absolute;
  display: inline;
  
}
 
.co-item {
  background: #1e1b1a;
  color: #000;
  border: 1px solid  #fdf;
  cursor: pointer;
  margin: 5px;
  padding: 3px;
  border-radius: 10px;
}
 
.co-item:hover{
  background: #1e1b1a;
  border: 1px solid 000;
  color:#fff;
  cursor: pointer;
  margin: 5px;
  padding: 3px;
  border-radius: 10px;
}
 
.co-actif {
  background: #1e1b1a;
  color: #fdf;
  border:1px solid #fff; }
Ainsi que le code javascript que j'ai intégré sur l'index via la page des modules :

Code:
$(function(){
 
  var t;
 
  /* liste des onglets avec les catégories en faisant partie*/
  var onglets=  [
                          ["Le Chicaneur",[0]],
                          ["Partie RPG",[1]],
                          ["Pottermore",[2]],
                          ["Catégorie 4",[3]]];
 
   var getOnglet= function(s) {
      var j;
      for(j=0;j<onglets.length;j++)
        if(JSON.stringify(onglets[j])==s) return onglets[j];
      return !1;
  };
 
 
  var inOnglets= function(d,i) {
      var j;
      for(j=0;j<d[1].length;j++)
        if(d[1][j]==i) return !0;
      return !1;
  };
 
  /* onglet sélectionné par défaut */
  var songlet= onglets[0];
  /* est-ce que l'onglet sélectionné est sauvegardé d'un affichage de l'index à l'autre */
  var save= true;
  /* temps pour slider en ms */
  var timeslide= 500;
 
  /* récupération de l'onglet sauvé d'une autre fois */
  if(save && window.localStorage)
      if(t=localStorage.getItem("onglets"))
        if(t=getOnglet(t))
            songlet= t;
 
  /* entoure les catégories d'un <div class="cat-table" /> */
  $("td.fondcat").closest("table").wrap('<div class="cat-table" />');
 
  /* affichage de l'onglet en cours */
  $(".cat-table").filter(function(index) {
    return !inOnglets(songlet,index);
  }).hide();
 
  /* ajout du div des onglets */
  $(".cat-table:first").before('<div id="cat-onglets"></div>');
 
  /* ajout des onglets dans le div */
  for(t=0;t<onglets.length;t++)
  {
      $("#cat-onglets").append('<div class="co-item'+(onglets[t]==songlet?' co-actif':'')+'">'+onglets[t][0]+'</div>');
  }
 
  /* clic sur un onglet */
  $("#cat-onglets .co-item").click(function(){
      $("#cat-onglets .co-actif").removeClass("co-actif");
      $(this).addClass("co-actif");
      var o= onglets[$("#cat-onglets .co-item").index(this)];
      $(".cat-table").not($(".cat-table").filter(function(index) {
        return inOnglets(o,index);
      }).slideDown(timeslide)).slideUp(timeslide);  
      if(save && window.localStorage) localStorage.setItem("onglets",JSON.stringify(o));
  });
 
});
J'espère vraiment que quelqu'un pourra m'aider et attend avec impatience votre réponse Smile
Merci de m'avoir lue et merci pour vos éventuelles réponses ^^

Lunay'


Dernière édition par Lunay le Jeu 21 Nov 2013 - 21:04, édité 2 fois

Lunay
***

Féminin
Messages : 105
Inscrit(e) le : 16/11/2011

http://pottermore-betatest.harrypotterrpg.fr/
Lunay a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème au niveau de mes onglets

Message par Lunay le Mer 20 Nov 2013 - 17:59

Bonjour, petit up quotidien, j'espère vraiment que vous pourrez m'aider à résoudre mon problème Smile
Merci

Lunay
***

Féminin
Messages : 105
Inscrit(e) le : 16/11/2011

http://pottermore-betatest.harrypotterrpg.fr/
Lunay a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème au niveau de mes onglets

Message par Lunay le Jeu 21 Nov 2013 - 21:04

Je passe le sujet en résolu, j'ai fini par trouver.
Il suffisait de changer le css.
Voici ce que j'ai mis, pour ceux que ça intéresse :

Code:
#cat-onglets {
  margin: 5px auto;
  text-align: center; }
 
.co-item {
  background: #000;
  color: #fdf;
  border: 1px solid  #fdf;
  display: inline;
  cursor: pointer;
  margin: 0 5px;
  padding: 3px;
  border-radius: 10px;
}
 
.co-item:hover{
  background: #fff;
  border: 1px solid #fff;
  color:#000;
  display: inline;
  cursor: pointer;
  margin: 0 5px;
  padding: 3px;
  border-radius: 10px;
}
 
.co-actif {
  background: #fdf;
  color: #000;
  border:1px solid #000; }
Bonne soirée

Lunay
***

Féminin
Messages : 105
Inscrit(e) le : 16/11/2011

http://pottermore-betatest.harrypotterrpg.fr/
Lunay a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum