Classes non prises en compte
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:
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:
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;} |
