Discussion :

[chris51000]

bonjour,

je n'ai pas trouvé ma réponse dans le forum, j'ouvre donc une nouvelle discussion.
Si elle existe et que je ne l'ai pas trouvé je vous pris de m'excusez.

Je viens de créer un exemple basique qui n'a pas l'air de vouloir fonctionner.

Je crée un dans un fichier HTML des zones avec les balises <div>

j'essai d'application un class à une balise mais je ne comprend pas pourquoi cela ne fonctionne pas.
si je copie colle ma classe dans le header, cela fonctionne mais s'applique a tous les document, ce n'est pas ce que je recherche.

voila mon html :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div id="baniere">baniere</div>
<div id="menu" class="toto">
	<ul>
		<li><a href="#1">Home</a></li> 
		<li><a href="#2">Portfolio</a></li> 
		<li><a href="#3">News</a></li>
		<li><a href="#4">Labs</a></li> 
		<li><a href="#5">Contact</a></li> 
	</ul>
</div>

....

et mon CSS :

Code css :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
.toto{
	ul{ 
		display: table;
		 width: 500px; 
		 margin: 100px auto; 
		 padding: 0;
		 background: dodgerblue;
		 background: -webkit-linear-gradient(deepskyblue, dodgerblue); 
		 background: -moz-linear-gradient(deepskyblue, dodgerblue); 
		 background: -ms-linear-gradient(deepskyblue, dodgerblue); 
		 background: -o-linear-gradient(deepskyblue, dodgerblue); 
		 border-radius: 3px; 
		 box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
	}
	ul li{ display: table-cell; 
	}
	ul li:first-child a{ border-radius: 3px 0 0 3px; } 
	ul li:last-child a{ border-radius: 0 3px 3px 0; }
	ul li a
	{ 
		display: block; 
		text-align: center; 
		color: rgba(0, 0, 0, .7); 
		text-decoration: none; 
		padding: 8px 8px 17px 8px; 
		text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
		box-shadow: 
			0 1px 0 rgba(255, 255, 255, .7) inset, 
			0 -1px 0 hsl(210, 100%, 32%) inset, 
			0 -2px 0 hsl(210, 100%, 38%) inset, 
			0 -3px 0 hsl(210, 100%, 44%) inset, 
			0 -4px 0 hsl(210, 100%, 50%) inset, 
			0 -5px 0 hsl(210, 100%, 60%) inset;
		transition: padding .3s, background .3s;
		position: relative;
	}
 
	ul li a:hover, 
	ul li a:focus{  
		display: block; 
		text-align: center; 
		color: rgba(0, 0, 0, .7); 
		text-decoration: none; 
		padding: 8px 25px 17px 25px;
		text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
		background: rgba(255,255,255,.2);
		box-shadow: 
			0 1px 0 rgba(255, 255, 255, .7) inset, 
			0 -1px 0 hsl(210, 100%, 32%) inset, 
			0 -2px 0 hsl(210, 100%, 38%) inset, 
			0 -3px 0 hsl(210, 100%, 44%) inset, 
			0 -4px 0 hsl(210, 100%, 50%) inset, 
			0 -5px 0 hsl(210, 100%, 60%) inset;
		transition: all .3s 0s;
 
	}
	ul li a:active{ 
		background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1)); 
		box-shadow: 0 0 2px rgba(0,0,0,.3) inset; 
	}
 
	ul li a::before{ 
		content: ''; 
		position: absolute; 
		left: 50%; 
		bottom: 9px; 
		margin-left: -2px; 
		width: 4px; 
		height: 4px; 
		border-radius: 50%; 
		background: rgba(0, 0, 0, .5); 
	}
 
	ul li a:hover::before, 
	ul li a:focus::before{ 
		background: white; 
		box-shadow: 0 0 2px white, 0 -1px 0 rgba(0, 0, 0, .4); 
		}
}

la question est :

savez vous pourquoi le style ne semble pas s'appliquer ?

Merci
Christophe

[Muchos]

Sauf si vous utilisez un pré-processeur, CSS ne s'imbrique pas ainsi.

Autrement dit :

Code css :

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

1
2
3
.foo {
  bar { }
}

ne permet pas d'atteindre <bar class="foo">.

[chris51000]

merci beaucoup pour la réponse.
Peut etre aurais tu un bon tuto a me conseiller ou me donner un exemple.

Merci beaucoup

[chris51000]

en fait je ne fait pas tout a fait la même chose :

Code css :

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

1
2
3
#foo {
  bar {}
}

Code html :

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

1
2
3
 <div id=menu class="foo> {
  <bar>....</bar> 
}

[Muchos]

Ça ne va toujours pas, et c'est illogique : il faudrait à la rigueur #menu ou .foo comme sélecteur.

Je vous conseille de lire le tuto Premiers pas avec CSS, et de valider votre code HTML/CSS.

[rvm31]

si je prend le le premier CSS que tu as posté il faut faire

Code :

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

1
2
3
.toto ul{
 
}

ne pas mettre de parenthèses entre la class toto et l'UL.
l'UL dépend de toto. tu peux aussi n'écrire que .toto cela s'appliquera à tout ce que contient la classe toto

[JefReb]

Oui mais en écrivant:

Code css :

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

1
2
3
.toto ul {   }
/*ou*/
ul.toto {  }

on peut affiner davantage le style lorsqu'il y a des sous menus par exemple

Code css :

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

1
2
3
ul.toto ul       { line-height:0.7em; }
/*ou*/
.toto ul ul { line-height:0.7em; }

Dans ce cas, il faut coder

Code html :

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

 <ul class='toto'> ......