[Résolu] Comment gérer 6 images en CSS ? par Fred2000Fred2000 - page 1

Bonjour,

Je suis en train de créer un site et j'ai actuellement 6 images dans ma page d'accueil, voir exemple ci-dessous.

Les 3 premières images ont les mêmes dimensions

Les 3 autres images n'ont pas les mêmes dimensions que les 3 premières.

Mon problème est que je répète souvent plusieurs fois les mêmes propriétés pour chaque image, ce qui est déconseillé en CSS, c'est pour cela que je me permets de vous écrire pour améliorer mon code.

Par exemple, pour les 3 premières images je pense avoir bien crée mes blocs HTML.

<div class="wrapper">
        <div class="image-wrapper">
          <img class="img-01 img">
          <div class="img-title">Trust Management</div>
          <div class="img-text">Assets trust management represents one of the  most popular operation methods in the world stock markets for companies as well as individuals. Among the advantages of assets trust management we may mention many.</div>
        </div>
       <div class="image-wrapper">
         <img class="img-02 img">
         <div class="img-title">Well Documented</div>
          <div class="img-text">Assets trust management represents one of the most popular operation methods in the world stock markets for companies as well as individuals. Among the advantages of assets trust management we may mention many.</div>
       </div>
 
      <div class="image-wrapper">
        <img class="img-03 img">
        <div class="img-title">Great Support</div>
         <div class="img-text">Assets trust management represents one of the most popular operation methods in the world stock markets for companies as well as individuals. Among the advantages of assets trust  management we may mention many.</div>
      </div>
     </div>

Pareil pour le CSS

.wrapper {
  display:flex;
  flex-wrap: nowrap;
}
 
.image-wrapper{
  margin: 10px;
  text-align: center;
  width: 90%;
}
 
.img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 50px;
  border: 3px solid red;
  height: 197px;
  width: 90%;
}
 
.img.img-01 {
  background-image: url("https://zupimages.net/up/19/51/vn88.jpg");
}
 
.img.img-02 {
  background-image: url("https://zupimages.net/up/19/51/9fik.jpg");
}
 
.img.img-03 {
  background-image: url("https://zupimages.net/up/19/51/dwq9.jpg");
}
 
.img-title{
    font-size: 20px;
    line-height: 1.4;
    color: #cd2122;
    margin-top: 10px;
    margin-left: 20px;
    float: left;
    font-weight: 700;
    font-family: Open Sans;
    text-transform: uppercase;
}
 
.img-text{
   font-family: Open Sans;
   font-size: 13px;
   line-height: 19px;
   color: #535353;
   margin-bottom: 20px;
   margin-left: 20px;
   float: left;
   text-align:left;
 
}

Par contre, c'est la catastrophe pour les 3 autres images.

En HTML j'ai ceci

<div class="wrapper">
 
        <div class="image-wrapper-02">
          <img class="img-04">
          <div class="img-title-02">Latest News</div>      
        </div>
 
       <div class="image-wrapper-02">
          <img class="img-05">
      </div>
 
      <div class="image-wrapper-02">
          <img class="img-06">
      </div>
 
      </div>

Puis en CSS, c'est catastrophique je répète plusieurs fois des propriétés sur mes images (img-04, img-05, img-06), je ne vois pas trop comment je pourrais résoudre ce problème? Sachant que les 3 premières images sont plus grandes que les 3 dernières.

.image-wrapper-02{
  margin: 10px;
  text-align: center;
  width: 64%;
  padding: 20px;
}
 
 
.img-04{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 50px;
  margin-left: 0px;
  float:left;
  border: 3px solid red;
  height: 174px;
  width: 64%;
  background-image: url("https://zupimages.net/up/20/13/s9t4.jpg");
}
 
.img-05 {
 background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 50px;
  border: 3px solid red;
  height: 174px;
  width: 64%;
  background-image: url("https://zupimages.net/up/20/13/eynp.jpg");
}
 
.img-06 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 50px;
  border: 3px solid red;
  height: 174px;
  width: 64%;
  background-image: url("https://zupimages.net/up/20/13/wqyc.jpg");
}
 
.img-title-02 {
    font-size: 20px;
    line-height: 1.4;
    color: #cd2122;
    margin-top: 10px;
    margin-left: -255px;
    float: left;
    font-weight: 700;
    font-family: Open Sans;
    text-transform: uppercase;
}

Voici une idée du code => https://repl.it/repls/SarcasticOfficialPlots

Je vous remercie pour votre aide.

-
Edité par Fred2000Fred2000 27 mars 2020 à 0:08:34

Bonjour, passer votre code au validateur pour voir et corriger vos erreurs => https://validator.w3.org/

Il y a quelque chose qui ne vas pas dans la conception du truc. Soit ce sont des images de décoration, dans ce cas les images devraient être déclarées en CSS. Soit ce sont des images qui apportent du contenu (et je pense que c'est le cas ici), dans ce cas l'image doit être déclarée avec balise <img>.

Cette balise <img> à deux attributs obligatoires, l'attribut src qui contient le chemin de l'image dans arborescence de fichier et l'attribut alt qui contient une description de l'image (peut être vide si image est de décoration mais doit être présent).

Donc le méli-mélo que vous avez écrit mélangeant la balise <img> avec du CSS background ne peut convenir.

Pour évité la redondance dans votre CSS soit vous utiliser une class commune et ajouter une autre class particulière. Ex. pour une boite rouge :

<div class="box red">

Ou regrouper les class identiques séparées par une virgule et les propriétés particulières par la suite. ex:

.cass1 , .class2, .class3 {
      /*propriétés communes*/ 
}
.class2 {
      /*propriétés particulière à cette class*/
}
.class3 {
      /*propriétés particulière à cette class*/
}

Ou encore utiliser les sélecteur d'attribut, (possible comme vous avez écrit vos class)

Lien à toujours avoir sous le coude

https://code.tutsplus.com/fr/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Comment gérer 6 images en CSS ?

Comment gérer 6 images en CSS ?

Supprimer

Modérer

Signaler le message aux modérateurs