Problème au niveau de mes onglets

[Lunay]

Bonjour/Bonsoir

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
Merci de m'avoir lue et merci pour vos éventuelles réponses ^^

Lunay'

[Lunay]

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

[Lunay]

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