Discussion :

[Pymento]

Bonjour à tous, ça fait quand même un petit bout de temps que je fais du css, mais je tombe toujours à chaque projet sur des soucis mystérieux, qui tendent à me faire penser que je ne maîtriserai jamais à 100% cette techno !

Bref, mon pb:

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

.node{
	width:170px;
	text-align:center;
	margin-top:15px;
	height:90%;
	border-radius: 20px;
}
#node_1{
	margin-left:30px;
}
.node li{
	cursor:pointer;
	font-size:20px;
	margin-bottom:10px;
	width:98%;
	list-style:none;
	border-radius: 20px;
	height:30px;
	border:solid 2px black;
        background:url(img/pattern/22.jpg)
}

.node li:hover{
	background:blue;
	color:white;
	border:solid 2px black;
}

.selected{
	background:green;
	color:white;
        border:solid 2px red;

}

HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<div id="node_1" class="node">
			<li onclick="addBox(this,1);" class="selected">toto</li>
			<li onclick="addBox(this,1);">tata</li>
			<li onclick="addBox(this,1);">titi</li>
			<li onclick="addBox(this,1);">tutu</li>
		</div>

Le hover marche très bien, si je met simplement un border à mon .selected, ça ne marche pas, et si je met un background (image ou couleur) à mon li, mon .selected ne le change pas. Pour les autres lignes tout marche...

POURQUOI ??

[Bisûnûrs]

Heu, je n'ai pas bien saisi ton problème ..
Que se passe-t-il exactement ? Quel est le résultat que tu veux obtenir ? Avec quel navigateur observes-tu ton problème ?

[Pymento]

chrome & FF.

Oui dsl j'ai mal expliqué mon pb, maintenant que je l'ai mieux compris, en gros:

Les propriétés border et background (et d'ailleurs les autres) de mes 'li' ne se font pas surcharger pas dans ma classe selected.

Il ne faut pas que je stipule de propriété pour pouvoir la changer dans mon selected.

[Bisûnûrs]

C'est parce que ".node li" est plus précis que ".selected", donc est prioritaire.

Change ton .selected en li.selected et ça fonctionnera mieux.

[Bovino]

Tu as essayé en mettant tout simplement tes li dans un ul ?

[Bisûnûrs]

Ouais, c'pas faux non plus, même si ça ne résoudra pas le problème.

[Pymento]

je les ai enlevés du ul, il ne me servait pas, et il me faisait un padding inutile.
Mais effectivement j'imagine que c'est de toute façon plus 'propre' de les mettre dans un ul en touchant le margin/padding.

Pour la précision,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.selected li{}

marche encore moins, il ne me change même plus les propriétés non-renseignées de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.node li

et d'ailleurs j'avoue que je ne sais pas pourquoi..