Le CSS ne s'applique pas sur ma liste

**cedricleval** · 28/08/2021, 11h08

Bonjour,

Je n'arrive pas à appliquer un style (par exemple ici mettre le texte en vert) sur une liste (que j'ai mis dans un id="liste").
Voyez vous quel est le probleme dans mon code svp?

Mon code HTML :

Code HTML :

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="fr">
<head>
	<title> Club de Tae Kwon DO d'ici</title>
	<link rel="stylesheet" type="text/css" href="./css/revision1.css">
 
</head>
<body>
	<p>
		<h1>Bienvenue sur le site</h1>
		<audio autoplay controls="">
			<source src="C:\Users\CLV\Documents\Workspace\web\ressources_diverses\Van-Halen-Jump-Official-Music-Video.mp3" type="audio/mp3">
		</audio>
	</p>
	<article id="presentation">
		<section id="definition">
			<h2><a href ="https://fr.wikipedia.org/wiki/Taekwondo"; target = "-blank">Le TaeKwonDo, c'est quoi ?</a></h2>
			<p>
				ernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nullaSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nost
			</p>
		</section>
		<section id="ceintures">
			<h2>Les principales ceintures par ordre de progression :</h2>
		<ol>
			<li>Blanche</li>
			<li>Jaune</li>
			<li>Orange</li>
			<li>Vert</li>
			<li>Bleu</li>
			<li>Marron</li>
			<li>Noire <i>(Dans...)</i> </li>
		</ol>
		</section>
	</article>
	<article id="professeurs">
		<p>
			<h2>Voici les principaux professeurs :</h2>
		</p>
		<div class = "conteneur-prof">
			<div class = "contenu-prof">
				<div id="liste">
					<ul>
						<li><a href ="#chang" target = "-blank">Maitre Chang</a></li>
						<li><a href ="#lee" target = "-blank">Maitre Lee</a></li>
						<li><a href ="#miyagi" target = "-blank">Maitre Miyagi</a></li>
					</ul>
				</div>
			</div>
		</div>
 
		<p>
			<h3 class ="master" id="chang">En savoir plus sur <b>Maitre Chang</b></h3>
			<p>
				<img id="imageMaitre" src="C:\Users\CLV\Documents\Workspace\web\ressources_diverses\Chang.jpg"/>
				Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nullaSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nullaSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
			</p>
			<p>
				<h4>Video de presentation du maitre</h4>
				<video controls autoplay width="320" height="240">
					<source src="C:\Users\CLV\Documents\Workspace\web\ressources_diverses\taekwondo-Reunion-mobilisation.mp4" type="video/mp4">
				</video>
			</p>
		</p>
		<p>
			<h3 class ="master" id="lee">En savoir plus sur <b>Maitre Lee</b></h3>
			<p>
				<img id="imageMaitre" src="C:\Users\CLV\Documents\Workspace\web\ressources_diverses\Lee.jpg"/>
				Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nullaSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nullaSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
			</p>
			<p>
				<h4>Video de presentation du maitre</h4>
				<video controls autoplay width="320" height="240">
					<source src="C:\Users\CLV\Documents\Workspace\web\ressources_diverses\taekwondo-Reunion-mobilisation.mp4" type="video/mp4">
				</video>
			</p>
 
		</p>
		<p>
			<h3 class ="master" id="miyagi">En savoir plus sur <b>Maitre Miyagi</b></h3>
			<p>
				<img id="imageMaitre" src="C:\Users\CLV\Documents\Workspace\web\ressources_diverses\Miyagi.jpg"/>
				Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nullaSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nullaSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
			</p>
			<p>
				<h4>Video de presentation du maitre</h4>
				<video controls autoplay width="320" height="240">
					<source src="C:\Users\CLV\Documents\Workspace\web\ressources_diverses\taekwondo-Reunion-mobilisation.mp4" type="video/mp4">
				</video>
			</p>
 
		</p>
	</article>
</body>
 
<footer>
	<p>
		<a href = "mailto:cedriclevalegant@gmail.com">Contactez nous</a></p>
	<p>
		<a href = "./voyageJapon.html"; target = "-blank">En savoir plus sur le Japon !</a>
	</p>
	<p>
		<h4 id ="logo" >Logo TKD</h4>
		<object
			type="application/pdf"
			data="C:\Users\CLV\Documents\Workspace\web\ressources_diverses\taekwondoLogo.pdf"
			>
 
		</object>
	</p>
</footer>
</html>

Mon code 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
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
		body {
			color: darkblue;
  		}
		p {
			color: blue;
			font-family: Calibri;/* <!...Voir POURQUOI FONT FAMIL MARCHE PAS DANS BODY,FOOTER,P...>*/
		}
		h1,h2 {
			background-color: lightblue;
			padding:red solid 20px;
			align-content: ;
			font-size: 2em;
			text-align: center;
			font-weight: normal;	
			font-family: Times New Roman;
		}
		.master {
			background-color: lightblue;
		}
		#logo {
			background-color: pink;
		}
		#presentation {
			background-color: red;
			border: solid 2px green;
			display: inline-block;
		}	
		#definition {
			float: left;
			background-color: yellow;
			width: 49%;
			display: inline-block;
		}	
		#ceintures {
			float: right;
			background-color: orange;
			width: 49%;
			display: inline-block;
 
		}
		#professeurs {
			border: solid 2px green;
			display: inline-block;
 
		#imageMaitre {
			float:left;
			width: 10em;
			border: 2px solid darkblue;
			padding: 0px;
			margin:5px;
		}
		#liste {
			color: green;
		}
 
		.conteneur-prof {
			display: table;
			background-color: lightgreen;
			color:darkgreen;
			width: 50%;
			text-align: center;
			height: 180px;
		}
		.contenu-prof {
			display: table-cell;
			vertical-align: middle;
/*			position: relative;
			top:50%;
			transform: translateY(-50%);*/
/* On met soit display tabel et table-cell, soit la position relative et le transform */
 
		}

Ca vient surement de :

Code :

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

1
2
3
		#liste {
			color: green;
		}

Mais je ne vois pas...

MErci

Invité · 28/08/2021, 12h20

Bonjour,

Il manque la balise de fermeture } dans ton code CSS au niveau de l'id #professeurs.

Tous les liens on un style définie par le navigateur par default gérés par le navigateur pour bien les différencier.
Pour utiliser ton style de liste tu peux désactiver le style par défaut en utilisant ce code dans ton CSS:

Code CSS :

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

1
2
3
:link, :visited{
     color: inherit;
}

Le CSS ne s'applique pas sur ma liste

CSS

Discussions similaires

Partager

Partager