A propos du tutoriel "3 tableaux à onglets", comment rajouter un onglet ?

[Marine_*]

Bonjour !

Alors voilà hier j'ai installée sur mon forum un tableau à onglet grâce au tutoriel présent sur ce forum "3 tableaux à onglets".
J'ai parfaitement réussie à tout installer, mais, je cherche en vain comment faire pour ajouter un 5eme onglet à ce tableau!

J'avais tentée un truc mais l'onglet se placait sous les 4 principaux, or je le veux sur la même ligne.

Voici le code javascript

Code:

function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }           
}

Le code CSS

Code:

.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #ffffc5 ;
  border: 1px solid #000;
  cursor: pointer;
  margin-bottom: -1px;
  list-style: none;
}
.mon_onglet:hover{
  background: #f1ffe3;
}         
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #ffffc5 ;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  border-left: 2px solid #000;
  border-bottom: 1px solid #ffffc5;
  cursor: pointer;
  margin-bottom: -1px;
  list-style: none;}           
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #ffffc5;
  border: 2px solid #000;
  padding: 10px; 
  line-height: normal;
  font-size: 12px;}
#mes_contenus, #mes_onglets{
  width: 400px;
  margin: auto;}

Le code HTML

Code:

<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Titre</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Titre</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Titre</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Titre</li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">
</div>
    <div id="co_2" class="mon_contenu" style="display: none;">
</div>
    <div id="co_3" class="mon_contenu" style="display: none;">
</div>
    <div id="co_4" class="mon_contenu" style="display: none;">
</div>
</div></div></ul></div>

L'adresse de mon forum : http://amaury-vassili.forumsactifs.com/
Il a été créee sous un phpBB2
J'espère avoir été clair dans mes explications et que vous pourrez me venir en aide
Merci d'avance!

[Invité]

Bonjour,

Si l'onglet se place en dessous des autres, c'est que la largeur du tableau n'est pas suffisante pour qu'il se mette à coté.
Dans la partie CSS modifiez ceci:

Code:

#mes_contenus, #mes_onglets{
  width: 400px;
  margin: auto;}

Remplacez 400px par un nombre de px plus grand ou par 100% .

Cordialement.

[Marine_*]

:O miracle ça marche niquel. Je me suis pas prise la tête j'ai mis un 100%
Merci pour la réponse rapide!!

Donc sujet