Fonctionnement des classes,pas clair :)

salut tout le monde

j'aimerais avoir quelques précisions sur le fonctionnement des classes, car j'ai des parties sur lesquelles ça marche et d'autres pas...

exemple :

j'ai des menus :

<li><a href="#" onclick="new Effect.toggle('menu1','blind','#000');return false;">La Communauté</a>
	<ul id="menu1" style="DISPLAY: none" class="menuli" >
		<li><a href="#">Economie</a></li>
       		<li><a href="#">Ecole</a></li>
        	<li><a href="#">Enfance / Social</a></li>
		<li><a href="#">voirie</a></li>
	</ul>
</li>		

et leur css :

.menuli {
list-style-image: url(images/listfleche2.gif);
margin-left: 15px;
line-height: 1.4;
position: relative;
padding: 0px 0px 0px 0px; 
}


.menuli a:hover {
	color: #FE9416;
}

.menuli li {
	text-align: left ;
	list-style-image: url(images/listfleche2.gif);
	border: none;
	border-width: 0;
	}

la premiere partie s'applique bien (.menuli { etc...) mais les autres ne fonctionnent pas. est ce parce qu'on ne peut pas écrire .menuli a ou .menuli li etc...
de meme mon code n'est peut etre pas bon car je reprécise le "li" alors que c'est un menu li qui se voit appliqué la classe.. je sais pas si je suis très clair
en tout cas si j'essaie d'appliquer les bordures 0 directement dans le premier paragraphe de css (menuli { ) ça ne marche pas

merci à vous pour vos lumières !

edit : dans le meme genre j'avais écrit : #menu1, #menu2, #menu3 {blabla => ça marche, mais si j'écris #menu1, #menu2, #menu3 a {blabla ça ne marche pas, erreur de syntaxe p'tete ?
Modifié par zepokpok (02 Jul 2008 - 10:39)

Salut, alors le CSS c'est en cascade que ça s'applique.

Pour tes liens, si tu veux donner une règle, ça serais de ce type :

#menu1 li a {
blabla
}

Ce code veut dire que j'applique "blabla" à l'enfant "a" contenu dans son papa "li" contenu lui même dans son papa "#menu"

Pour plusieurs élèments qui aurais la même règle css :

#menu1 li a, #menu2 li a, #menu3 li a {
blabla
}
#menu1 li a:hover, #menu2 li a:hover, #menu3 li a:hover {
blabla
}

ha super merci beaucoup !
je pensais que tous les papas avaient le meme enfant en fait, pas très logique finalement

merci encore

edit : par contre je comprends toujours pas pourquoi ma classe menuli ne peut pas etre appliqué avec "menuli a" ou "menuli ul", c'est pas possible ?
Modifié par zepokpok (02 Jul 2008 - 11:42)

En fait ce code

#menu1 li a, #menu2 li a, #menu3 li a {

blabla

}

#menu1 li a:hover, #menu2 li a:hover, #menu3 li a:hover {

blabla

}

Pourrait très bien s'écrire ainsi :

#menu1 li a {

blabla

}
#menu2 li a {

blabla

}
#menu3 li a {

blabla

}

#menu1 li a:hover {

blabla

}
#menu2 li a:hover {

blabla

}
#menu3 li a:hover {

blabla

}

a écrit :

edit : par contre je comprends toujours pas pourquoi ma classe menuli ne peut pas etre appliqué avec "menuli a" ou "menuli ul", c'est pas possible ?

Parce que ton sélecteur n'est pas appliqué au bon enfant, il faut que tu soit plus préci, indique lui le "LI" à qui ca s'applique

en gros :

.menuli li {

list-style-image: url(images/listfleche2.gif);

margin-left: 15px;

line-height: 1.4;

padding: 0; 

}

Modifié par Super_baloo8 (02 Jul 2008 - 11:45)

désolé de jouer les boulets qui comprend rien, mais c'est plutot l'endroit où j'ai mis class=menuli qui déconne ?

pourtant non car le premier morceau fonctionne mais pas la suite...

exemple :

.menuli li{
list-style-image: url(images/listfleche2.gif);
margin-left: 15px;
line-height: 1.4;
position: relative;
padding: 0px 0px 0px 0px; 
border-width: 0;
}


.menuli li a:hover {
	color: #FE9416;
}

j'ai tapé ça, le premier bloc fonctionne mais mais .menuli li a:hover n'est pas pris en compte.. ou alors d'autres parametres de la feuille de style prennent le pas sur lui ?

merci !

edit : ha ben non en fait meme le premier bloc n'est pas pris en compte..
sinon je fais avec l'autre technique que tu cites au début (#menu1 a, #menu2 a, etc...) mais j'aimerais bien comprendre qd meme

edit 2 : ya p'tete confusion dans ma tete aussi entre #menu1 et .menu1 ?
#menu1 j'ai capté le fonctionnement ça va mais je pensais que .menu1 c'est une classe en fait, et que t'as juste à rajouter classe=menu1 dans un div pour lui voir s'appliquer les parametres ? ça évite d'avoir à faire #menu1 a, #menu2 a, menu3 a, etc.. à chaque fois non ?
Modifié par zepokpok (02 Jul 2008 - 11:58)

zepokpok a écrit :
pourtant non car le premier morceau fonctionne mais pas la suite...

Je n'ai pas vu d'erreur de syntaxe. Les deux sont censés fonctionner.

zepokpok a écrit :
ou alors d'autres parametres de la feuille de style prennent le pas sur lui ?

C'est fort possible.
À faire:
1. Lire attentivement Cascade CSS et priorité des sélecteurs;
2. Demander à Firebug quels styles s'appliquent aux éléments visés (mode Inspect). Si les styles n'apparaissent pas du tout, le sélecteur est faux ou il y a une erreur de syntaxe quelque part. Si les styles apparaissent mais en dessous d'autres styles, ils sont écrasés par des styles prioritaires.

Si tu ne trouves pas le problème, mets une page en ligne avec tes essais, qu'on puisse vérifier ça avec nos yeux perçants.
Modifié par Florent V. (02 Jul 2008 - 12:11)

ok super merci je fouille cette piste
et je vous mets un lien si je vois pas le truc.. mais à mon avis c'est un truc précisé avant qui met le souk..

ok je vois le souci. par contre il me manque quelques bases du coup. j'explique le truc :

effectivement il trouvait pas le menuli pour l'appliquer. donc que je précise #menu1.menuli là il me trouve le menuli et fait les bonnes modifs.

le souci c'est que je voulais utiliser les classes (.menuli c'est une classe ?) pour appliquer cette fameuse classe partout où je le souhaite simplement en l'écrivant comme ça :

.menuli li{

list-style-image: url(images/listfleche2.gif);

margin-left: 15px;

line-height: 1.4;

position: relative;

padding: 0px 0px 0px 0px; 

border-width: 0;

}





.menuli li a:hover {

	color: #FE9416;

}

et en précisant class=menuli partout où je le souhaitais en fait .

sinon je vais gérer avec les #menu1 a, #menu2 a etc... mais c'est dommage de louper le truc là

je vous colle le lien vers la page ça sera p'tete plus clair : http://www.cc-pays-sud-gatine.fr/sudgatine2008/
faites pas attention au bordel dans le code, je suis parti d'une feuille que j'avais créé l'an dernier et ya gavé de trucs qui correspondent plus

merci à vous

edit : le but c'est que les sous menus de communauté et commissions à gauche soient sans bordure et que les liens soient d'une autre couleur, je me complique p'tete la vie aussi..
Modifié par zepokpok (02 Jul 2008 - 12:45)

et avec :

ul.menuli li {}

?


Autres choses dans ta css :

a:link, a:visited, a:hover {
	color: #75a42a;
	text-decoration: none;
}

il manque :

a, a:link, a:visited, a:hover, a:focus {
	color: #75a42a;
	text-decoration: none;
}

Mais comme tu as ceci après :

a:hover {
	color: #A4E053;
}

alors le début de ta css seras comme ceci :

a, a:link, a:visited {
	color: #75a42a;
	text-decoration: none;
}
a:hover, a:focus {
	color: #A4E053;
}

Modifié par Super_baloo8 (02 Jul 2008 - 15:41)

merci j'avais pas vu cette erreur, d'ailleurs faut pas regarder de trop près yen a plein d'autres

marche pas avec ul.menuli li nan...

tant pis je vais faire comme on a dit, merci qd meme

tiens au fait, qu'est-ce qui ne fonctionne pas exactement ? Et sous quel navigateur et quel OS ?

grrr c'est grave qd meme là !

je tape :

#menu1 li {
list-style-image: url(images/listfleche2.gif);
margin-left: 150px;
line-height: 1.4;
position: relative;
padding: 0px 0px 0px 0px; 
border-width: 0px;
border: 0px;

}

ça marche pour le premier menu1 mais si je tape

#menu1 li, #menu2 li, #menu3 li, #menu4 li, #menu5 li,{
list-style-image: url(images/listfleche2.gif);
margin-left: 150px;
line-height: 1.4;
position: relative;
padding: 0px 0px 0px 0px; 
border-width: 0px;
border: 0px;

}

ça l'applique nulle part !

en fait ça ne marche ni dans ie ni dans firefox, ce que je voudrais c'est que les sous menus du premier bloc aient une autre couleur de lien et n'aient pas les bordures en pointillés

c'est bon nicouel !

j'ai tapé :

#menuprin li ul li {
font: 70% "Trebuchet MS", sans-serif;
margin-left: 15px;
line-height: 1.4;
border-width: 0px;
border: 0px;
}

c'était hyper simple mais bon quand on est un boulet hein...

un grand merci en tt cas c'est super d'avoir tous vos conseils

Bonjour,

zepokpok a écrit :
(...) mais si je tape

#menu1 li, #menu2 li, #menu3 li, #menu4 li, #menu5 l[#red]i,{[/#]
list-style-image: url(images/listfleche2.gif);
margin-left: 150px;
line-height: 1.4;
position: relative;
padding: 0px 0px 0px 0px; 
border-width: 0px;
border: 0px;

}

ça l'applique nulle part !

Pas de virgule entre la dernière "cible" et l'accolade ouvrante!
Modifié par Felipe (02 Jul 2008 - 17:57)

argh, merci !

mais du coup ça m'a forcé à chercher une autre soluce

Ça me semble bizarre tout ça. Tu es sûr que tes sélecteurs correspondent à ton code HTML? Je ne vois pas de classe "menuli" dans ton code.

Au fait, tu as quelque chose comme:

#menuoutilsm {
	list-style-image: url("images/listfleche.gif" );
}

alors que #menuoutilsm est un élément DIV, donc la propriété list-style-image sera ignorée. Il faudrait plutôt utiliser #menuoutilsm ul ou menuoutilsm ul li comme sélecteur, du moins pour cette propriété-là.