Classes non prises en compte

**Almorante** · 11/06/2020, 16h56

Bonjour,
après quelques heures de recherche je n'ai toujours pas trouvé d'explication, je viens donc ouvrir un nouveau message.

Pour être bref, j'ai une page html et une page css. Le validator W3 ne me confirme que tout est ok sur mes 2 pages. J'ai indiqué des attributs sur mes h1, mes id etc tout fonctionne mais sur mes class ça ne marche pas, ce sont des class relatifs à des images que j'aimerais mettre à la même taille. En faisant avec les id ça marche, elles se mettent toutes à la même dimension mais en passant par les class, ça ne marche pas (certaines restent petites et d'autres gigantesques)... Quelqu'un aurait une idée du pourquoi ?

Sur les réponses souvent apportées,
-le lien vers la page CSS n'est pas correct. Ici, c'est bon étant donné que les autres attributs fonctionnent.
-la syntaxe. Ici, à priori pas de problème vu la validation.
-l'héritage. Ici, mes class sont en bas du doc CSS, mais en les déplaçant en première ligne ça marche pas quand même.

Étant débutant je sèche totalement.

Merci à vous !!

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="room101.css" />
        <link rel="shortcut icon" href="favicon.ico" >
       	<title>Room101 I Graphisme</title>
</head>
<body>
	<header>
		<div id=entete>	
				<nav>
					<ul>
						<li><a href="sitegraphisme.html">Accueil</a></li>
						<li><a href="servicesetdémarche.html">Services et démarche</a></li>
						<li><a href="réalisations.html">Réalisations</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</nav>
		</div>
	</header>
 
	<h1>Room 101 Graphisme</h1>
 
 
 
	<h2><strong>Graphisme print & web, design graphique, identité visuelle, sites web</strong></h2>
 
 
		<h3>PRESTATIONS</h3>
 
			<p>
				<strong>Print, web, communication, identité visuelle, sites web, référencement</strong>
			</p>
 
 
		<h3>CREATIONS</h3>
 
			<strong>Logos</strong>
 
 
					<div class="logo"><img id="carrot_media_visuel" src="images/carrotmedia.jpg" alt="logo_carrot_media"> </div>
					<div class="logo"><img id="green_shark_visuel" src="images/greenshark.jpg" alt="logo_green_shark"></div>
					<div class="logo"><img id="six" src="images/6.jpg" alt="logo_evernote"></div>
 
			<strong>Communication, illustrations</strong>
 
					<div class="illustration"><img id="camping" src="images/camping.jpg" alt="camping-de-l'araille"></div>
					<div class="illustration"><img id="ska" src="images/ska.jpg" alt="illustration_need_you"></div>
					<div class="illustration"><img id="catch" src="images/catchtheword.jpg" alt="affiche_catch_the_word"></div>
					<div class="illustration"><img id="citrons" src="images/citrons.jpg" alt="étiquette_jus_de_citron"></div>
 
 
			<strong>Sites web</strong>
 
					<div class="sites"><img id="siteun" src="images/site1.jpg" alt="site_web"></div>
					<div class="sites"><img id="sitedeux" src="images/site2.png" alt="site_web"></div>
 
		<h3>COMPETENCES</h3>
			<p>Stratégie, <strong>idéntité visuelle,</strong> 
			</p>
 
 
		<h3>AVIS DES CLIENTS</h3>
			<p>
 
			</p>
		<h3>CONTACT</h3>
</body>
</html>

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
body{
	background-color: white;
	margin-top:5em;
	height: 10em;}
 
header
{
	background-color: rgb(23,22,22);
	background-position: top;
	background-size: 8%;
	position: fixed;
	top: 0px;
	left: 0px;
	width:100%;
}
h1{
	color:red;
	font-size: 4em;
}
h2{
	color : rgb(234,234,234);
	font-size : 2em;
}
 
 
 
#entete{
	color: white;
}
ul{ display: flex;
	text-align: right;
  }
 
#carrot_media_visuel{
	max-width: 100%;
	width: 24em;
}
#green_shark_visuel{
	max-width: 100%;
	width: 24em;
}
#six{
	max-width: 100%;
	width:24em;
}
.illustration
{
	width: 20px;
 
}
.sites{
	width: 10em;}

**badrou** · 11/06/2020, 18h00

Bonjour
tu sélectionne les div avec tes class et non les images
tu peut essayer avec

Code :

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

1
2
3
4
5
6
7
8
 
.illustration img
{
	width: 20px;
 
}
.sites img{
	width: 10em;}

je pense que ça marche comme ça

**Almorante** · 11/06/2020, 18h31

Ah parfait ça marche impec ! Merci Badrou.

Par contre je saisis pas bien la logique. Tu pourrais prendre le temps de m'expliquer plus en détail ? Ca me permettrait de progresser

Sur mon code html, par exemple

Code html :

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

1
2
3
4
5
<div class="illustration"><img id="catch" src="images/catchtheword.jpg" alt="affiche_catch_the_word"></div>
	   <div class="illustration"><img id="citrons" src="images/citrons.jpg" alt="étiquette_jus_de_citron"></div>
 
           <div class="sites"><img id="siteun" src="images/site1.jpg" alt="site_web"></div>
           <div class="sites"><img id="sitedeux" src="images/site2.png" alt="site_web"></div>

Je l'avais écrit comme cela car dans mon idée je voulais créer des "classes" d'images auxquelles je pourrais donner les mêmes propriétés (la taille notamment). Ainsi je pensais que le div me permettait de créer cette classe, regrouper ces éléments en fait.

Mais de ta réponse je comprends que même si j'entoure mon img de balises div ce n'est pas suffisant ? Il faudrait pointer les propriétés dans CSS sur l'image elle-même(img).

En gros je traduirais ton code par : .illustration nous envoie dans la bonne div (celle avec la classe sites ou celle avec la classe illustration par exemple) mais étant donné que dans les div on peut rajouter d'autres choses que l'image, il faut donc clairement indiquer que c'est l'image dans cette div en question qu'on veut redimensionner à 20px. D'où l'ajout de img après .illustration

J'espère que mon message reste compréhensible...

**badrou** · 11/06/2020, 23h11

Bonsoir
oui c'est exactement ça
apres tu peut ajouter a tes images une classe ça te permettra de les cibler en css
comme ceci

Code HTML :

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

1
2
3
4
5
<div ><img id="catch" class="illustration" src="images/catchtheword.jpg" alt="affiche_catch_the_word"></div>
	   <div><img  class="illustration" id="citrons" src="images/citrons.jpg" alt="étiquette_jus_de_citron"></div>
 
           <div><img  class="sites" id="siteun" src="images/site1.jpg" alt="site_web"></div>
           <div><img  class="sites" id="sitedeux" src="images/site2.png" alt="site_web"></div>

voici la doc pour les sélecteurs CSS ca va t'aider
https://developer.mozilla.org/fr/doc...ecteurs_enfant
https://developer.mozilla.org/fr/doc...A9lecteurs_CSS

penser a ajouter résolu si j'ai bien répondu a ta question

**Almorante** · 11/06/2020, 23h16

Ahhhhhh ouais ok, je vois la nuance. Super, exactement ce qu'il me fallait. Merci beaucoup Badrou !!!

Classes non prises en compte

CSS

Vue hybride

Discussions similaires

Partager

Partager