Bonjour,

Voici ce que je suis entrain de construire: pour faire ma page d'accueil j'ai créé un menu à 4 onglets verticaux (jusque là tout va bien!) mais pour le contenu de l'un de mes onglets j'y est inséré un menu horizontal pour faire apparaitre chaque profil de mon staff comme sur le croquis ce-dessous:

Spoiler:

Mon problème étant que les 2 CSS, codes et pages HTML ont les mêmes "noms" de codage et donc ça bug entre eux, alors j'ai changer les noms ex: "mes_contenusstaff" au lieu de "mes_contenus" pour éviter que les 2 CSS ne se confondent. Sauf que ce que j'ai modifié n'est pas suffisant et que je suppose que les "co_1" ou "o_1" dans les 2 codes posent le même genre de problème, du coup quand je veux cliquer sur le 2eme onglet de mon menu inséré dans l'onglet de ma page d'accueil, je me retrouve non pas avec le contenu du 2eme onglet inséré mais celui de la page d'accueil.... Ouai c'est un peu compliqué à expliqué sans si perdre dans les menu...

-> http://forumtestcpaf.forumactif.org/ (à cette adresse pour visualiser la bête)

So, en vous postant mes 2 codes, CSS et HTML, pourriez vous m'indiquez les modif à faire pour éviter que les 2 codes et HTML ne bugguent entre eux ! Ou bien, me dire que c'est impossible et si possible alors me proposer une autre solution pour afficher les 9 profils de mon staff dans l'onglet de mon menu !

Merci infiniment d'avance.

CSS Menu Page accueil:

Code:

.mon_onglet{
          float: left;
          padding: 2px;
          margin-right: 4px;
          margin-bottom: -1px;
          color: #3E3933;
          background: #01AAB1;
          border: 3px solid #ffffff;
          -moz-border-radius-topleft: 8px;
          -moz-border-radius-topright: 8px;
          -webkit-border-top-right-radius: 8px;
          -webkit-border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          border-top-left-radius: 8px;
          cursor: pointer;
          width: 23%;
          list-style: none;}
           
        .mon_onglet_selected{
          float: left;
          padding: 2px;
          margin-right: 4px;
          margin-bottom: -1px;
          color: #3E3933;
          background: #EFCB37;
          border-top: 3px solid #ffffff;
          border-right: 3px solid #ffffff;
          border-left: 3px solid #ffffff;
          border-bottom: none !important;
          -moz-border-radius-topleft: 8px;
          -moz-border-radius-topright: 8px;
          -webkit-border-top-right-radius: 8px;
          -webkit-border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          border-top-left-radius: 8px;
          cursor: pointer;
          width: 23%;
          list-style: none;}
       
        .mon_onglet:hover{
          background: #E1DBCF;}
               
        .clear{
          clear: both;}
       
        .mon_contenu{
          color: #3E3933;
          background: #F3EDDF;
          border: 3px solid #ffffff;
          padding: 10px;
          list-style: none;}
   
   .text_content1{
     width: 100%;
     background: #F3EDDF;
     font-size: 12px;      
     color: #3E3933;
      padding: 3px;}
    

   .text_content2{
     width: 200px;
     font-size: 13px;      
     color: #3E3933;
      padding: 3px;}

   .text_bienvenue{
     background: #F3EDDF;
     font-size: 12px;     
      color: #3E3933;
      padding: 3px;}
    
   .lien{
     font-size: 12px;
     background-color: #F0EDE4;}

   .lien:hover{
     font-size: 12px;    
     background-color: #E3DBC6;}
   
   .titreprofil{
     font-size: 12px;      
     color: #EFCB37;}

        #mes_contenus, #mes_onglets{
          width: 100%;}

HTML Menu Page Accueil:

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';
                    }
                }
            }       
        }

Code menu Page accueil:

Code:

<script src="http://forumtestcpaf.forumactif.org/h1-page-accueil"></script>
        <div id="mes_onglets">
            <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><b>Bienvenue sur le CPAF</b></li>
                <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><b>Navigation</b></li>
                <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><b>Nos Actualités</b></li>
                <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);"><b>Le Staff</b></li>
                  </ul>
                <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 style="background-color: #E3DBC6; width: 100%; height: 100%;"></div>
</div></div></div>

CSS Menu à onglet inséré dans le Menu:

Code:

 .mon_ongletstaff{
          display: block;
          padding: 5px;
          margin: 4px;
          color: #000;
          background: #ffffff;
          border: 1px solid #ff0000;
        }
        .mon_ongletstaff:hover{
          background: #b8efa1;
        }     
        .mon_ongletstaff_selected{
          display: block;
          padding: 5px;
          margin: 4px;
          color: #000;
          background: #ffffff;
          border: 1px solid #ff0000;
        }       
        .clearstaff{
          clear: both;
        }
        .mon_contenustaff{
          color: #000;
          background: #ffffff;
          border: 1px solid #ff0000;
          padding: 10px;
          margin: 10 px;
     width: 400px;
          height: 240px;}

        #mes_contenusstaff, #mes_ongletsstaff{
          height: 100%;
          width:100%;}

HTML Menu à onglet inséré dans le Menu:

Code:

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

Code Menu à onglet inséré dans le Menu:

Code:

 <table><tr><td>
        <div id="mes_ongletsstaff">
            <span id="o_1" class="mon_ongletstaff_selected" onclick="changeOnglet(this);">BiBiche</span>
                <span id="o_2" class="mon_ongletstaff" onclick="changeOnglet(this);">Ayana</span>
                <span id="o_3" class="mon_ongletstaff" onclick="changeOnglet(this);">Rauz</span>
      <span id="o_4" class="mon_ongletstaff" onclick="changeOnglet(this);">Chaosbang</span>
      <span id="o_5" class="mon_ongletstaff" onclick="changeOnglet(this);">Carbo Queen</span>
      <span id="o_6" class="mon_ongletstaff" onclick="changeOnglet(this);">Kiwxi</span>
      <span id="o_7" class="mon_ongletstaff" onclick="changeOnglet(this);">Meloe</span>
      <span id="o_8" class="mon_ongletstaff" onclick="changeOnglet(this);">NatouCarter</span>
                <span id="o_9" class="mon_ongletstaff" onclick="changeOnglet(this);">SgGirl</span></div></td>
        <td>
                <div class="clearstaff"><div id="mes_contenusstaff">
            <div id="co_1" class="mon_contenustaff">Mon contenu 1</div>
            <div id="co_2" class="mon_contenustaff" style="display: none;">Mon contenu 2</div>
            <div id="co_3" class="mon_contenustaff" style="display: none;">Mon contenu 3</div>
            <div id="co_4" class="mon_contenustaff" style="display: none;">Mon contenu 4</div>
       <div id="co_5" class="mon_contenustaff" style="display: none;">Mon contenu 5</div>
       <div id="co_6" class="mon_contenustaff" style="display: none;">Mon contenu 6</div>
       <div id="co_7" class="mon_contenustaff" style="display: none;">Mon contenu 7</div>
       <div id="co_8" class="mon_contenustaff" style="display: none;">Mon contenu 8</div>
       <div id="co_9" class="mon_contenustaff" style="display: none;">Mon contenu 9</div>
        </div></div></td></tr></table>

Bonjour,

Bien que tu sois pressé, il aurait été un peu plus aimable de ta part d'éviter de poster ton message sur plusieurs forums en même temps, cela éviterait à un codeur sur deux de se décarcasser pour rien ¬_¬

En ce qui concerne ton problème...

• En premier lieu, les deux scripts (les deux bouts de codes que tu as intitulés 'HTML' bien qu'ils ne contiennent pas une ligne de HTML) peuvent être mis à la suite l'un de l'autre dans le même fichier dans ton forum, section des codes javascript, affiché sur l'index, et donc virer la première ligne de ton code (celle qui appelle le script)
  
• En second lieu, il est fondamentalement inutile de dupliquer les CSS s'ils sont identiques. Il te suffit de changer dans chaque script la partie mes_onglets, puis d'utiliser l'héritage en CSS pour personnaliser le reste de la mise en page.
  
• Par voie de conséquence, il est donc inutile de dupliquer le contenu de la classe .mon_onglet dans la classe .mon_onglet_selected ; la deuxième n'a besoin que de "ce qui change" par rapport à la première.
  
• La classe .clear n'a ABSOLUMENT PAS besoin d'être dupliquée (pas de "clearstaff"), de plus elle est présente par défaut sur ForumActif de ce que j'en sais O_o

Ce qui fait que sachant que tu as cette structure (note que l'identifiant "mes_contenus" est devenu une classe, l'utilisation d'un id ici est inutile) pour le "premier set" d'onglets :

Code:

<div id="mes_onglets">
   (les onglets ici, avec les identifiants o_1 à o_x et la classe mon_onglet)
    <div class="mes_contenus">
       les différents conteneurs ici, de classe "mon_conteneur" et d'identifiants co_1 à co_x
    </div>
</div>

L'autre peut correspondre à ça :

Code:

<div id="mes_onglets_staff">
   (les onglets ici, avec les identifiants s_1 à s_x et la classe mon_onglet)
    <div class="mes_contenus">
       les différents conteneurs ici, de classe "mon_conteneur" et d'identifiants cs_1 à cs_x
    </div>
</div>

Pour la personnalisation CSS :

Code:

/* Personnalisation des éléments du bloc #mes_onglets */
#mes_onglets .mon_onglet {
 /* Personnalisation affichage d'un onglet */
}

#mes_onglets .mon_onglet_selected {
 /* Personnalisation affichage d'un onglet sélectionné */
}

/* ETC... */

/* Personnalisation des éléments du bloc #mes_onglets_staff */
#mes_onglets_staff .mon_onglet {
 /* Personnalisation affichage d'un onglet */
}

#mes_onglets_staff .mon_onglet_selected {
 /* Personnalisation affichage d'un onglet sélectionné */
}

/* ETC... */

Il est bien sûr possible de se passer de la différenciation #mes_onglets .blabla et #mes_onglets_staff .blabla si tu veux que les éléments aient la même apparence dans les deux cas.

Merci pour ta réponse, et désolée de ne pas avoir été fairplay mais j'étais dans l'idée que plusieurs réponses souvent différentes valent mieux qu'une ! Milles excuses c'est noté pour les prochaines fois (mais alors ça m'oblige à faire un choix d'un forum parmi ceux que je fréquente pour poster mes demandes ? )!

Bref, en tout cas merci pour la réponse. Par contre, j'ai eu des difficultés à appliquer tes recommandations de correction, je pense que mon niveau en CSS me limite. J'ai donc essayé de refaire les codes mais j'ai peur d'avoir fait des erreurs, serait-il possible que l'on me corrige ?!

CODE MENU ACCUEIL

Code:

<div id="mes_onglets">
  <ul>
      <li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><b>Bienvenue sur le CPAF</b></li>
                <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><b>Navigation</b></li>
                <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><b>Nos Actualités</b></li>
                <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);"><b>Le Staff</b></li>
<div class="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 style="background-color: #E3DBC6; width: 100%; height: 100%;"></div>
    </div>
</div>

CODE MENU STAFF

Code:

<div id="mes_onglets_staff">
  <span id="s_1" class="mon_ongletstaff_selected" onclick="changeOnglet(this);"><b>BiBiche</b></span>
                <span id="s_2" class="mon_ongletstaff" onclick="changeOnglet(this);"><b>Ayana</b></span>
                <span id="s_3" class="mon_ongletstaff" onclick="changeOnglet(this);"><b>Rauz</b></span>
      <span id="s_4" class="mon_ongletstaff" onclick="changeOnglet(this);"><b>Chaosbang</b></span>
      <span id="s_5" class="mon_ongletstaff" onclick="changeOnglet(this);"><b>Carbo Queen</b></span>
      <span id="s_6" class="mon_ongletstaff" onclick="changeOnglet(this);"><b>Kiwxi</b></span>
      <span id="s_7" class="mon_ongletstaff" onclick="changeOnglet(this);"><b>Meloe</b></span>
      <span id="s_8" class="mon_ongletstaff" onclick="changeOnglet(this);"><b>NatouCarter</b></span>
                <span id="s_9" class="mon_ongletstaff" onclick="changeOnglet(this);"><b>SgGirl</b></span>
    <div class="mes_contenus">
             <div id="cs_1" class="mon_contenustaff">Mon contenu 1</div>
            <div id="cs_2" class="mon_contenustaff" style="display: none;">Mon contenu 2</div>
            <div id="cs_3" class="mon_contenustaff" style="display: none;">Mon contenu 3</div>
            <div id="cs_4" class="mon_contenustaff" style="display: none;">Mon contenu 4</div>
       <div id="cs_5" class="mon_contenustaff" style="display: none;">Mon contenu 5</div>
       <div id="cs_6" class="mon_contenustaff" style="display: none;">Mon contenu 6</div>
       <div id="cs_7" class="mon_contenustaff" style="display: none;">Mon contenu 7</div>
       <div id="cs_8" class="mon_contenustaff" style="display: none;">Mon contenu 8</div>
       <div id="cs_9" class="mon_contenustaff" style="display: none;">Mon contenu 9</div>
  </div>
</div>

Ensuite, pour le CSS, je suis larguée:

Citation :

- En second lieu, il est fondamentalement inutile de dupliquer les CSS s'ils sont identiques. Il te suffit de changer dans chaque script la partie mes_onglets, puis d'utiliser l'héritage en CSS pour personnaliser le reste de la mise en page.

Ils ne sont pas identiques mes CSS, mes 2 menus n'ont pas du tout le même aspect visuel. Et ta 2ème phrase je ne l'ai pas comprise! En fait je crois que j'ai rien compris de ce point !

Citation :

- Par voie de conséquence, il est donc inutile de dupliquer le contenu de la classe mon_onglet dans la classe .mon_onglet_selected; la deuxième n'a besoin que de "ce qui change" par rapport à la première.

Donc là ça veut dire que dans .mon_onglet_selected je ne fais apparaitre que ce qui est différent de . mon_onglet exemple avec mon CSS menu accueil (en gros j'ai enlever les 5 premières lignes de .mon_onglet_selected qui étaient identiques à .mon_onglet) :

Code:

.mon_onglet{
          float: left;
          padding: 2px;
          margin-right: 4px;
          margin-bottom: -1px;
          color: #3E3933;
          background: #01AAB1;
          border: 3px solid #ffffff;
          -moz-border-radius-topleft: 8px;
          -moz-border-radius-topright: 8px;
          -webkit-border-top-right-radius: 8px;
          -webkit-border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          border-top-left-radius: 8px;
          cursor: pointer;
          width: 23%;
          list-style: none;}
           
        .mon_onglet_selected{
          background: #EFCB37;
          border-top: 3px solid #ffffff;
          border-right: 3px solid #ffffff;
          border-left: 3px solid #ffffff;
          border-bottom: none !important;

.mon_onglet:hover{
          background: #E1DBCF;}
               
        .mon_contenu{
          color: #3E3933;
          background: #F3EDDF;
          border: 3px solid #ffffff;
          padding: 10px;
          list-style: none;}
   
   #mes_contenus, #mes_onglets{
          width: 100%;}

Merci d'avance, encore pardon

Pour le dernier point, un simple border-bottom:none; suffit, les autres bordures ne changent pas à ce qu'il semble ? Et accessoirement, tu as oublié le crochet } fermant.

Pour en revenir à tes codes :
• Une liste commence par <ul> et finit par </ul>, et les éléments de la liste se trouvent entre les balises <li>..</li>, tu peux vite constater que ton code HTML comporte une erreur
• Je ne sais pas ce que tu as changé, mais voir le fichier javascript que tu as créé serait utile pour voir si tu as fait des erreurs
• La phrase que tu n'as pas comprise était de toute façon illustrée par le squelette de code que je t'ai donné... Et que tu n'as suivi qu'à moitié '_'

Pour la question d'héritage/hiérarchie dans les CSS (j'avais fait un lapsus mais l'idée est la même) je voulais dire que, sachant qu'un des blocs a un identifiant #mes_onglets et que l'autre a un identifiant #mes_onglets_staff (un identifiant étant défini en HTML par l'attribut id, et en CSS par le symbole # précédant son nom), tu peux suivre l'exemple que j'ai donné pour le CSS pour simplifier.

Par exemple, le sélecteur CSS #mes_onglets .mon_onglet ne cible que l'apparence des éléments de classe .mon_onglet à l'intérieur d'un bloc d'identifiant #mes_onglets.

Ce qu'il fait qu'il faut que tu revoies ton code de façon à suivre mon exemple : pas de classe .mon_contenustaff et .mon_ongletstaff parce que les deux classes .mon_onglet et .mon_contenu suffisent dans notre cas.

Enfin, pour la modif que j'ai suggérée dans le code Javascript, j'ai complètement oublié un truc : tu dois renommer la deuxième fonction (tu ne peux pas avoir deux fonctions changeOnglet() !). Par exemple renomme la en changeOngletStaff() et dans le code pour le staff tu devras changer ça : onclick="changeOnglet(this);" (je te laisse deviner comment, c'est assez évident)

Le script récupère l'identifiant de l'onglet cliqué (par exemple s_1) et affiche le bloc possédant le même identifiant, précédé d'un c (par exemple cs_1).

Il y a moyen de faire plus simple que ton code (on a un bien meilleur script dans les codes à copier&coller de CSSActif), mais vu que ça exigerait de refaire le reste du code pour l'adapter, je te laisse décider ça par toi même.

Citation :

[...] mais j'étais dans l'idée que plusieurs réponses souvent différentes valent mieux qu'une [...] mais alors ça m'oblige à faire un choix d'un forum parmi ceux que je fréquente pour poster mes demandes ?

Imagine que quelqu'un te demande un truc, que tu bosses dur pour l'aider, et qu'au moment où tu lui donnes le résultat, il te répond "ah non c'est bon, quelqu'un d'autre m'a donné la solution". Je sais pas pour toi, mais personnellement j'apprécie très moyennement. Et au vu de la "complexité" (tout est relatif) de ton code, ça ne relève pas du simple conseil mais bien d'un suivi personnalisé. Quitte à être bénévoles, on aimerait bien ne pas travailler pour des prunes.

Quant à choisir, à toi de voir en fonction de l'orientation du forum : La politique de CSSActif est de pousser les membres à apprendre comment marche leur code (et donc, personne ne fera le code à ta place), alors que sur Never Utopia j'imagine que simplement donner la solution suffit pour l'essentiel.

Je me doute qu'il y a plus facile, mais avec mon niveau et le temps que j'ai à y consacrer, je ne peux me permettre que de personnaliser des codes et des CSS que je peux trouver! Créer un CSS serait trop fastidieux pour moi à l'heure actuelle !

Je te remercie pour ton aide j'ai réussi à résoudre mon problème et simplifier mes CSS, appris des choses en même temps ! ça marche nickel sur mon forum, plus rien ne bug et tout marche comme il se doit !

Merci infiniment Christa !

Hello,

Est-ce que cela signifie que le problème est résolu ?
Merci d'ajouter le tag [Résolu] dans le titre du sujet si c'est le cas.

Oui c'est résolu, je taggue le titre tout de suite.

Merci bien, j'archive.