Help sur un menu à onglets

Bonjour à tous,

je cherche depuis un moment sur le web, mais là je commence à sécher. Mes neurones commencent à chauffer.
Cela fait une dizaine d´années que je n´ai pas cotoyé HTML/CSS et j´ai beau lire des tas de posts à ce sujet, je bloque.
J´ai un petit menu qui était à la base un menu à onglets.
3 onglets, avec en dessous le contenu de chaque onglet qui s´affiche lors du click.
Le contenu actif quand la page s´ouvre est celui du premier onglet. "histoire"

Depuis ce matin, (je ne sais pas ce que j´ai touché dans le code, je me sers d´un éditeur de contenu) les onglets n´apparaissent plus, il y a simplement les trois titres à la suite l´un de l´autre, et les liens vers le texte ne sont plus actifs. Niveau design, ça donne exactement ça: (avec le paragraphe `nous connaître´ en plus gros, et les 3 liens en surbrillance lors du survol mais pas liés.

Nous connaître
Histoire
Valeurs
Équipe
De la première machine 1 couleur à la Mitsubishi la plus moderne, la qualité a depuis toujours été l'un de nos principaux objectifs.
L'attention et les soins personnalisés apportés à notre travail nous ont permis d'obtenir plusieurs reconnaissances publiques.

Comment puis-je remettre sous forme d´onglets, et que me manque t´il dans le code pour restaurer les liens? Probablement un truc tout bête, mais à force de lire des codes j´y vois flou.

Je vous remercie d´avance de votre réponse!

Code actuel :

<div id="nosotros"> <h3>Nous connaître</h3>

<ul>
<li><a href="#histoire">Histoire</a></li>
<li><a href="#valeurs">Valeurs</a></li>
<li><a href="#equipe">Équipe</a></li>
</ul>

<div class="tab-content tab-demo" id="myTabContent">
<div class="active fade in tab-pane" id="histoire">
<p>De la première machine 1 couleur à la Mitsubishi la plus moderne, la qualité a depuis toujours été l&#39;un de nos principaux objectifs.<br />
L&#39;attention et les soins personnalisés apportés à notre travail nous ont permis d&#39;obtenir plusieurs reconnaissances publiques.</p>
</div>

<div class="fade tab-pane" id="valeurs">
<p>Les méthodes d&#39;impression ont évolué, ainsi que les processus de production qui les accompagnent. <br />
Nous vous garantissons nos meilleurs savoir-faire et méthodes de fabrication.</p>
</div>

<div class="fade tab-pane" id="equipe">
<p>Les membres de notre équipe sont hautement qualifiés et expérimentés.<br />
Ils mettent en commun leurs efforts et leur passion du métier,<br />
.</p>
</div>
</div>

Bonjour,
n'ayant pas tout le code, on ne peux spéculer, mais déjà, dans ce que l'on voit, il y a cinq div ouvertes et que quatre fermées. Régler ça et donner plus de code, si possible dans les balises disponibles en bas de page. Ce sera plus lisible. Et donner le css.

Bonjour, merci pour vos réponses!

Je n´ai qu´un accès limité au code car c´est le site de mon entreprise et j´y accède avec un éditeur de contenu. Je n´ai pas accès aux feuilles CSS...
L´éditeur de contenu est merdique, et le service client aussi, c´est pour cela que je cherche de l´aide ailleurs..
J´ai juste changé la tipo dans l´éditeur du module, et lorsque j´ai actualisé la page, les onglets avaient disparu et les liens ne fonctionnaient plus...
Du coup je doute qu´il y ait eu une quelconque modification dans la feuille de style... Le seul code auquel je puisse accéder lorsque j´édite un module est le code du module en question.

Okay pour la balise, je viens de la fermer.

Concernant les liens entre `histoire´ `valeurs´ et `équipe´, et les textes correspondants, que manque t´il pour que le texte correspondant à la balise du lien apparaissent lors de la sélection?

Bonjour,

Il ne manque rien car ces "liens" marchent me semble-t-il. Mais pour voir quelque chose, il faudrait que le contenu de chaque bloc (ceux se trouvant dans <div class="active fade in tab-pane" id="histoire">, <div class="fade tab-pane" id="valeurs"> et <div class="fade tab-pane" id="equipe">) soit sensiblement plus important. Car en l'état, le navigateur peut tout afficher, et par conséquent il n'a pas besoin de bouger quoi que ce soit quand on clique sur un des "liens".

Amicalement,
Modifié par parsimonhi (15 Mar 2023 - 12:28)

Okay je vois.
C´est sûr ce n´est pas très parlant avec juste la portion de code que j´ai publié. Cette partie se trouve dans des modules de taille réduite, où un seul des trois textes s´affiche. Impossible de changer et de passer à un autre texte.
.
Je te mets le lien de la page web.
Si à un moment donné tu as une petite minute pour jeter un coup d´oeil...

http://www.graficascastuera.com/fr-fr/

Le problème est dans la partie `Nous connaître´. (la div class `nosotros´ dans l´ossature du site.

À l´origine cette partie était un menu à onglet identique au menu principal du site.

En tout cas je te remercie pour le temps que tu accordes à mon problème!

Vu que depuis l´éditeur je n´ai accès qu´au code html du module et non au CSS, je suppose qu´il faut que je retrouve la classe dans le CSS pour identifier le bloc non?
Je suis en train de recopier dans le module qui déconne l´ossature du menu principal en remplaçant les liens.
Et ainsi j´aurais à priori la même mise en page qu´à l´origine..

M´enfin je suis pas sûre à 100% de ma manip mais bon...

Bonjour,

Alors déjà, il y a des majuscules à la 1re lettre des id, mais des minuscules aux href des liens.

Ensuite, dans le css, les blocks autre que celui ayant pour id Historia sont en display:none.

Et enfin, la technique que tu essaies d'utiliser ici n'a aucune chance de fonctionner. Quand tu cliques sur un des 3 liens, ça ne va pas changer ce qu'il y a dans l'encart en dessous par magie. Il faut probablement un peu de javascript ici pour réaliser ça ou modifier le css, mais tu n'y a pas accès.

Il y a déjà du code javascript dans la page mais il est "compacté" et donc difficile à lire. Il faudrait y passer pas mal de temps pour voir ce qu'il fait.

Pareil pour le css : compacté et difficile à lire.

Je ne vois pas comment ça pouvait fonctionner avant. Tu as peut-être modifié des id ?

Amicalement,

Bonjour,

Mon conseil : tu recherches une sauvegarde s'il y en a une et tu regardes ce qu'il y avait. Parce que là, vu tout le code qu'il y a dans la page, sauf coup de bol, on ne trouvera pas.

Amicalement,

Le truc que je ne comprends pas c´est que la feuille CSS n´a pas pu être modifiée, nous n´y avons pas accès. Le code dynamique non plus.

Du coup je comprends pourquoi le design a changé, vu que les noms des classes ont été changés dans le code html, et donc le lien vers la mise en page est rompu, mais j´ai du mal à comprendre pourquoi les liens ne fonctionnent pas lorsque l´on clique dessus.
Est-ce parce que du coup l´accès à la fonction display a été rompu aussi, et du coup chaque texte ne s´affiche pas correctement lors de la sélection?
(je viens de modifier l´orthographe et enlever les majuscules).

Si tu pouvais me détailler un peu plus l´explication histoire que j´y vois plus clair?

<li><a href="#valeurs">Valeurs</a></li>

<div class="fade tab-pane" id="valeurs">
<p>Les méthodes d&#39;impression ont évolué, ainsi que les processus de production qui les accompagnent. <br />
Nous vous garantissons nos meilleurs savoir-faire et méthodes de fabrication.</p>
</div>

Y´a pas moyen de retrouver dans le CSS le nom de la class correspondant à ce bloc??

Bon, tant pis, je vais attendre que le mec responsable du site réponde, j´ai quelques semaines devant moi je pense!!

parsimonhi a écrit :
Bonjour,

Mon conseil : tu recherches une sauvegarde s'il y en a une et tu regardes ce qu'il y avait. Parce que là, vu tout le code qu'il y a dans la page, sauf coup de bol, on ne trouvera pas.

Amicalement,

J´ai déjà tenté, sans effet. Il n´y a de sauvegarde que des deux dernières manips..

Merci pour ta patience en tout cas.

Pourtant si, je ne me suis servi que du module d´édition de texte.
J´ai sélectionné la police que je souhaitais sur la version espagnole du site. J´ai fait `sauvegarder´. Je suis sortie du module pour voir la police en ligne.
J´ai vu que les onglets du menu n´apparaissaient plus.

Je suis allée sur le module d´édition de la page française, qui, elle, était comme à l´origine, avec menu à onglets.
Chose simple, j´ai comparé les codes HTML des deux modules. Je n´ai pas vu de différence.
J´ai copié le code HTML du module de la page française, et je l´ai collé dans la page espagnole, en changeant seulement la traduction du contenu.
J´ai fermé. Et là, les onglets de la page française ont disparu aussi, alors que je n´ai pas touché un seul caractère du code, je l´ai seulement copié et collé.

Ça c´était hier. Un de mes collègues a jeté un oeil entre temps, et quand je suis arrivée ce matin c´était pareil, du coup j´en ai conclus qu´il n´a pas trouvé.
Ce que je ne comprends pas c´est que les balises pour identifier le bloc soient absentes.

J´écris au service client mais ils sont pas très efficaces, ils sont constamment en train de me rajouter ou de m´enlever des options d´édition sur la plate forme, et en général je n´ai que la moitié des options qui fonctionnent. Ils sont donc constamment en train de faire de la maintenance pour la rendre utilisable.
Quand j´ouvre la fenêtre d´édition d´un module qui n´est pas en bas de page, j´ai intérêt à être rapide et à choper le haut de la fenêtre avec la souris (je n´ai l´option de la déplacer qu´en haut) et la faire descendre jusqu´à arriver en bas de page, sinon la page défile vers le haut avec la fenêtre qui disparaît hors de l´écran, et après je dois réactualiser la page, réouvrir l´éditeur etc etc...
Cela fait 12 jours que je demande l´accès au serveur pour charger des photos, et ils ne me l´ont toujours pas mis en place.

Bref, je ne vais pas m´étaler sur mes péripéties avec l´éditeur de contenu, mais j´ai rarement vu une plate forme client pour éditer un site web aussi peu pratique.


J´ai demandé à la société qui a fait le web s´ils avaient une sauvegarde du site d´origine, j´attends la réponse.

Bonjour,

Si tu remplaces les classes de <div class="fade tab-pane" id="valeurs"> et <div class="fade tab-pane" id="equipe"> par <div class="active fade in tab-pane" id="valeurs"> et <div class="active fade in tab-pane" id="equipe">, quand on clique sur un des trois liens, on voit que ça a une action. Ce n'est pas bien positionné, mais déjà, ça bouge.

Amicalement,