CSS menu dynamique a corriger (Aide)
Résolu/Fermé
txiki
Messages postés
6597
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
22 février 2024
-
Modifié le 2 avril 2022 à 11:23
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 - 6 avril 2022 à 17:35
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 - 6 avril 2022 à 17:35
A voir également:
- CSS menu dynamique a corriger (Aide)
- Tableau croisé dynamique - Guide
- Menu déroulant excel - Guide
- Menu démarrer windows 11 - Guide
- Canon quick menu - Télécharger - Utilitaires
- Menu demarrer - Guide
3 réponses
txiki
Messages postés
6597
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
22 février 2024
514
2 avril 2022 à 16:33
2 avril 2022 à 16:33
Alors personne pour m'aider ?
J'ai fais quelques modifs sur le .js ci-dessous mais ça ne change rien au problème. Les "images parasites" demeurent.
Si vous regardez le code source ma page index vous verrez que j'ai plusieurs .js et .css.
Je reconnais que c'est une usine à gaz mais quand même...;
Merci toutefois !
J'ai fais quelques modifs sur le .js ci-dessous mais ça ne change rien au problème. Les "images parasites" demeurent.
//TransMenu.spacerGif = "x.gif"; // chemin du spacer transparent en .gif (image) //TransMenu.dingbatOn = "arrow.png"; // chemin de l'image du sous-menu actif //TransMenu.dingbatOff = "tabarrow.png"; // chemin de l'image vers le sous-menu inactif //TransMenu.dingbatSize = 14; // taille du caractère (forme carrée pris en compte) TransMenu.menuPadding = 0; // padding entre le menu et les bords des cellules TransMenu.itemPadding = 3; // espace supplémentaire autour de chaque cellule TransMenu.shadowSize = 6; // taille de l'ombre du sous menu TransMenu.shadowOffset = 3; // la distance de l'ombre devrait être compensée par l'avant-plan TransMenu.shadowColor = "#888"; // couleur de l'ombre (la transparence est mis en CSS) //TransMenu.shadowPng = "grey-40.png"; // un graphique PNG servant d'ombre pour IE5 mac TransMenu.backgroundColor = "#F7F7F7"; // couleur du fond du sous menu (transparence fixée dans CSS) //TransMenu.backgroundPng = "white-90.png"; // un graphique PNG servant d'arrière-plan pour IE5 mac TransMenu.hideDelay = 800; // nombre de millisecondes avant de cacher un sous-menu TransMenu.slideTime = 200; // nombre de millisecondes qu'il faut pour ouvrir et fermer un menu TransMenu.subpad_x = 4; // padding Horizontal entre le coin en haut à droite du bord du menu et le sous-menu (niveau> 2) au lieu de 0 TransMenu.subpad_y = -0; // padding Vertical entre le coin en haut à droite du bord du menu et le sous-menu (niveau> 2) au lieu de 2
Si vous regardez le code source ma page index vous verrez que j'ai plusieurs .js et .css.
Je reconnais que c'est une usine à gaz mais quand même...;
Merci toutefois !
txiki
Messages postés
6597
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
22 février 2024
514
4 avril 2022 à 03:16
4 avril 2022 à 03:16
Salut à tous,
Bon après moultes tentatives de correction des fichiers JS et CSS j'ai fini par tout "péter" au point que je n'avais plus les sous-menus.
J'ai finir par rétablir les menus dynamique mais pas le suppression des symboles bizarres et maintenant les largeurs des sous-menus s'adaptent au contenu (ce qui n'était pas le cas avant -:( )
De plus la taille des textes est grande et malheur je ne sais plus réduire la taille des fonts, ni dans body ni dans p. Les tableaux sont plus petits, normal, mais je n'arrive pas non plus a les agrandir comme les paragraphes. Misère misèreuuu !
Je continue avant de passer aux players musicaux et chants.
Merci quand même si quelqu'un m'aidais un peu sur la direction à prendre.
Bon après moultes tentatives de correction des fichiers JS et CSS j'ai fini par tout "péter" au point que je n'avais plus les sous-menus.
J'ai finir par rétablir les menus dynamique mais pas le suppression des symboles bizarres et maintenant les largeurs des sous-menus s'adaptent au contenu (ce qui n'était pas le cas avant -:( )
De plus la taille des textes est grande et malheur je ne sais plus réduire la taille des fonts, ni dans body ni dans p. Les tableaux sont plus petits, normal, mais je n'arrive pas non plus a les agrandir comme les paragraphes. Misère misèreuuu !
Je continue avant de passer aux players musicaux et chants.
Merci quand même si quelqu'un m'aidais un peu sur la direction à prendre.
Salut,
quelques remarques:
Vous mélangez plusieurs choses ensemble. Il serait peut-être mieux de se concentrer sur une seule à la fois histoire d'avoir un bon niveau dedans plutôt que de s'éparpiller et avoir aucun niveau dans rien.
Par exemple vous parlez ici de CSS et JavaScript...
JavaScript permet de manipuler le contenu de la page HTML certes(comme CSS) mais bon dans un premier temps tester rien qu'avec CSS en faisant les modifs 'à la main' ça vous évitera des problèmes et complexité inutile.
Autre chose quel est le but du code et l'avez vous construit vous-même?
Si vous voulez faire des animations lors de clic sur la page vous pouvez tout faire en CSS donc autant le faire et éviter de faire de la programmation quand c'est possible en CSS.
En ce qui concerne votre code impossible de tester puisque vous ne mettez pas tout les fichiers(pas de HTML alors ça nous sert à rien puisque CSS s'applique sur du HTML).
Il serait bien d'indiquer au moins où se trouve le problème et pourquoi, quelles sont les erreurs.
Parce que vous parlez tirets et rectangles vides sans nous les montrer...comment peut on deviner quelle est leur cause, qu'est ce qui doit être affiché à la place et à quoi ces tirets et rectangles vides correspondent...
C'est le problème principal de vote question: vous ne comprenez pas ce que vous faites et donc ce qui ne marche pas, difficile d'intervenir sur des problèmes que vous créez sans savoir quel est le résultat voulu.
Ne pas avoir des tirets et rectangles vides n'est pas un but ou fonctionnalité(et l'une des potentielles difficultés de Dreamweaver qui va compliquer un code pour rien et le rendre impossible à utiliser par un humain...). Pour ça la réponse est simple: supprimez tout et repartez sur des bases propres en faisant tout dès le départ pas à pas. Jusqu'à ce que vous bloquiez sur un point et là vous pouvez poser la question en détaillant ce que vous voulez et ce qui ne va pas ou ne comprenez pas.
Quant au JavaScript que vous mettez il est simplement incohérent ou incomplet et cela se voit dès la première ligne:
Le point indique une notation objet(et la majuscule à TransMenu aussi mais ça c'est plus une convention d'écriture qu'une règle absolu) donc soit fait appel à un autre fichier/librairie JS qui crée l'objet et l'utilise(par que bon créer un objet n'influe pas sur le CSS d'une page, il faut donc l'inclure d'une des façons possibles: dans la balise avec l'attribut style, dans le head entre les balises styles, en chargeant un fichier externe .css).
ça c'est possible en CSS du moment où vous maîtrisez CSS parfaitement vous pouvez le manipuler par JavaScript(en connaissant JavaScript aussi donc ou au moins la partie sur comment changer l'attribut style, le contenu de la balise style, charger un fichier dans la page). Pour en revenir au JavaScript un objet non instancié renvoi une erreur(tout comme utiliser une variable qui n'a pas été crée au préalable) qui indique clairement comment la corriger(en créant une instance de l'objet) et si vous n'avez pas cet erreur il faut donc montrer où bous instanciez cet objet et à quoi il sert(un objet comprend en interne des valeurs nommés attributs et fonctions nommées méthodes).
Ainsi :
met la valeur zéro pour l'attribut menuPadding.
A partir de là il faudra utiliser cette valeur, soit c'est fait directement dans l'objet soit en utilisant la valeur enregistrée dans une fonction du code.
Probablement vous parlez pas d'un objet personnalisé mais de l'élément repéré par la classe 'transMenu'?
Dans ce cas je ne peut pas grand chose pour vous il faudra commencer par les bases de JavaScript et notamment ce qu'est un sélecteur de balise:
https://www.zonecss.fr/cours-css-javascript/les-selecteurs-javascript.html
Qui renvoi un objet du DOM(Document Object Model dur de faire plus parlant: modèle objet du document en français).
Sur votre apprentissage:
le site du zéro à changé de nom uniquement pour Open Class Room.
Son contenu s'est enrichi et amélioré mais ça reste un site d'initiation donc suffisant pour des notions pas pour devenir expert, il faudra apprendre ailleurs et pratiquer par vous-même.
La première chose à faire est de pas vous décourager et chercher d'autres tutos, souvent en anglais si ça ne vous pose pas de problèmes.
Un parmi d'autres est celui de l'organisme officiel du web:
https://www.w3schools.com/
il est disponible en français et reste très sommaire et progressif mais très bien fait pour des bases.
Il y a aussi sur le même site la bible de HTML et CSS: la liste de toutes les balises HTML et leur fonctionnement, la liste de toutes les propriétés CSS avec exemples...bref le manuel de référence quand vous ne savez pas comment où vous ne savez pas à quoi sert et comment utiliser tel élément de ces 2 langages descriptifs. Donc une bonne ressource à avoir sous la main.
Si les tutos/cours d'initiation sont trop sommaires pour vous passez à des tutos plus complets en faisant des recherches sur le point précis concerné/ Il y a aussi des MOOC fait par le W3C qui sont vraiment bien faits et vont en profondeur sur chaque sujet abordé(exemple HTML les règles d’accessibilités et comment les utiliser, la réalisation d'applis + de lecteurs audios avec l'API AUDIO/VIDEO qui sont très proches dans leur utilisation). Mieux vaut avoir un niveau a delà de débutant pour y aller sinon cherchez simplement un cours "JavaScript personnaliser mon lecteur audio" ou "intégrez des animations à mon site" ou "apprendre animation CSS".
Chaque terme de recherche n'est pas unique(faites plusieurs essais si vous n'avez pas ce qu'il vous faut avec la première recherche) et vous pouvez parcourir le tuto/résultat pour voir s'il correspond à ce que vous voulez apprendre.
Cdt. Bon travail
ps: un autre intérêt de se concentrer sur un point en particulier est aussi qu'on peut le tester indépendamment du reste donc voir en cas de débogage si le problème vient de cette partie là ou pas.
Par exemple si votre but est d'animer les ombres d'une balise au survol de la souris vous faites un fichier qui ne comprends qu'un élément et vous testez jusqu'à obtenir ce que vous voulez. Quand c'est fait vous pouvez l'intégrer facilement au reste surtout si vous faites ça avec des fonctions JavaScript vous n'avez qu'à copier coller le code que vous avez fait(et donc compris) et l'appliquer à(aux) l'élément(s) que vous voulez.
Par contre rajouter du PHP, une base de données n'a rien à voir.
C'est même l'une des 2 distinctions essentielles sur le www:
côté client Vs côté serveur.
L'autre distinction importante qui va avec les bases de données vous devez l'avoir puisque elle est aussi côté HTML / CSS: séparer le contenu de la forme, les données de la présentation. Séparer ne veut pas dire qu'ils ne vont pas ensemble mais qu'ils sont indépendants l'un de l'autre: on peut utiliser des données dans une autre page, on peut utiliser dans une même page plusieurs données différentes. Et ainsi vous n'avez pas à répéter les mêmes choses plusieurs fois, ça ouvre la porte à l'automatisation ou simplement réutiliser le CSS pour toutes les pages du site sans avoir à l'écrire plusieurs fois pour plusieurs pages(et même le charger plusieurs fois = gain de temps de chargement).
D'ailleurs quand en programmation vous faites plusieurs fois la même chose c'est avant tout un signe que votre programme est mal fait. Mais je vous laisse à votre question: si c'est du CSS traitez le en CSS si c'est du JavaScript il va falloir commencer par apprendre comment ça marche JavaScript et ouvrir la console du navigateur pour traquez et corriger les erreurs éventuelles.
quelques remarques:
Vous mélangez plusieurs choses ensemble. Il serait peut-être mieux de se concentrer sur une seule à la fois histoire d'avoir un bon niveau dedans plutôt que de s'éparpiller et avoir aucun niveau dans rien.
Par exemple vous parlez ici de CSS et JavaScript...
JavaScript permet de manipuler le contenu de la page HTML certes(comme CSS) mais bon dans un premier temps tester rien qu'avec CSS en faisant les modifs 'à la main' ça vous évitera des problèmes et complexité inutile.
Autre chose quel est le but du code et l'avez vous construit vous-même?
Si vous voulez faire des animations lors de clic sur la page vous pouvez tout faire en CSS donc autant le faire et éviter de faire de la programmation quand c'est possible en CSS.
En ce qui concerne votre code impossible de tester puisque vous ne mettez pas tout les fichiers(pas de HTML alors ça nous sert à rien puisque CSS s'applique sur du HTML).
Il serait bien d'indiquer au moins où se trouve le problème et pourquoi, quelles sont les erreurs.
Parce que vous parlez tirets et rectangles vides sans nous les montrer...comment peut on deviner quelle est leur cause, qu'est ce qui doit être affiché à la place et à quoi ces tirets et rectangles vides correspondent...
C'est le problème principal de vote question: vous ne comprenez pas ce que vous faites et donc ce qui ne marche pas, difficile d'intervenir sur des problèmes que vous créez sans savoir quel est le résultat voulu.
Ne pas avoir des tirets et rectangles vides n'est pas un but ou fonctionnalité(et l'une des potentielles difficultés de Dreamweaver qui va compliquer un code pour rien et le rendre impossible à utiliser par un humain...). Pour ça la réponse est simple: supprimez tout et repartez sur des bases propres en faisant tout dès le départ pas à pas. Jusqu'à ce que vous bloquiez sur un point et là vous pouvez poser la question en détaillant ce que vous voulez et ce qui ne va pas ou ne comprenez pas.
Quant au JavaScript que vous mettez il est simplement incohérent ou incomplet et cela se voit dès la première ligne:
TransMenu.menuPadding = 0;
Le point indique une notation objet(et la majuscule à TransMenu aussi mais ça c'est plus une convention d'écriture qu'une règle absolu) donc soit fait appel à un autre fichier/librairie JS qui crée l'objet et l'utilise(par que bon créer un objet n'influe pas sur le CSS d'une page, il faut donc l'inclure d'une des façons possibles: dans la balise avec l'attribut style, dans le head entre les balises styles, en chargeant un fichier externe .css).
ça c'est possible en CSS du moment où vous maîtrisez CSS parfaitement vous pouvez le manipuler par JavaScript(en connaissant JavaScript aussi donc ou au moins la partie sur comment changer l'attribut style, le contenu de la balise style, charger un fichier dans la page). Pour en revenir au JavaScript un objet non instancié renvoi une erreur(tout comme utiliser une variable qui n'a pas été crée au préalable) qui indique clairement comment la corriger(en créant une instance de l'objet) et si vous n'avez pas cet erreur il faut donc montrer où bous instanciez cet objet et à quoi il sert(un objet comprend en interne des valeurs nommés attributs et fonctions nommées méthodes).
Ainsi :
TransMenu.menuPadding = 0;
met la valeur zéro pour l'attribut menuPadding.
A partir de là il faudra utiliser cette valeur, soit c'est fait directement dans l'objet soit en utilisant la valeur enregistrée dans une fonction du code.
Probablement vous parlez pas d'un objet personnalisé mais de l'élément repéré par la classe 'transMenu'?
Dans ce cas je ne peut pas grand chose pour vous il faudra commencer par les bases de JavaScript et notamment ce qu'est un sélecteur de balise:
https://www.zonecss.fr/cours-css-javascript/les-selecteurs-javascript.html
Qui renvoi un objet du DOM(Document Object Model dur de faire plus parlant: modèle objet du document en français).
Sur votre apprentissage:
le site du zéro à changé de nom uniquement pour Open Class Room.
Son contenu s'est enrichi et amélioré mais ça reste un site d'initiation donc suffisant pour des notions pas pour devenir expert, il faudra apprendre ailleurs et pratiquer par vous-même.
La première chose à faire est de pas vous décourager et chercher d'autres tutos, souvent en anglais si ça ne vous pose pas de problèmes.
Un parmi d'autres est celui de l'organisme officiel du web:
https://www.w3schools.com/
il est disponible en français et reste très sommaire et progressif mais très bien fait pour des bases.
Il y a aussi sur le même site la bible de HTML et CSS: la liste de toutes les balises HTML et leur fonctionnement, la liste de toutes les propriétés CSS avec exemples...bref le manuel de référence quand vous ne savez pas comment où vous ne savez pas à quoi sert et comment utiliser tel élément de ces 2 langages descriptifs. Donc une bonne ressource à avoir sous la main.
Si les tutos/cours d'initiation sont trop sommaires pour vous passez à des tutos plus complets en faisant des recherches sur le point précis concerné/ Il y a aussi des MOOC fait par le W3C qui sont vraiment bien faits et vont en profondeur sur chaque sujet abordé(exemple HTML les règles d’accessibilités et comment les utiliser, la réalisation d'applis + de lecteurs audios avec l'API AUDIO/VIDEO qui sont très proches dans leur utilisation). Mieux vaut avoir un niveau a delà de débutant pour y aller sinon cherchez simplement un cours "JavaScript personnaliser mon lecteur audio" ou "intégrez des animations à mon site" ou "apprendre animation CSS".
Chaque terme de recherche n'est pas unique(faites plusieurs essais si vous n'avez pas ce qu'il vous faut avec la première recherche) et vous pouvez parcourir le tuto/résultat pour voir s'il correspond à ce que vous voulez apprendre.
Cdt. Bon travail
ps: un autre intérêt de se concentrer sur un point en particulier est aussi qu'on peut le tester indépendamment du reste donc voir en cas de débogage si le problème vient de cette partie là ou pas.
Par exemple si votre but est d'animer les ombres d'une balise au survol de la souris vous faites un fichier qui ne comprends qu'un élément et vous testez jusqu'à obtenir ce que vous voulez. Quand c'est fait vous pouvez l'intégrer facilement au reste surtout si vous faites ça avec des fonctions JavaScript vous n'avez qu'à copier coller le code que vous avez fait(et donc compris) et l'appliquer à(aux) l'élément(s) que vous voulez.
Par contre rajouter du PHP, une base de données n'a rien à voir.
C'est même l'une des 2 distinctions essentielles sur le www:
côté client Vs côté serveur.
L'autre distinction importante qui va avec les bases de données vous devez l'avoir puisque elle est aussi côté HTML / CSS: séparer le contenu de la forme, les données de la présentation. Séparer ne veut pas dire qu'ils ne vont pas ensemble mais qu'ils sont indépendants l'un de l'autre: on peut utiliser des données dans une autre page, on peut utiliser dans une même page plusieurs données différentes. Et ainsi vous n'avez pas à répéter les mêmes choses plusieurs fois, ça ouvre la porte à l'automatisation ou simplement réutiliser le CSS pour toutes les pages du site sans avoir à l'écrire plusieurs fois pour plusieurs pages(et même le charger plusieurs fois = gain de temps de chargement).
D'ailleurs quand en programmation vous faites plusieurs fois la même chose c'est avant tout un signe que votre programme est mal fait. Mais je vous laisse à votre question: si c'est du CSS traitez le en CSS si c'est du JavaScript il va falloir commencer par apprendre comment ça marche JavaScript et ouvrir la console du navigateur pour traquez et corriger les erreurs éventuelles.
txiki
Messages postés
6597
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
22 février 2024
514
6 avril 2022 à 17:35
6 avril 2022 à 17:35
Tontonduwoueb,
Je ne m'attendais pas a un roman.
Je clos la discussion.
Merci quand même !
Je ne m'attendais pas a un roman.
Je clos la discussion.
Merci quand même !
