[RESOLU]Même Ptés pour plusieurs DIV dans une liste

Bonjour,

Primo: Quelqu'un peut il m'expliquer pourquoi:

#categ1 ul  ul {
	color: #CC3333;
	list-style-image: none;
	font: 10px Arial, Helvetica, sans-serif;
} 

fonctionne alors que:

div categ1 ul  ul {
	color: #CC3333;
	list-style-image: none;
	font: 10px Arial, Helvetica, sans-serif;
} 

ne fonctionne pas.

Mais bon, ce n'est pas le plus embêtant.
Je voudrais pouvoir fixer les mêmes ptés à deux DIV.
1ere:

#categ1 ul  ul {
	color: #CC3333;
	list-style-image: none;
	font: 10px Arial, Helvetica, sans-serif;
} 

et 2nde:

#categ2 ul  ul {
	color: #CC3333;
	list-style-image: none;
	font: 10px Arial, Helvetica, sans-serif;
} 

Ors si je fais:

#categ1 #categ2 ul  ul {
	color: #CC3333;
	list-style-image: none;
	font: 10px Arial, Helvetica, sans-serif;
} 

, cela ne marche pas de même que:

#categ1, #categ2 ul  ul {
	color: #CC3333;
	list-style-image: none;
	font: 10px Arial, Helvetica, sans-serif;
} 

ne donne rien.

Pourtant :

#categ1 li {
	padding: 0;
	margin: 0 0 0.25em 0;
}

PLUS

#categ2 li {
	padding: 0;
	margin: 0 0 0.25em 0;
}

Si on fait:

#categ1 #categ2 li {
	padding: 0;
	margin: 0 0 0.25em 0;
}

C'est OK

Le fait qu'il y ait des Ptés hérités empêchent il cette concaténation des DIV ?
Pourrais t'on me donner la bonne syntaxe ou les références sur un articles (car je ne sais pas sur quels mots-clés faire mes recherches)
MErci de vos lumières
Plum
Modifié par furet92 (01 Nov 2006 - 23:10)

Salut furet ...

Je ne saurais répondre à ta question concernant la distinction de div et # mais par contre,
je pense que ceci va t'intéresser au plus haut point ...
Il s'agit d'une explication sur l'héritage des balises ...

Ca devrait te permettre d'avoir la réponse à toutes tes questions

Merci Cygnus,

En effet, la cause en est certainement à rechercher au niveau des "héritages".
CAr, justement, dans ce tutorial que tu cites, il est énoncé:

a écrit :
Pour cela, il suffit dans votre code CSS d'écrire les classes les unes à côté des autres séparées par un espace: la première sera parente de la deuxième, qui sera parente de la troisième, etc... à condition que chacune soit imbriquée dans l'autre au sein de votre code HTML

Ors, mes deux DIV sont juxtaposées dans mon code Html (l'une derrière l'autre, les 2 dans une DIV communes.). D'ailleurs, je suis du coup étonné que

#categ1 #categ2 li {
	padding: 0;
	margin: 0 0 0.25em 0;
}

fonctionne, car cela ne devrait donc pas être le cas.
Mais je comprends mieux, peut-être, que dans le cas, où on essaye d'atteindre "ul ul", cela ne fonctionne plus, car ces ul ne sont pas du tout imbriquées, puisque faisant partie de DIV juxtaposées.
Je ne sais pas si je suis compréhensible ...

Peux t'on me confirmer cela ?
Merci
Plum

Salut,

les css c'est surement très bien... Mais les css avec le html sur lequel elles s'appuient c'est mieux
Modifié par clb56 (01 Nov 2006 - 22:13)

Hello,

Je n'ai pas compris ce que signifiait "Ptés" dans tes messages
Pourquoi ne pas prendre le temps d'écrire les mots en entier pour être sûr d'être compréhensible ?

Hello,

Oui, c'est vrai, que j'aurais pu éviter d'écrire en abrégé, mais ce n'est quand même pas du "langage SMS".
Quand au terme "Ptés" pour "Propriétés", je m'exprime peut-être mal, mais c'est tout de même emprunté aux ouvrages O'Reilly (CSS en Action et CSS la Référence). Je désigne par cela, les termes figurant entre les accolades de définition d'une classe ou id d'une CSS.
Si c'est impropre, je veux bien alors votre syntaxe exacte.

Quand à mon problème évoqué précédemment, j'ai donc potasser la section "Héritage" et modifié mon arborescence de CSS.
Et en effet, en appliquant ces propriétés "#...ul ul# à la DIV engloban l'ensemble, cela fonctionne et c'est logique.

Cool, j'aurais appris quelque chose, et ferait désormais plus attention à ces règles d'héritages, que j'avais eu tendance à laisser de côté pour l'instant.

Cordialement
Plum

Bonjour,

Juste quelques précisions...

div categ1 ul  ul {

	color: #CC3333;

	list-style-image: none;

	font: 10px Arial, Helvetica, sans-serif;

Cette syntaxe est invalide, un selecteur de type représente un élément html identifié par son nom de balise, il n'existe pas de balise html "categ1".

#categ1 #categ2 ul  ul {

	color: #CC3333;

	list-style-image: none;

	font: 10px Arial, Helvetica, sans-serif;

} 

Si tu à un ul enfant d'un ul enfant d'un élément identifié par "categ2" enfant d'un élément identifié par "categ1" cette règle va fonctionner.

Il n'y à en revanche aucune chance qu'elle adresse un élément ul enfant d'un élément identifié par "categ1", si c'est ça ton "problème".

Il faudrait employer pour cela :

#categ1 ul  ul , #categ2 ul  ul {}

a écrit :

Pourtant :

#categ1 li {

	padding: 0;

	margin: 0 0 0.25em 0;

}

PLUS

#categ2 li {

	padding: 0;

	margin: 0 0 0.25em 0;

}

Si on fait:

#categ1 #categ2 li {

	padding: 0;

	margin: 0 0 0.25em 0;

}

C'est OK

Non, cette troisième règle continue impertubablement d'adresser un élément li enfant dun élément identifié par "categ2", enfant d'un élément identifié par "categ1".

Elle n'est absolument pas équivalente aux deux règles précédentes, si tu obtiens un résultat correct c'est un artefact de ta structure ou des règles de ton fichier CSS

Jean-pierre
Modifié par jpv (01 Nov 2006 - 23:41)

Merci Jean-Pierre, pour ces explications claires, détaillées, complètes et précises. Elles me sont très utiles.
Je vais étudier cela avec soin, afin de mieux maîtriser cet aspect des CSS.

Cordialement
Plum