Discussion :

[bahh66]

Lors de la réalisation de ce code, je me rends compte qu'il y a un décalage entre les images et les cadres qui sont dessous.

Comment puis je faire pour les aligner vu qu'ils font la même dimension ?

code

[ProgElecT]

Salut

En enlevant la dimension de la bordure soit 3px

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
.titre1{
    width:calc(23% - 3px);
    max-height :300px;
    border-radius : 10px;
    padding-top:10px;
    padding-bottom:10px;
    border: 3px solid #A0A0A0;
    text-align: center;
    float: left;
    font-family: raleway;
    font-weight: 900;
}

[bahh66]

Alors oui en effet, si j'enlève le border, il n'y a plus de décalage vu qu'on ne voit plus de cadre.
J'aurai aimé conserver la bordure et résoudre mon problème de décalage.

Peut-on enlever l'écart entre les images, pour que celles-ci soient collées comme les cadres?

[ProgElecT]

width:calc(23% - 3px); n’enlevè pas la bordure, en tout cas pas sous Firefox.

Si je ne me trompe pas border ajoute x pixels à la dimension width et/ou height c'est pourquoi calc() permet de le soustraire, mais je ne suis pas un cador du CSS.

Édit
Attention de bien mettre un espace de chaque coté du -

[bahh66]

Je n'avais pas compris que tu me parlais de faire un calcul dans le width.
Je pensais que tu me disais d'enlever la ligne

Code :

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

   border: 3px solid #A0A0A0;

Ca fonctionne très bien.
Merci

[NoSmoking]

Bonjour,

width:calc(23% - 3px); n’enlevè pas la bordure, en tout cas pas sous Firefox.

il existe la déclaration box-sizng:border-box qui permet d'intégrer la largeur des border et padding à la largeur déclarée de l'élément.

pour en venir au sujet, si je puis me permettre, ta structure est incohérente et te met en difficulté pour la présentation.
Tes liens et les titres s'y raccrochants ne devraient pas être « dispersés » dans ta page, tu mets des <a href="..."> et après plus loin tes <div class="titre1">, ils devraient être liés.

Plusieurs solutions sont possibles, je t'en présente une :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div class="conteneur">
  <figure>
    <a href="..." target="new"><img src="..." alt="Société de consommation"></a>
    <figcaption>La société de consommation</figcaption>
  </figure>
  <figure>
    <a href="..." target="new"> <img src="..." alt="Quizz sur le patrimoine"></a>
    <figcaption>Quizz sur le patrimoine</figcaption>
  </figure>
  <figure>
  <!-- les suivants -->
</div>

ici la construction est déjà plus cohérente, enfin à mon avis !

Maintenant le CSS à appliquer devient plus simple à mettre en place et donc à maintenir/modifier :

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
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
.conteneur {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 80%;
  margin: 0 10%;
  min-width: 100px;
  background-color: #FDE; /* juste pour voir */
}
figure {
  width: 24%;
  margin: .25em 0;
  background-color: #EFD; /* juste pour voir */
}
figure img {
  width: 100%;
}
figcaption {
  padding: .5em;
  border: 3px solid #A0A0A0;
  border-radius: 10px;
  text-align: center;
  font-family: raleway;
  font-weight: 900;
}
img:hover {
  transition: all 1.2s;
  filter: grayscale(0%);
}
img {
  filter: grayscale(100);
}

par exemple en reprenant l'essentiel de tes données.