Tableau à onglets : apparence étrange

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

Résolu Tableau à onglets : apparence étrange

Message par Müfiin le Dim 8 Jan 2012 - 13:00

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.


Dernière édition par Müfiin le Dim 8 Jan 2012 - 15:32, édité 1 fois

Müfiin
Nouveau membre

Messages : 24
Inscrit(e) le : 17/12/2008

http://dark-horse.forumactif.com
Müfiin a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets : apparence étrange

Message par _backdraft_ le Dim 8 Jan 2012 - 14:34

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

_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets : apparence étrange

Message par Invité le Dim 8 Jan 2012 - 14:45

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 Wink.

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets : apparence étrange

Message par Müfiin le Dim 8 Jan 2012 - 14:52

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 Sad

Müfiin
Nouveau membre

Messages : 24
Inscrit(e) le : 17/12/2008

http://dark-horse.forumactif.com
Müfiin a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets : apparence étrange

Message par Invité le Dim 8 Jan 2012 - 14:57

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.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets : apparence étrange

Message par Müfiin le Dim 8 Jan 2012 - 15:32

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

Müfiin
Nouveau membre

Messages : 24
Inscrit(e) le : 17/12/2008

http://dark-horse.forumactif.com
Müfiin 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