probleme de priorites

05 déc. 2007, 13:27

bonjour ,j'ai un soucis sur un site dont je n'ai pas fait la charte graphique.

J'ai une feuille de style 'styleCommun.css' qui sert à tout le site et la je travaille sur une partie du site qui a sa propre feuille de style en plus de styleCommun.

Je voudrais virer les puces qui sont dans les ul et qui sont definies dans style commun. Le probleme c'est que j'ai beau mettre 'list-style:none' dans ma nouvelle feuille de style, il n'en tient pas compte.

Ce n'est pas une erreur de selecteur car je fait ce que je veux avec d'autres proprietes. Mais avec les proprietes list-style-* je peux rien faire.

voila le style du conteneur articles de la feuille styleCommun:

Code : Tout sélectionner

div#article ul{
  list-style-position: outside;
  list-style-type: none;
  margin:5px 0 5px 25px;
}
div#article ul li{
  list-style-image: url(../images/listePuceNivo1.gif);
}

et celui la c'est le style dans ma nouvelle feuille:

Code : Tout sélectionner

div#articles ul#services li{
	
  	list-style-position: outside;
 	list-style-type: none;
	list-style-image:url();
 	margin-left:10px; 
}

d'ou peu venir ce probleme de priorite a votre avis?

05 déc. 2007, 13:52

N'oublie pas qu'une feuille de style interne sera prioritaire par rapport à une feuille de style externe commune à tout le site.

Après, il y a toute une question de calcul de la spécificité d'une règle.

05 déc. 2007, 15:20

qu'appelles tu feuille de style interne et feuille de style externe?

dans mon cas j'ai deux balises link dans ma page html qui appellent chacune une feuille de style. don a priori les regles de chacune des deux feuilles ont les memes priorites .

05 déc. 2007, 17:50

Ils sont donc externes. Tu les appelle dans quel ordre ?

05 déc. 2007, 19:52

Une feuille de style interne comporte les règles CSS dans l'élément style :

Code : Tout sélectionner

<head>
<style type="text/css">
/* Tes règles CSS, formant une feuille de style interne,
qui ne sera valable que pour la page en question */
</style>
</head>

À ne pas confondre avec l'appel d'une feuille de style via la règle @import :

Code : Tout sélectionner

<head>
<style type="text/css">
@import url("chemin-vers-la-feuille-de-style.css");
/* C'est une alternative à l'élément link, donc c'est une feuille de style externe */
</style>
</head>

En plus de cela, tu as l'attribut style, dont la valeur comprend les règles CSS qui s'appliquent (par priorité) uniquement à l'élément comportant ledit attribut :

Code : Tout sélectionner

<p style="font-size:4em; font-weight: bold; color: red; background: silver;">Ce paragraphe utilisera prioritairement les règles CSS définies par son attribut style.</p>

Si tu appelles plusieurs feuilles de styles externes et qu'elles concernent toutes le(s) même(s) média(s), sache que les règles CSS contenues dans la feuille de style suivante écrasent celles contenues dans la feuille de style précédente.

Soit trois feuilles de styles et leur code respectif :
a.css

Code : Tout sélectionner

p {
  color: red;
}

b.css

Code : Tout sélectionner

p {
  color: green;
}

c.css

Code : Tout sélectionner

p {
  color: blue;
}

Un extrait du fichier HTML qui les appelle :

Code : Tout sélectionner

<head>
<link href="a.css" rel="stylesheet" type="text/css" media="screen" />
<link href="b.css" rel="stylesheet" type="text/css" media="screen" />
<link href="c.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<p>Un paragraphe</p>
</body>

Vu l'ordre d'appel des feuilles de style, le paragraphe s'affichera en bleu.

05 déc. 2007, 23:58

La propriété CSS !important aurait aussi pu être utilisée pour donner plus de poids à telle ou telle déclaration, indépendamment de l'ordre des éléments dans les feuilles de styles.

Voici un exemple qui reprend le bout de code d'ours-blanc :

Code : Tout sélectionner

div#article ul{ 
  list-style-position: outside; 
  list-style-type: none !important; 
  margin:5px 0 5px 25px; 
}

A noter quand même que certains navigateurs dans certaines versions n'interprètent pas cette commande

06 déc. 2007, 10:42

merci pour toutes ces explications.

Berzemus

Ils sont donc externes. Tu les appelle dans quel ordre ?

Ma feuille comportant les styles communs est appellee en premier et la feuille des styles spécifiques après. D'apres ce que dit victor c'est le style spécifique qui doit être appellé alors!

Je vais essayer la propriété !important et revérifier mon code.

a noter: j'arrive à changer la couleur du texte et du fond mais les propriétés sur les listes et sur les marges ne fonctionnent pas. peut etre il y a une histoire de positionnement qui déconne la dedans...

[edit]
bon ca marche.
deux choses n'allaient pas. Le selecteur était correct mais je l'ai changé en mettant le meme selecteur que dans la feuille commune. Peut être il y avait un conflit avec un autre selecteur quelque part...
Au passage j'ai decouvert que IE ne connait pas le raccourci "list-style:none;"

merci en tout cas pour les infos sur les priorités.

06 déc. 2007, 12:48

Au passage j'ai decouvert que IE ne connait pas le raccourci "list-style:none;"

Si, il connaît.

07 déc. 2007, 10:25

ours-blanc- a écrit:
Au passage j'ai decouvert que IE ne connait pas le raccourci "list-style:none;"

Si, il connaît.

J'ai revérifié. Avec mon exemple et list-style:none; IE6 ne connait pas.

07 déc. 2007, 11:12

ours-blanc- a écrit:
Au passage j'ai decouvert que IE ne connait pas le raccourci "list-style:none;"

Si, il connaît.
J'ai revérifié. Avec mon exemple et list-style:none; IE6 ne connait pas.

C'est ton exemple alors, puisque le mien fonctionne parfaitement.

Code : Tout sélectionner

<style type="text/css">
ul {
 list-style:none;
}
</style>

<ul>
<li>kjdkj</li>
<li>kjf</li>
</ul>

probleme de priorites

Qui est en ligne