Discussion :

[labarre2002]

Bonjour

je désire réaliser une grille comme celle la :



avoir des images les unes au dessus des autres dans le conteneur de droite.

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
<div class="sticky">
            <div class="pic"><img src="assets/0175.jpg" alt=""> </div>
           <div class="pic"><img src="assets/1424.jpg" alt=""> </div>
            <div class="pic"><img src="assets/7009.jpg" alt=""></div>
           <div class="pic"><img src="assets/733.jpg" alt=""></div> 
           <div class="pic"><img src="assets/86.jpg" alt=""></div> 
            <div class="pic"><img src="assets/873.jpg" alt=""></div> 
            <div class="pic"><img src="assets/h1.jpg" alt=""></div> 
            <div class="pic"><img src="assets/h2.jpg" alt=""> </div>
            <div class="pic"><img src="assets/h3.jpg" alt=""></div> 
            <div class="pic"><img src="assets/h4.jpg" alt=""> </div>
            <div class="pic"><img src="assets/h5.jpg" alt=""> </div>
            <div class="pic"><img src="assets/h6.jpg" alt=""> </div>
           <div class="pic"><img src="assets/h7.jpg" alt=""></div> 
            <div class="pic"><img src="assets/0175.jpg" alt=""> </div>
            <div class="pic"><img src="assets/873.jpg" alt=""> </div>
            <div class="pic"><img src="assets/86.jpg" alt=""> </div>
            <div class="pic"><img src="assets/7009.jpg" alt=""> </div>
            <div class="pic"><img src="assets/7009.jpg" alt=""></div> 
            <div class="pic"><img src="assets/1424.jpg" alt=""> </div>
            <div class="pic"><img src="assets/873.jpg" alt=""> </div>
            <div class="pic"><img src="assets/86.jpg" alt=""> </div>
            <div class="pic"><img src="assets/h5.jpg" alt=""></div> 
            <div class="pic"><img src="assets/h1.jpg" alt=""></div> 
            <div class="pic"><img src="assets/873.jpg" alt=""></div> 
            <div class="pic"><img src="assets/86.jpg" alt=""> </div>
            <div class="pic"><img src="assets/h5.jpg" alt=""> </div>
            <div class="pic"><img src="assets/h1.jpg" alt=""> </div>
          </div>

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
.sticky{
    max-width: 100%;
    max-height: 100%;
    width: 430px;
    height: 580px;
    position: absolute;
    top: 15px;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
.pic{
    width: 100%;
    height: 100%;
 
}
 
 
.pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
 
}

j 'obtiens ca :


Pourrais-je avoir des pistes pour obtenir l' effet escompter ?

Merci.

[NoSmoking]

Bonjour,
dans ton code ci-dessous :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.sticky{
    max-width: 100%;
    max-height: 100%;
    width: 430px;
    height: 580px;
    position: absolute;
    top: 15px;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;

outre le fait qu'il manque une parenthèse fermante, erreur de recopie peut-être, c'est quand même singulier d’appeler ta classe sticky alors que le positionnement est absolute.

Autre remarques, pourquoi englober tes images dans un conteneur au demeurant inutile ?
Tu pourrais par contre écrire :

Code html :

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

1
2
3
4
<figure>
  <img src="assets/0175.jpg" alt="">
  <figcaption>Légende de la photo</figcaption>
</figure>

... mais bon !

avoir des images les unes au dessus des autres dans le conteneur de droite.

ce sont tes images qui doivent être positionnées en absolute par rapport au conteneur et si tu veux les centrer il te suffit d'écrire la règle :

Code :

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

1
2
3
4
5
6
img { /* dans le cas où seules les IMG sont dans le DOM */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate( -50%,  -50%);
}

[labarre2002]

@NoSmoking merci pour ton méssage