Mes images ne s'affichent pas

**Flash30** · 03/04/2023, 16h25

Bonjour,

Sachant que je débute avec le logiciel Visual Code Studio, je crée un site web, j'ai un blocage au niveau des images qui ne s'affichent pas pourtant le lien est bien précis, besoin d'aide pour ce cas-là :

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
<div class=slideshow>
 
<input name="slideshow" id=slide_img1 type="radio" checked>
<input name="slideshow" id=slide_img2 type="radio">
<input name="slideshow" id=slide_img3 type="radio">
<input name="slideshow" id=slide_img4 type="radio"> 
 
<ul>
<li class=img1>
<img src="C:\Users\M409535\Desktop\Portfolio Visual Code\Illustration 2D\Autocollants AF\Air France-A320.jpg" alt>
</li>
<li class=img2>
<img src="C:\Users\M409535\Desktop\Portfolio Visual Code\Illustration 2D\Autocollants AF\Air France-A330.jpg" alt>
</li>
</ul>
 
<div class=precedent>
<label class=img1 for=slide_img1></label>
<label class=img2 for=slide_img2></label>
<label class=img3 for=slide_img3></label>
<label class=img4 for=slide_img4></label>
<label class=img5 for=slide_img5></label>
<label class=img6 for=slide_img6></label>
<label class=img7 for=slide_img7></label>
<label class=img8 for=slide_img8></label>
<label class=img9 for=slide_img9></label>
</div>
 
<div class=suivant>
<label class=img1 for=slide_img1></label>
<label class=img2 for=slide_img2></label>
<label class=img3 for=slide_img3></label>
<label class=img4 for=slide_img4></label>
<label class=img5 for=slide_img5></label>
<label class=img6 for=slide_img6></label>
<label class=img7 for=slide_img7></label>
<label class=img8 for=slide_img8></label>
<label class=img9 for=slide_img9></label>
</div>
 
<div class=puces>
<label class="img1" for=slide_img1>
<span class=actif_puces></span>
</label>
<label class="img2" for=slide_img2>
<span class=actif_puces></span>
</label>
<label class="img3" for=slide_img3>
<span class=actif_puces></span>
</label>	
<label class="img4" for=slide_img4>
<span class=actif_puces></span>
</label>
</div>
 
</div>	
 
</body>

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
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
*,
*::after
*::before {
box-sizing: border-box;
}
 
.img {
	float:center;
	max-height:800px;
	display:grid;
	margin:0px;
}
 
input[type="radio"] {
	position:absolute;
	left:-100vw;
}
 
label {
	cursor:pointer;
}
 
.slideshow {
	display: grid;
	overflow: hidden;
	max-width:600px;
	height: auto;
	aspect-ratio:3/2;
	margin:2rem auto;
}
 
.slideshow > * {
grid-area: slider;
}	
 
.slideshow  ul { 
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
}
 
.slideshow  ul  li{
flex: 0 0 100%;
transition: transform .25s;
will-change: transform;
}
 
.slideshow  ul  li	img {
  object-fit: cover;
  width: 600%;
  height: 100%;
  user-select: none;
}
 
#slide_img1:checked ~  ul > li {transform: translatex(0%)}  
#slide_img2:checked ~  ul > li {transform: translatex(-100%)}  
#slide_img3:checked ~  ul > li {transform: translatex(-200%)}
#slide_img4:checked ~  ul > li {transform: translatex(-300%)}
#slide_img5:checked ~  ul > li {transform: translatex(-400%)}
#slide_img6:checked ~  ul > li {transform: translatex(-500%)}
#slide_img7:checked ~  ul > li {transform: translatex(-600%)}
 
/******************fleches**************************/
 
.precedent{	
z-index:1;place-self: center left;	
}
.suivant{	
z-index:1;place-self: center right;
}
 
.slideshow > .precedent > label,
.slideshow > .suivant > label,
 
{
display:none;
background-color:hsl(0,0%,15%);
justify-content:center;
align-content:center;
}   
 
.slideshow > .precedent > label:after{content:'←'}
.slideshow > .suivant > label:after{content:'→'}
 
.slideshow > .precedent > label:after,
.slideshow > .suivant > label:after,
 
{
display:flex;
align-items:center;
font-size:2rem;
font-size:clamp(1rem, 2vw, 3rem);
color:hsl(0, 0%, 100%);
}	   
 
 
#slide_img1:checked ~ .precedent > label.img6,
#slide_img1:checked ~ .suivant > label.img2,
#slide_img2:checked ~ .precedent > label.img1,
#slide_img2:checked ~ .suivant > label.img3,
#slide_img3:checked ~ .precedent > label.img2,
#slide_img3:checked ~ .suivant > label.img4,
#slide_img4:checked ~ .precedent > label.img3,
#slide_img4:checked ~ .suivant > label.img5
#slide_img5:checked ~ .precedent > label.img4,
#slide_img5:checked ~ .suivant > label.img6,
 
{
display:flex;
width:2rem;
height:2rem;
width:clamp(2rem, 8vw, 4rem);
height:clamp(2rem, 8vw, 4rem);
}
 
/***************************navigation puces bas********************************/
 
.puces {
z-index: 1;
display: flex;
gap: 1rem;
padding: 1rem;
place-self: end center;
}
 
.puces label{
background-color:#07A8BF;
border-radius:50%;
width: 1rem;
height: 1rem;
}
 
/********************simulation lien actif sur les puces******************************/
 
#slide_img1:checked ~ .puces > label.img1 > .actif_puces,
#slide_img2:checked ~ .puces > label.img2 > .actif_puces,
#slide_img3:checked ~ .puces > label.img3 > .actif_puces,
#slide_img4:checked ~ .puces > label.img4 > .actif_puces,
#slide_img5:checked ~ .puces > label.img5 > .actif_puces,
#slide_img6:checked ~ .puces > label.img6 > .actif_puces,
#slide_img7:checked ~ .puces > label.img7 > .actif_puces,
 
{
border-radius: inherit;	
display: flex;
height: inherit;
width: inherit;
background-color:#7C7D7D;
}
 
.illustration {
	text-align:center;
	color:#07A8BF;
	padding:40px;
	opacity:0.8;
	font-size:50px;
	font-family:'Indie Flower', cursive ;
}
 
.Retour {
	margin:auto;
	text-transform:uppercase;
	font-size:14px;
	padding:6px 10px;
	text-decoration:none;
	width:80px;
	background:linear-gradient(#07A8BF,#07A8BF);
	transition:.5s ease-in;
	font-family:'Indie Flower', cursive ;
}

Merci pour votre aide,

Flash30

**laurentSc** · 03/04/2023, 17h00

Bonjour,
bienvenu chez DVP

1- merci de mettre en forme ton message avec le bouton pour le code (#) :

Code html :

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

<!-- du code html -->

Code css :

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

/* du code CSS */

2- Ce code sort à mon avis d'un tuto ; peux tu en donner le lien ?

3- Visual Studio Code (VSC) est un EDI comme un autre.

**Flash30** · 03/04/2023, 17h09

Bonjour @laurentSC,

J'ai bien noté :

en 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
<!DOCTYPE html> 
	<html lang="fr" > 
 
<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="binou.css">
		<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed&display=swap" rel="stylesheet">
</head>
<body>
<div class=slideshow>
 
<input name="slideshow" id=slide_img1 type="radio" checked>
<input name="slideshow" id=slide_img2 type="radio">
<input name="slideshow" id=slide_img3 type="radio">
<input name="slideshow" id=slide_img4 type="radio"> 
 
<ul>
<li class=img1>
<img src="C:\Users\M409535\Desktop\Portfolio Visual Code\Illustration 2D\Autocollants AF\Air France-A320.jpg" alt>
</li>
<li class=img2>
<img src="C:\Users\M409535\Desktop\Portfolio Visual Code\Illustration 2D\Autocollants AF\Air France-A330.jpg" alt>
</li>
<li class=img3>
<img src="C:\Users\M409535\Desktop\Portfolio Visual Code\Illustration 2D\Autocollants AF\Air France-A340.jpg" alt>
</li>
</li>
</ul>
 
<div class=precedent>
<label class=img1 for=slide_img1></label>
<label class=img2 for=slide_img2></label>
<label class=img3 for=slide_img3></label>
<label class=img4 for=slide_img4></label>
<label class=img5 for=slide_img5></label>
<label class=img6 for=slide_img6></label>
<label class=img7 for=slide_img7></label>
<label class=img8 for=slide_img8></label>
<label class=img9 for=slide_img9></label>
</div>
 
<div class=suivant>
<label class=img1 for=slide_img1></label>
<label class=img2 for=slide_img2></label>
<label class=img3 for=slide_img3></label>
<label class=img4 for=slide_img4></label>
<label class=img5 for=slide_img5></label>
<label class=img6 for=slide_img6></label>
<label class=img7 for=slide_img7></label>
<label class=img8 for=slide_img8></label>
<label class=img9 for=slide_img9></label>
</div>
 
<div class=puces>
<label class="img1" for=slide_img1>
<span class=actif_puces></span>
</label>
<label class="img2" for=slide_img2>
<span class=actif_puces></span>
</label>
<label class="img3" for=slide_img3>
<span class=actif_puces></span>
</label>	
<label class="img4" for=slide_img4>
<span class=actif_puces></span>
</label>
</div>
 
</div>	
 
</body>
</html>

en 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
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
body {
  background-color:#E4E4E2;
}
 
*,
*::after
*::before {
box-sizing: border-box;
}
 
.img {
	float:center;
	max-height:800px;
	display:grid;
	margin:0px;
}
 
input[type="radio"] {
	position:absolute;
	left:-100vw;
}
 
label {
	cursor:pointer;
}
 
.slideshow {
	display: grid;
	overflow: hidden;
	max-width:600px;
	height: auto;
	aspect-ratio:3/2;
	margin:2rem auto;
}
 
.slideshow > * {
grid-area: slider;
}	
 
.slideshow  ul { 
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
}
 
.slideshow  ul  li{
flex: 0 0 100%;
transition: transform .25s;
will-change: transform;
}
 
.slideshow  ul  li	img {
  object-fit: cover;
  width: 600%;
  height: 100%;
  user-select: none;
}
 
#slide_img1:checked ~  ul > li {transform: translatex(0%)}  
#slide_img2:checked ~  ul > li {transform: translatex(-100%)}  
#slide_img3:checked ~  ul > li {transform: translatex(-200%)}
#slide_img4:checked ~  ul > li {transform: translatex(-300%)}
#slide_img5:checked ~  ul > li {transform: translatex(-400%)}
#slide_img6:checked ~  ul > li {transform: translatex(-500%)}
#slide_img7:checked ~  ul > li {transform: translatex(-600%)}
 
/******************fleches**************************/
 
.precedent{	
z-index:1;place-self: center left;	
}
.suivant{	
z-index:1;place-self: center right;
}
 
.slideshow > .precedent > label,
.slideshow > .suivant > label,
 
{
display:none;
background-color:hsl(0,0%,15%);
justify-content:center;
align-content:center;
}   
 
.slideshow > .precedent > label:after{content:'←'}
.slideshow > .suivant > label:after{content:'→'}
 
.slideshow > .precedent > label:after,
.slideshow > .suivant > label:after,
 
{
display:flex;
align-items:center;
font-size:2rem;
font-size:clamp(1rem, 2vw, 3rem);
color:hsl(0, 0%, 100%);
}	   
 
 
#slide_img1:checked ~ .precedent > label.img6,
#slide_img1:checked ~ .suivant > label.img2,
#slide_img2:checked ~ .precedent > label.img1,
#slide_img2:checked ~ .suivant > label.img3,
#slide_img3:checked ~ .precedent > label.img2,
#slide_img3:checked ~ .suivant > label.img4,
#slide_img4:checked ~ .precedent > label.img3,
#slide_img4:checked ~ .suivant > label.img5
#slide_img5:checked ~ .precedent > label.img4,
#slide_img5:checked ~ .suivant > label.img6,
 
{
display:flex;
width:2rem;
height:2rem;
width:clamp(2rem, 8vw, 4rem);
height:clamp(2rem, 8vw, 4rem);
}
 
/***************************navigation puces bas********************************/
 
.puces {
z-index: 1;
display: flex;
gap: 1rem;
padding: 1rem;
place-self: end center;
}
 
.puces label{
background-color:#07A8BF;
border-radius:50%;
width: 1rem;
height: 1rem;
}
 
/********************simulation lien actif sur les puces******************************/
 
#slide_img1:checked ~ .puces > label.img1 > .actif_puces,
#slide_img2:checked ~ .puces > label.img2 > .actif_puces,
#slide_img3:checked ~ .puces > label.img3 > .actif_puces,
#slide_img4:checked ~ .puces > label.img4 > .actif_puces,
#slide_img5:checked ~ .puces > label.img5 > .actif_puces,
#slide_img6:checked ~ .puces > label.img6 > .actif_puces,
#slide_img7:checked ~ .puces > label.img7 > .actif_puces,
 
{
border-radius: inherit;	
display: flex;
height: inherit;
width: inherit;
background-color:#7C7D7D;
}
 
.illustration {
	text-align:center;
	color:#07A8BF;
	padding:40px;
	opacity:0.8;
	font-size:50px;
	font-family:'Indie Flower', cursive ;
}
 
.Retour {
	margin:auto;
	text-transform:uppercase;
	font-size:14px;
	padding:6px 10px;
	text-decoration:none;
	width:80px;
	background:linear-gradient(#07A8BF,#07A8BF);
	transition:.5s ease-in;
	font-family:'Indie Flower', cursive ;
}

En effet, j'avais oublié de fermer en </html> en page HTML mais les images ne s'affichent toujours pas.

Y a peut-être autre chose que j'aurais ajouté ou à supprimer ? Je suis preneuse.

Merci à vous @LaurentSC

Flash30.

**gesualda** · 04/04/2023, 07h43

Bonjour Flash30

Sans certitude, mais je crois savoir que les liens et titres n'aiment pas les espaces dans les noms de dossier et/ou de fichiers, Je t'ai mis en rouge les espaces. :

Code :

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

C:\Users\M409535\Desktop\Portfolio Visual_Code\Illustration 2D\Autocollant_AF\Air_France-A320.jpg

Donc essaye de construire un "dossier, sous dossier et nom de fichier sans espace. Tu peux utiliser " _ " pour les dossiers et/ou pour les fichiers " - ". Je pense que tu aura d'autres conseils des intervenants !

Autre point : un peu de lecture pour les différentes façon de présenter un lien dans un site =>
https://www.b-website.com/chemins-absolus-relatifs/

Bon courage

**laurentSc** · 04/04/2023, 09h01

Envoyé par gesualda

les liens et titres n'aiment pas les espaces dans les noms de dossier et/ou de fichiers

Je le confirme

**Flash30** · 04/04/2023, 13h52

@gesualda, @LaurentSC,

Merci pour vos retours, je vais tester.

Je vous dirai, et un grand merci pour les liens, je comprends parfaitement.

Flash30.

**Flash30** · 04/04/2023, 14h56

@gesualda, @LaurentSC,

Ca ne fonctionne pas pourtant j'ai bien corrigé le chemin grâce à tes liens, après la différence c'est peut-être \ ou / ?

Je vous montre :
en 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
<!DOCTYPE html> 
	<html lang="fr" > 
 
<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="binou.css">
		<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed&display=swap" rel="stylesheet">
</head>
<body>
<div class=slideshow>
 
<input name="slideshow" id=slide_img1 type="radio" checked>
<input name="slideshow" id=slide_img2 type="radio">
<input name="slideshow" id=slide_img3 type="radio">
<input name="slideshow" id=slide_img4 type="radio"> 
 
<ul>
<li class=img1>
<img src="C:\Users\M409535\Desktop\PortfolioVisualCode\Illustration2D\Autocollants_AF\AirFrance_A320.jpg" alt>
</li>
<li class=img2>
<img src="C:\Users\M409535\Desktop\PortfolioVisualCode\Illustration2D\Autocollants_AF\AirFrance_A330.jpg" alt>
</li>
<li class=img3>
<img src="C:\Users\M409535\Desktop\PortfolioVisualCode\Illustration2D\Autocollants_AF\AirFrance_A340.jpg" alt>
</li>
</ul>
 
<div class=precedent>
<label class=img1 for=slide_img1></label>
<label class=img2 for=slide_img2></label>
<label class=img3 for=slide_img3></label>
<label class=img4 for=slide_img4></label>
<label class=img5 for=slide_img5></label>
<label class=img6 for=slide_img6></label>
<label class=img7 for=slide_img7></label>
<label class=img8 for=slide_img8></label>
<label class=img9 for=slide_img9></label>
</div>
 
<div class=suivant>
<label class=img1 for=slide_img1></label>
<label class=img2 for=slide_img2></label>
<label class=img3 for=slide_img3></label>
<label class=img4 for=slide_img4></label>
<label class=img5 for=slide_img5></label>
<label class=img6 for=slide_img6></label>
<label class=img7 for=slide_img7></label>
<label class=img8 for=slide_img8></label>
<label class=img9 for=slide_img9></label>
</div>
 
<div class=puces>
<label class="img1" for=slide_img1>
<span class=actif_puces></span>
</label>
<label class="img2" for=slide_img2>
<span class=actif_puces></span>
</label>
<label class="img3" for=slide_img3>
<span class=actif_puces></span>
</label>	
<label class="img4" for=slide_img4>
<span class=actif_puces></span>
</label>
</div>
 
</div>	
 
</body>
</html>

en 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
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
body {
  background-color:#E4E4E2;
}
 
*,
*::after
*::before {
box-sizing: border-box;
}.img {
	float:center;
	max-height:800px;
	display:grid;
	margin:0px;
}
 
input[type="radio"] {
	position:absolute;
	left:-100vw;
}
 
label {
	cursor:pointer;
}
 
.slideshow {
	display: grid;
	overflow: hidden;
	max-width:600px;
	height: auto;
	aspect-ratio:3/2;
	margin:2rem auto;
}
 
.slideshow > * {
grid-area: slider;
}	
 
.slideshow  ul { 
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
}
 
.slideshow  ul  li{
flex: 0 0 100%;
transition: transform .25s;
will-change: transform;
}
 
.slideshow  ul  li	img {
  object-fit: cover;
  width: 600%;
  height: 100%;
  user-select: none;
}
 
#slide_img1:checked ~  ul > li {transform: translatex(0%)}  
#slide_img2:checked ~  ul > li {transform: translatex(-100%)}  
#slide_img3:checked ~  ul > li {transform: translatex(-200%)}
#slide_img4:checked ~  ul > li {transform: translatex(-300%)}
#slide_img5:checked ~  ul > li {transform: translatex(-400%)}
#slide_img6:checked ~  ul > li {transform: translatex(-500%)}
#slide_img7:checked ~  ul > li {transform: translatex(-600%)}
 
/******************fleches**************************/
 
.precedent{	
z-index:1;place-self: center left;	
}
.suivant{	
z-index:1;place-self: center right;
}
 
.slideshow > .precedent > label,
.slideshow > .suivant > label,
 
{
display:none;
background-color:hsl(0,0%,15%);
justify-content:center;
align-content:center;
}   
 
.slideshow > .precedent > label:after{content:'←'}
.slideshow > .suivant > label:after{content:'→'}
 
.slideshow > .precedent > label:after,
.slideshow > .suivant > label:after,
 
{
display:flex;
align-items:center;
font-size:2rem;
font-size:clamp(1rem, 2vw, 3rem);
color:hsl(0, 0%, 100%);
}	   
 
 
#slide_img1:checked ~ .precedent > label.img6,
#slide_img1:checked ~ .suivant > label.img2,
#slide_img2:checked ~ .precedent > label.img1,
#slide_img2:checked ~ .suivant > label.img3,
#slide_img3:checked ~ .precedent > label.img2,
#slide_img3:checked ~ .suivant > label.img4,
#slide_img4:checked ~ .precedent > label.img3,
#slide_img4:checked ~ .suivant > label.img5
#slide_img5:checked ~ .precedent > label.img4,
#slide_img5:checked ~ .suivant > label.img6,
 
{
display:flex;
width:2rem;
height:2rem;
width:clamp(2rem, 8vw, 4rem);
height:clamp(2rem, 8vw, 4rem);
}
 
/***************************navigation puces bas********************************/
 
.puces {
z-index: 1;
display: flex;
gap: 1rem;
padding: 1rem;
place-self: end center;
}
 
.puces label{
background-color:#07A8BF;
border-radius:50%;
width: 1rem;
height: 1rem;
}
 
/********************simulation lien actif sur les puces******************************/
 
#slide_img1:checked ~ .puces > label.img1 > .actif_puces,
#slide_img2:checked ~ .puces > label.img2 > .actif_puces,
#slide_img3:checked ~ .puces > label.img3 > .actif_puces,
#slide_img4:checked ~ .puces > label.img4 > .actif_puces,
#slide_img5:checked ~ .puces > label.img5 > .actif_puces,
#slide_img6:checked ~ .puces > label.img6 > .actif_puces,
#slide_img7:checked ~ .puces > label.img7 > .actif_puces,
 
{
border-radius: inherit;	
display: flex;
height: inherit;
width: inherit;
background-color:#7C7D7D;
}
 
.illustration {
	text-align:center;
	color:#07A8BF;
	padding:40px;
	opacity:0.8;
	font-size:50px;
	font-family:'Indie Flower', cursive ;
}
 
.Retour {
	margin:auto;
	text-transform:uppercase;
	font-size:14px;
	padding:6px 10px;
	text-decoration:none;
	width:80px;
	background:linear-gradient(#07A8BF,#07A8BF);
	transition:.5s ease-in;
	font-family:'Indie Flower', cursive ;
}

En style CCS, j'ai mis Binou.css

Soorryy de vous déranger,

Merci pour votre retour, et de votre aide.

Flash30.

**laurentSc** · 04/04/2023, 15h41

Curieux, mais peux tu tenir compte de mes points 1 et surtout 2 du post #2 ?

**Flash30** · 04/04/2023, 16h17

Bonjour LaurentSC,

peux tu tenir compte de mes points 1 et surtout 2 du post #2 ?
=> réponse du 2, je ne sais plus où je l'ai trouvé, c'est une sorte de carrousel pour mettre les photos.

Merci,

Flash30

**laurentSc** · 04/04/2023, 16h38

Je crois avoir trouvé : https://www.guyom-design.com/blog/de...der-css-input/. C'est ça, non ?

**laurentSc** · 04/04/2023, 16h47

Ton objectif étant de créer un caroussel d'images : https://codepen.io/EngCode/pen/Vvppdy

**NoSmoking** · 04/04/2023, 17h03

Bonjour,

Envoyé par laurentSc

Je crois avoir trouvé :...

Envoyé par laurentSc

Ton objectif étant de créer un caroussel d'images :...

Là Laurent tu embrouilles tout le monde, le problème étant visiblement la déclaration du chemin d'accès aux images qui ne correspond pas à l'attendu.

@Flash30 :

Mets tes images dans un répertoire qui est enfant de celui où se trouve ta page HTML, par exemple :

index.html
└- images
  ├ image_00.jpg
  ├ image_01.jpg 
  ├ image_02.jpg
  └ image_03.jpg

tes images seront accessibles comme ceci :

Code html :

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

1
2
3
4
<img src="images/image_00.jpg" alt ="">
<img src="images/image_01.jpg" alt ="">
<img src="images/image_02.jpg" alt ="">
<img src="images/image_03.jpg" alt ="">

ici le chemin est donné en relatif, par rapport au fichier qui appelle.

Il va falloir que tu t'y fasses : Les URL absolues et les URL relatives

**laurentSc** · 04/04/2023, 17h15

Salut NoSmoking,
j'ai récemment rencontré un cas où les adresses relatives ne fonctionnaient qu'avec un tel code :

Code html :

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

1
2
3
4
<img src="./images/image_00.jpg" alt ="">
<img src="./images/image_01.jpg" alt ="">
<img src="./images/image_02.jpg" alt ="">
<img src="./images/image_03.jpg" alt ="">

Le navigateur (Firefox ou Chrome) n'affichait les images qu'avec cette syntaxe ./

**ddaweb** · 04/04/2023, 21h25

Le navigateur (Firefox ou Chrome) n'affichait les images qu'avec cette syntaxe ./

Je viens de tester sur FF, pas de soucis avec ou sans ./.
La norme HTML est :
- ./ ou rien : rester dans le répertoire et suivre l'arborescence
- ../ remonter d'un répertoire et suivre l’arborescence

FF étant assez strict à suivre la norme HTML (même le navigateur qui la suit le plus), je ne voyais pas pourquoi cela ne fonctionnerait pas sans !

**gesualda** · 05/04/2023, 07h27

Flash30, Petite erreur dans les liens concernant ALT qui doit être inscrit comme suit :

Code html :

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

<img src="C:\Users\M409535\Desktop\PortfolioVisualCode\Illustration2D\Autocollants_AF\AirFrance_A320.jpg" alt="">

Pense à fermer ces attributs. "Alt" sert à une description courte de ton image.

**Flash30** · 05/04/2023, 10h03

Bonjour,

@LaurentSC, @NoSmoking, @ddaweb, @gesualda,

D'abord, je vous remercie de vos réponses, je suis motivée grâce à vous pour trouver une solution.

J'ai testé de celui de @NoSmoking sur le chemin en relatif, j'ai dû changer de noms de répertoires pour tester :
<img src="images/image_00.jpg" alt="">, ça n'a rien donné, mais par contre le chemin est bon en mettant l'exemple de @LaurentSC et de @ddaweb en remontant d'un répertoire et bien suivre l'arborescence.

@NoSmoking, merci pour le lien, je comprends mieux pour le chemin en relatif et en absolue pour la page HTML ^^

@gesualda, en effet, j'ai bien fermé les attributs et mettre alt=""

Par conséquent ça s'est affiché en quelque sorte, pas d'images mais en tout blanc. Argh

on n'est pas très loin de la solution.

Je vous montre les codes :
en page 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
<!DOCTYPE html> 
	<html lang="fr" > 
 
<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="binou.css">
		<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed&display=swap" rel="stylesheet">
 
</head>
 
<body>
<div class=slideshow>
 
<input name="slideshow" id=slide_img1 type="radio" checked>
<input name="slideshow" id=slide_img2 type="radio">
<input name="slideshow" id=slide_img3 type="radio">
<input name="slideshow" id=slide_img4 type="radio"> 
 
<ul>
<li class=img1>
<img src="..\images\image_01.jpg" alt="">
</li>
<li class=img2>
<img src="..\images\image_02.jpg" alt="">
</li>
<li class=img3>
<img src="..\images\image_03.jpg" alt="">
</li>
<li class=img4>
<img src="..\images\image_04.jpg" alt="">
</li>
<li class=img5>
<img src="..\images\image_06.jpg" alt="">
</li>
<li class=img6>
<img src="..\images\image_07.jpg" alt="">
</li>
<li class=img7>
<img src="..\Sourdline\Line.jpg" alt="">
</li>
<li class=img8>
<img src="C:\Users\M409535\Desktop\PORTFOLIO\Img\8.jpg" alt>
</li>
<li class=img9>
<img src="C:\Users\M409535\Desktop\PORTFOLIO\Img\9.jpg" alt>
</li>
</ul>
 
<div class=precedent>
<label class=img1 for=slide_img1></label>
<label class=img2 for=slide_img2></label>
<label class=img3 for=slide_img3></label>
<label class=img4 for=slide_img4></label>
<label class=img5 for=slide_img5></label>
<label class=img6 for=slide_img6></label>
<label class=img7 for=slide_img7></label>
<label class=img8 for=slide_img8></label>
<label class=img9 for=slide_img9></label>
</div>
 
<div class=suivant>
<label class=img1 for=slide_img1></label>
<label class=img2 for=slide_img2></label>
<label class=img3 for=slide_img3></label>
<label class=img4 for=slide_img4></label>
<label class=img5 for=slide_img5></label>
<label class=img6 for=slide_img6></label>
<label class=img7 for=slide_img7></label>
<label class=img8 for=slide_img8></label>
<label class=img9 for=slide_img9></label>
</div>
 
<div class=puces>
<label class="img1" for=slide_img1>
<span class=actif_puces></span>
</label>
<label class="img2" for=slide_img2>
<span class=actif_puces></span>
</label>
<label class="img3" for=slide_img3>
<span class=actif_puces></span>
</label>	
<label class="img4" for=slide_img4>
<span class=actif_puces></span>
</label>
</div>
 
</div>	
 
</body>
</html>

en page 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
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
body {
  background-color:#E4E4E2;
}
 
*,
*::after
*::before {
box-sizing: border-box;
}
 
.img {
	float:center;
	max-height:800px;
	display:grid;
	margin:0px;
}
 
input[type="radio"] {
	position:absolute;
	left:-100vw;
}
 
label {
	cursor:pointer;
}
 
.slideshow {
	display: grid;
	overflow: hidden;
	max-width:600px;
	height: auto;
	aspect-ratio:3/2;
	margin:2rem auto;
}
 
.slideshow > * {
grid-area: slider;
}	
 
.slideshow  ul { 
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
}
 
.slideshow  ul  li{
flex: 0 0 100%;
transition: transform .25s;
will-change: transform;
}
 
.slideshow  ul  li	img {
  object-fit: cover;
  width: 600%;
  height: 100%;
  user-select: none;
}
 
#slide_img1:checked ~  ul > li {transform: translatex(0%)}  
#slide_img2:checked ~  ul > li {transform: translatex(-100%)}  
#slide_img3:checked ~  ul > li {transform: translatex(-200%)}
#slide_img4:checked ~  ul > li {transform: translatex(-300%)}
#slide_img5:checked ~  ul > li {transform: translatex(-400%)}
#slide_img6:checked ~  ul > li {transform: translatex(-500%)}
#slide_img7:checked ~  ul > li {transform: translatex(-600%)}
 
/******************fleches**************************/
 
.precedent{	
z-index:1;place-self: center left;	
}
.suivant{	
z-index:1;place-self: center right;
}
 
.slideshow > .precedent > label,
.slideshow > .suivant > label,
 
{
display:none;
background-color:hsl(0,0%,15%);
justify-content:center;
align-content:center;
}   
 
.slideshow > .precedent > label:after{content:'←'}
.slideshow > .suivant > label:after{content:'→'}
 
.slideshow > .precedent > label:after,
.slideshow > .suivant > label:after,
 
{
display:flex;
align-items:center;
font-size:2rem;
font-size:clamp(1rem, 2vw, 3rem);
color:hsl(0, 0%, 100%);
}	   
 
 
#slide_img1:checked ~ .precedent > label.img6,
#slide_img1:checked ~ .suivant > label.img2,
#slide_img2:checked ~ .precedent > label.img1,
#slide_img2:checked ~ .suivant > label.img3,
#slide_img3:checked ~ .precedent > label.img2,
#slide_img3:checked ~ .suivant > label.img4,
#slide_img4:checked ~ .precedent > label.img3,
#slide_img4:checked ~ .suivant > label.img5
#slide_img5:checked ~ .precedent > label.img4,
#slide_img5:checked ~ .suivant > label.img6,
 
{
display:flex;
width:2rem;
height:2rem;
width:clamp(2rem, 8vw, 4rem);
height:clamp(2rem, 8vw, 4rem);
}
 
/***************************navigation puces bas********************************/
 
.puces {
z-index: 1;
display: flex;
gap: 1rem;
padding: 1rem;
place-self: end center;
}
 
.puces label{
background-color:#07A8BF;
border-radius:50%;
width: 1rem;
height: 1rem;
}
 
/********************simulation lien actif sur les puces******************************/
 
#slide_img1:checked ~ .puces > label.img1 > .actif_puces,
#slide_img2:checked ~ .puces > label.img2 > .actif_puces,
#slide_img3:checked ~ .puces > label.img3 > .actif_puces,
#slide_img4:checked ~ .puces > label.img4 > .actif_puces,
#slide_img5:checked ~ .puces > label.img5 > .actif_puces,
#slide_img6:checked ~ .puces > label.img6 > .actif_puces,
#slide_img7:checked ~ .puces > label.img7 > .actif_puces,
 
{
border-radius: inherit;	
display: flex;
height: inherit;
width: inherit;
background-color:#7C7D7D;
}
 
.illustration {
	text-align:center;
	color:#07A8BF;
	padding:40px;
	opacity:0.8;
	font-size:50px;
	font-family:'Indie Flower', cursive ;
}
 
.Retour {
	margin:auto;
	text-transform:uppercase;
	font-size:14px;
	padding:6px 10px;
	text-decoration:none;
	width:80px;
	background:linear-gradient(#07A8BF,#07A8BF);
	transition:.5s ease-in;
	font-family:'Indie Flower', cursive ;
}

Avez-vous des idées pourquoi cela n'apparaît pas ?

**ProgElecT** · 05/04/2023, 10h32

Salut

Pour de-buguer, <img src="..\images\image_01.jpg" alt="L'image n'est pas trouvée">, si la phrase L'image n'est pas trouvée est visible, c'est que le chemin et/ou image n'est pas le bon.
A savoir que ../ te fait remonter d'un répertoire parent du fichier HTML que tu lances.

**Flash30** · 05/04/2023, 10h53

@ProgElecT,

Je ne comprends pas ce que vous dites désolée, j'ai mis sur un bon répertoire si je ne me trompe pas bien sûr

Nom : visualC.PNG
Affichages : 146
Taille : 32,2 Ko

Je suis preneuse si j'ai fait des erreurs de répertoire...

Merci,

Flash30

**ProgElecT** · 05/04/2023, 11h33

Je ne comprends pas ce que vous dites désolée

A la place de alt="" mettre un texte significatif de non image trouvée alt="L'image n'est pas trouvée"., la phrase n'aparaissant que si il y a se problème.

Au vue de votre image de l’arborescence, le HTML est-il accueil, illustration ou realisation ?
Si oui le chemin à indiquer est bien
src="images/image_00.jpg".
ou même résultat .
src="./images/image_00.jpg".

Dans la console, y a t il une erreur de signalée ?

**ProgElecT** · 05/04/2023, 11h58

Pour faire au plus simple (comme le propose NoSmoking)

Avec le code suivant:

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
<!DOCTYPE html>
<html lang="fr"> <!-- MonProg.html -->
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Ici le titre</title>
		<style>
                        /* ************************************ Commentaires ********************************************** */
                </style>
		<script>//---------------------------------------------------------------------------------------
                        'use strict'; // force la déclaration des variables
                        // ************************************ Commentaires ********************************************** 
                        //---------------------------------------------------------------------------------------------
                </script>
	</head>
	<body>
		une page web, partie affichage
		<img src="images/image_00.jpg" alt ="Image non trouvée">
		<img src="images/image_01.jpg" alt ="Image non trouvée">
		<img src="images/image_02.jpg" alt ="Image non trouvée">
		<img src="images/image_03.jpg" alt ="Image non trouvée">
		<!-- ************************************** Commentaires *********************************************** -->
		<script>//-----------------------------------------------------------------------------------
                        //---------------------------------------------------------------------------------------------
                </script>
	</body> 
</html>

Pas de CSS ni de JavaScript, en enregistrant le code sous MonProg.html dans le dossier C:\Users\M409535\Desktop\PortfolioVisualCode, les images sont elles visibles ?

Mes images ne s'affichent pas

CSS

Discussions similaires

Partager

Partager