Bonjour !

Je travaille actuellement sur un projet de site web de e-commerce (que je compte également proposer, gratuitement ou non, sous forme de CMS une fois le tout finalisé), mais je bloque sur la partie de présentation des produits. En effet, j'ai une idée précise de la façon dont je voudrais présenter chaque produit, et j'y étais presque arrivé une première fois mais je ne m'étais pas soucié de la présentation de mes boutons. Par soucis d'esthétisme je n'ai pas retenu la version à laquelle j'étais arrivé, et je ne trouve pas le moyen d'organiser les choses à mon image.

Voici ce que j'avais fait au début :

Le soucis étant que sur cette version, j'avais organisé la présentation produit en trois parties: la photo du produit, une partie qui englobait le nom de l'article ainsi que la description, et une dernière partie regroupant le prix, la notation, le nombre d'avis et de commandes ainsi que les boutons:

Mais je souhaite organiser tout ça d'une façon totalement différente:

Je souhaite organiser cela en cinq parties:

Malheureusement ça fait plusieurs jours que je suis dessus et je suis à bout!

Merci d'avance de votre aide..

EDIT: ne faites pas gaffe au "100%-200px", je pense gérer ça en JS, car la taille de produit ne doit pas changer mais je souhaite afficher les autres parties (en %), "responsivement", en respectant les pourcentages, excluant donc les 200px de l'image produit, est-ce faisable en CSS? J'espère que vous me comprenez

-
Edité par Anonyme 12 octobre 2017 à 16:29:10

KellDev a écrit:

EDIT: ne faites pas gaffe au "100%-200px", je pense gérer ça en JS, car la taille de produit ne doit pas changer mais je souhaite afficher les autres parties (en %), "responsivement", en respectant les pourcentages, excluant donc les 200px de l'image produit, est-ce faisable en CSS? J'espère que vous me comprenez

-
Edité par KellDev il y a 25 minutes

Hello,

Oui, avec la propriété Calc, ou bien avec Flex.

// exemple

#element {
  width: calc(100% - 200px);
}

-
Edité par Serelio 12 octobre 2017 à 16:58:43

Serelio a écrit:

KellDev a écrit:

EDIT: ne faites pas gaffe au "100%-200px", je pense gérer ça en JS, car la taille de produit ne doit pas changer mais je souhaite afficher les autres parties (en %), "responsivement", en respectant les pourcentages, excluant donc les 200px de l'image produit, est-ce faisable en CSS? J'espère que vous me comprenez

-
Edité par KellDev il y a 25 minutes

Hello,

Oui, avec la propriété Calc, ou bien avec Flex.

// exemple

#element {
  width: calc(100% - 200px);
}

-
Edité par Serelio il y a 14 minutes

Merci j'avais jamais entendu de cette fonctionnalité

EDIT: je continue à essayer de mettre bien en forme mes produits, je pensais tenir LA méthode mais non... (je n'ai pas encore fixé les width, je m'occupe d'abord de tout mettre sur la même ligne...)

HTML:

<div class="products">
        <div class="col-small-12">
          <div class="product">
            <div class="product-preview">
              <img src="https://www.choisir.com/sites/default/files/pictures/galaxys707_ch.jpg">
            </div>
            <div class="product-infos">
              <div class="product-infos-left">
                <a href="#" class="product-name">Apple iPhone 8 RED</a>
                <p class="product-descr">Un nouveau design tout de verre vêtu. L’appareil photo le plus populaire au monde, encore amélioré. Le chargement sans fil et sans effort. Voici l’iPhone 8. Une nouvelle génération d’iPhone.</p>
              </div>
              <div class="product-infos-right">
                <p class="product-price">1000€</p>
                <div class="product-note">
                  <img src="imgs/full-star.png">
                  <img src="imgs/full-star.png">
                  <img src="imgs/full-star.png">
                  <img src="imgs/full-star.png">
                  <img src="imgs/full-star.png">
                </div>
                <a href="#" class="product-comments">+999 avis</a>
                <p class="product-orders">+999 commandes</p>
              </div>
            </div>
            <div class="product-actions">
              <div class="product-actions-left">
                <button class="button button-blue">Partager ce produit</button>
              </div>
              <div class="product-actions-right">
                <button class="button button-orange">Ajouter au panier</button>
                <button class="button button-green">Acheter maintenant</button>
              </div>
            </div>
          </div>
        </div>
      </div>

CSS (SASS):

.products {
  border-top: 1px #eee solid;
  .product {
    .product-preview {
      display: inline-block;
      height: 300px;
      width: 200px;
    }
    .product-infos {
      display: inline-block;
      .product-infos-left {
        display: inline-block;
        .product-name {
          font-weight: bold;
          font-size: 20px;
        }
        .product-descr {
          font-size: 17px;
        }
      }
      .product-infos-right {
        display: inline-block;
        .product-price {
          font-weight: bold;
          color: rgb(255, 160, 0);
        }
        .product-note {
          img {
            display: inline;
            width: 25px;
            height: 25px;
          }
        }
        .product-comments {
          color: rgb(187, 187, 187);
          &:hover {
            color: darken(rgb(187, 187, 187), 5%);
          }
        }
        .product-orders {
          color: rgb(187, 187, 187);
        }
      }
    }
    .product-actions {
      display: none;
    }
    border-bottom: 1px #eee solid;
  }
}

Mais le rendu...:

Merci encore

-
Edité par Anonyme 12 octobre 2017 à 17:54:12