Bonjour à tous,

Après plusieurs recherches je dois m'en remettre à vous car j'ai un problème assez ennuyeux. Je suis actuellement en train de créer un menu en Javascript (présenté sur mon blog) mais comme je rencontre pas mal de problèmes d'affichage à cause des styles CSS définis par les sites web, je souhaiterais les réinitialiser et ainsi avoir un environnement de travail "propre".

Pour cela j'ai cherché un peu mais il n'existe pas de fonction native à Javascript permettant ceci, j'ai donc voulu la créer mais c'est assez long à faire et en plus je me retrouve avec une colle : la technique de l'héritage.

Admettons que je supprime tous les styles CSS du div qui encadre mon menu, c'est bien mais les balises contenues dans ce menu n'en tiennent pas compte .

Ma question est donc : Est-ce possible de faire en Javascript un équivalent de ce code en CSS :

#monMenu * {
  /* On réinitialise */
}

Merci d'avance ,
Nes'

Voila deux fonctions que j'avais créé ya quelques temps :

/*############  Récuperer le style d'un élément  ##############*/
function RecupererStyle(nom_,document_) {
	var doc = ((document_)? document_ : this.document);
	var rules = doc.styleSheets[0].rules || doc.styleSheets[0].cssRules;
	
	for(var i=0; i<rules.length; i++) {
		if(rules[i].selectorText == nom_) 
			return rules[i].style;		
	}
	return null;
}


/*############  Changer le style d'un élément  ##############*/
function ChangerStyle(element_,valeur_,propriete_,importance_) {
	var propriete = (propriete_)?propriete_:"color";
	var importance = (importance_)?importance_:"";
	var rules = RecupererStyle(element_);
	rules.setProperty(propriete,valeur_,importance)
}

Sert toi en, et/ou adapte les a ton envie ;).

Merde j'étais sûr d'avoir répondu à ce message, il s'est passé quoi ?

Bref, je reprends : ton code, bien qu'utile pour certaines utilisations, ne me servira pas dans mon cas car il ne permet pas de dire que je veux que le style s'applique à toutes les balises contenues, ou bien alors je ne vois pas comment faire.

Mais merci quand même.

Euh sinon, essaye de definir les propriétés soit avec un chemin plus long pour qu'elles gagnent de l'importance, soit avec un !important a côté de la propriété pour qu'elle soit "plus forte". En tout cas, le problème doit se regler en CSS et pas en Javascript la .

Si ta demande vise à résoudre ce bug, tu pars dans une mauvaise direction

Citation

Vous remarquerez très certainement qu’il y a un petit problème au niveau de la fluidité lorsque l’une des images arrive au bout à gauche du menu. En fait il s’agit d’un bug qui n’est pas encore résolu, cela vient d’un margin dont je dois vérifier la valeur pour savoir si l’une des images a atteint le bout ou pas. Je l’appelle la “constante inconnue” parce que cette valeur est vraiment mystérieuse. Si vous voulez, théoriquement je dois faire passer une image de l’autre côté du menu lorsque celle-ci arrive à 0px de largeur entre la bordure gauche du menu et l’image elle-même. Seulement, en pratique ça change vachement et j’ai donc constaté que la valeur qui fonctionne dans la plupart des cas est -3 (allez savoir pourquoi >_> ). Or, sur mon blog ça foire et c’est la valeur 1 qui fonctionne correctement. Bref, c’est un mystère qui reste à résoudre dans l’immédiat.

Tes liens n'héritent pas de propriétés CSS qui trainent, c'est juste une mauvaise gestion du margin-left de tes éléments
Là où tu te mélanges c'est que tu dois te contrefiches complètement des propriétés CSS qui peuvent intéragir dans ta page puisque ton code se base uniquement sur la valeur margin-left de ton premier noeud. Il ne modifie pas les noeuds en fonction de leur distance entre l'image et le menu, mais en fonction de marginLeft. Ca pourrait vouloir dire la même chose, mais la différence se joue dans le fait que ton code ne se base que sur le marginLeft indiqué dans la propriété style et rien d'autre. Passes la détection à 0, s'il y a une erreur c'est ailleurs qu'il faut voir
- de mon côté j'ai testé en modifiant le code directement sous Firefox, ça marche nickel -

Ah ? J'aurais tendance à penser qu'il y a toujours un vieux margin qui vient me pourrir la vie et que je n'ai pas viré mais bon .

Concernant le fait que ça fonctionne à 0, tu l'as fait sous quelles conditions ? Par là je veux dire : quelle page ? quel code ? etc... Pour que je comprenne .

Je vais essayer de voir d'où ça peut venir et si ce n'est pas autre choses que les styles CSS mais je dois t'avouer que je suis sceptique. ^^'

Du tout, ton code opère tel que tu lui dis :

• Attendre jusqu'à ce que la première image soit à -3
• Intervertir les images
• Repasser la première au margin par défaut

Sauf que comme il était à une valeur supérieure à celle prévue, il fait un 'saut' de 3px

Comment j'ai fait le test ?
Sur la page de ton blog où tu le présentes, en modifiant ta fonction à la volée

Tu as simplement à indiquer if (marginLeft <= 0), ça marchera tout seul.

Effectivement, sur mon blog ça fonctionne impeccablement en revanche si tu essayes sur ma page toute simple de présentation est bien ça ne fonctionne qu'avec la valeur -3, regarde par toi-même...

C'est pour ça que j'ai tendance à me demander si ça ne vient pas d'un margin ou autre .

C'est lié aux espaces dans ton bloc menu
Donc au choix, soit tu es obligé de ne pas mettre d'espaces pour que ça marche, soit tu vas devoir modifier un peu ton CSS de manière à ce qu'ils ne gênent pas (float ou positionnement)

Euh... Je dois être abruti, mais quels espaces ? Ceux qui sont entre les images ?

Wai wai, ceux-là même

<p>
........<a href="#" title="Première image"><img src="templates/bubble.png" alt="" /></a>
        <a href="#" title="Deuxième image"><img src="templates/chantier.png" alt="" /></a>
        <a href="#" title="Troisième image"><img src="templates/musique.png" alt="" /></a>
        <a href="#" title="Quatrième image"><img src="templates/mail.png" alt="" /></a>
        <a href="#" title="Cinquième image"><img src="templates/admin.png" alt="" /></a>
      </p>

YAYEPIYU §

Je t'aime tu sais ? J'avais jamais pensé que ça pouvait venir du code HTML et tu m'as trouvé le problème. Depuis le temps que je cherchais à le résoudre .

En tout cas merci, merci beaucoup ! Je pense qu'une petite citation de ton nom dans les commentaires du code s'impose .

Nes'

Ce serait trop d'honneur
Amuses-toi bien pour la suite du code

Je suis actuellement en train de tout recoder de façon objet afin d'avoir un code plus propre et mieux organisé. Et puis j'ai 2 ou 3 autres choses à ajouter .

Merci en tout cas, depuis le temps que ça me tracassait ce truc.