[résolu] Definition de balise et de class en conflit

Bonjour,


J'ai fait mes recherches sur le net concernant les prioritée CSS mais je suis tombé sur des articles qui traite des prioritée entre differentes sources (navigateur, utilisateur, auteur)

Sur un de mes CSS il existe un conflit, qui j'en suis sur est tout à fait normal. J'applique un CSS sur une balise puis plus loin un CSS avec l'utilisation d'une Class pour une balise identique mais la valeur est completement opposè (left et right)

Je cherche d'inclure un minimum de Class dans mon code, c'est pour ça que j'utilise l'attribution sur les balises directement.

Voici un exemple

/*present plusieur dizaine de fois dans le code*/
#menu li {left: 0em;}

/*present 2 fois dans le code*/
#menu li.specifique {right: 0em;}

Voilà, à par placer une nouvelle Class dans la feuille de style et de l'inscrire dans tous mon code HTML, je n'ai pas trouver d'autre solution valable (pour l'instant)
Modifié par percherie (15 Apr 2006 - 20:06)

Salut,

Normalement, si tu définit les propriétés dans l'ordre, tu ne devrais pas avoir de conflit. Ainsi le code suivant devrait marcher correctement. As-tu éventuellement une page sur laquelle on peut voir le code complet ?

li { color: red }
li.specifique { color: green }

Je viens de le mettre en ligne après avoir balisé par des commentaires les parties qui posent problème (je vais vous epargner la decription du code)

http://toutenkamion.net/

Voilou, j'ai tenter de faire quelques chose de cohérent mais surement qu'a mon niveau, j'ai encore du me compliquer la tache.
Modifié par percherie (26 Aug 2006 - 15:12)

Bonjour,

ce genre de petits soucis étant relativement classique, je te propose les outils pour t'en sortir par toi même :
- théorie : Assigning property values, Cascading, and Inheritance, voir en particulier pour ce qui te concerne le 6.4.3
- pratique : Inspector Dom de Firefox donne avec le choix CSS style rules toutes les règles s'appliquant à un élément et les valeurs calculées des propriétés ce qui permet rapidement de maîtriser les conflits.

J'ai enfin trouver la solution bien que je n'ai pas compris comment profiter de l'inspecteur DOM, je trouve pas les degrée de priorité (voir : http://openweb.eu.org/articles/cascade_css/)

Après avoir pris l'air j'ai réalisé qu'en fait il n'y a pas conflit mais annulation du positionnement de droite

/*present plusieur dizaine de fois dans le code*/
#menu li {left: 0em;}

/*present 2 fois dans le code*/
#menu li.specifique {right: 0em;}

Revient à dire

#menu li.specifique {
right: 0em;
left: 0em;
}

Le positionnement à gauche semble être prit en prioritée voici la correction :

#menu li.specifique {
right: 0em;
left: auto;
}

Ps : si une personne peut m'expliquer comme trouver les degrés de priorité dans l'inspecteur DOM je suis très interesser

a écrit :
si une personne peut m'expliquer comme trouver les degrés de priorité dans l'inspecteur DOM je suis très interesser

L'inspecteur DOM donne l'ensemble des règles s'appliquant sur un élément, et les valeurs calculées des propriétés. Il est donc possible de constater que la règle appliquée n'est éventuellement pas celle désirée.

L'inspecteur DOM ne donne pas les priorités. Il faut connaitre les règles de priorité qui sont expliquées sur le lien que je donnais.