Tableau à onglets : apparence étrange

[Müfiin]

Bonjour à toutes et à tous,
Je cherche à faire un tableau à onglet comme on peut le voir dans ce tutoriel (le premier proposé)
Mais lorsque j'entre le code dans le message d'accueil, voici ce que j'obtiens :

Aurais-je oublié de cocher une case ou s'agit-il d'autre chose ?
Merci d'avance.

[_backdraft_]

Bonjour,

celà doit venir de votre code.
Je pense qu'il nous faudra le codes pour résoudre.
Quel est la version de votre forum et lequel des trois tableaux avez vous essayé de faire ?

Cordialement - Backdraft

[Invité]

Bonjour,

Le code du message a cette apparence lorsque le code CSS est absent ou non pris en compte, vérifiez que votre feuille CSS contient bien tous les éléments nécessaires .

Cordialement.

[Müfiin]

J'ai utilisé ce code que j'ai inséré dans le message d'accueil :

Code:

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

Feuille CSS ? Je ne comprends pas

[Invité]

Le tableau fonctionne à condition d'utiliser 3 codes à 3 endroits différents dans votre panneau d'administration:

• Le code javascript, PA > Modules > Gestion des codes Javascript:
Ne pas oublier d'activer la gestion des Javascript (cochez oui et enregistrez).

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 du message d'accueil, PA > Affichage > Généralités:

Code:

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

• Le code CSS,PA > Affichage > Couleurs > Feuille de style:

Code:


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

Cordialement.

[Müfiin]

Merci beaucoup, je n'avais pas saisi qu'il fallait les 3 =)
Problème résolu.