Propriété CSS : Grid ou Flexbox ?

[BoutikShop69]

Bonjour,

 

En ajoutant ceci dans le global.css, vers p.payment_module a { :

 

   display: inline-flex;
    
    flex-direction: column;
    
    flex-wrap: wrap;
    
    justify-content: space-around;

    width: 40%;

    align-items: center;

 

J'obtiens pour la version PC, quelque chose qui s'approche du résultat que je souhaiterai :

 

 

Sauf que je voudrai que les Blocs soient : Aligné 2 par 2 sur la même ligne.

 

Et qu'ils restent alignés les un en-dessous de l'autre en "Version Mobile".

 

Une idée à proposer s'il vous plaît ? En vous remerciant par avance.

 

Cordialement.

 

[MrSoulPC915]

C'est une fonctione encore trop récente et pas forcément bien supporté, tu parle de quel OS et dans quel version ?

https://caniuse.com/#feat=flexbox

[BoutikShop69]

Bonjour,

 

Je travaille sur un prestashop en 1.6.0.9. Comment est-ce que je pourrais m'y prendre dans ce cas, stp ?

 

Car je souhaiterai vraiment faire cet alignement 2 par 2, apparemment ce n'est pas impossible à réaliser : https://www.prestashop.com/forums/topic/179353-ajout-dun-mode-de-paiment-fichier-hook-payment/

 

Mais pour trouver une solution qui soit compatible avec le pc + mobile, c'est une autre paire de manche.

 

Cordialement.

[MrSoulPC915]

Tu met un clearfix dans ton container et ensuite, tu met du float dans les cellule avec une largeur en pourcentage.

Quant à la version mobile, je resterais sur des cellules à 100% de la largeur pour que tous les gros doigts ne s'y perdent pas.

[BoutikShop69]

Tu met un clearfix dans ton container et ensuite, tu met du float dans les cellule avec une largeur en pourcentage.

Quant à la version mobile, je resterais sur des cellules à 100% de la largeur pour que tous les gros doigts ne s'y perdent pas.

 

Quand tu parles du conteneur, c'est bien de ceci : p.payment_module a ?

 

Par contre float dans les cellules, je vois pas. C'est à dire ?

 

En te remerciant.

 

Cordialement.

[BoutikShop69]

Bonjour,

 

Même là, ils en parlent des "flexbox" : http://fr.learnlayout.com/toc.html

 

A force de creuser, une idée finira par naître ....

 

Cordialement.

[MrSoulPC915]

Difficile à dire, je ne connais pas ton thème, sur le theme classic en 1.7.2, je dirais : le clearfix sur payment-options et le float sur le payment-option.

 

Mais après, c'est vraiment pas bien codé, il y a des div partout inutile, donc un packet en visibility:hidden ou display:none, il faut que tu essaie.

 

Concernant les flexbox, c'est l'avenir et c'est fonctionnel sur les derniers navigateurs, mais pour l'instant pas suffisamment, il faut encore attendre un peu pour avoir une compatibilité suffisante. Après, tu peux essayer avec de la dégradation progressive pour les navigateurs qui ne le supporte pas, mais je pense que c'est bien se prendre là tête là ou un float fonctionnerait parfaitement.

[BoutikShop69]

Bonjour,

 

J'ai précisé que je travaille avec : Prestashop 1.6.0.9

 

Il s'agit du thème de base, et dans le global.css, le code qui gère la partie affichage "paiement" est le suivant :

 

p.payment_module {
  margin-bottom: 10px; }
  p.payment_module a {
    display: block;
    border: 1px solid #d6d4d4;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 17px;
    line-height: 23px;
    color: #333333;
    font-weight: bold;
    padding: 33px 40px 34px 99px;
    letter-spacing: -1px;
    position: relative; }
    p.payment_module a.bankwire {
      background: url(../img/bankwire.png) 15px 12px no-repeat #fbfbfb; }
    p.payment_module a.cheque {
      background: url(../img/cheque.png) 15px 15px no-repeat #fbfbfb; }
    p.payment_module a.cash {
      background: url(../img/cash.png) 15px 15px no-repeat #fbfbfb; }
    p.payment_module a.cheque:after, p.payment_module a.bankwire:after, p.payment_module a.cash:after {
      display: block;
      content: "\f054";
      position: absolute;
      right: 15px;
      margin-top: -11px;
      top: 50%;
      font-family: "FontAwesome";
      font-size: 25px;
      height: 22px;
      width: 14px;
      color: #777777; }
    p.payment_module a:hover {
      background-color: #f6f6f6; }
    p.payment_module a span {
      font-weight: bold;
      color: #777777; }

.payment_module.box {
  margin-top: 20px; }

p.cheque-indent {
  margin-bottom: 9px; }

.cheque-box .form-group {
  margin-bottom: 0px; }
  .cheque-box .form-group .form-control {
    width: 269px; }

 

Cordialement

[MrSoulPC915]

Sans la partie HTML incriminé, ça va être difficile à dire.

[BoutikShop69]

Sans la partie HTML incriminé, ça va être difficile à dire.

 

C'est à dire ?  De quoi aurais-tu besoin stp ? Merci.

[MrSoulPC915]

La portion de code HTML qui construit ces blocs et ses conteneurs.

[BoutikShop69]

Problème c'est que tout est complexe dans prestashop.

 

Je joins ici le thème par défaut, à ne pas installer sur une 1.7, mais à ouvrir uniquement avec notepad, pour les pages "Paiement".

 

Pour le reste, je te mp. Car je ne publie pas l'url de travail.

 

Cordialement.

default-bootstrap.zip

[MrSoulPC915]

/* Normalement pour bien faire tu utilise une règle pour tout ton border-sizing pour éviter d'avoir à le répéter, vérifie, je n'ai pas été voir le CSS brut */

*, *:before, *:after {

box-sizing: border-box;

}

 

 

#HOOK_PAYMENT {

/* Il faut y mettre un clearfix, mais dans ton code, il en hérite, donc pas besoin */

/* ensuite, ici, tu ne définis que la largeur, pourquoi pas 100% pour qu'il s'adapte à la largeur de son conteneur */

}

 

 

#HOOK_PAYMENT .row {

float: left;

width: 50%;

padding-left: 1%; /* Pour bien faire, il faut mesurer ce pourcentage grace à une grille */

padding-right: 1%; /* Idem*/

margin: 0;

/* par contre, ici aussi il y a un clearfix qu'il faut supprimer */

}

 

 

#HOOK_PAYMENT .row a {

/* Ici, il faut que tu supprime les derniers relicats de flex et surtout que tu supprime le width qui ne sert à rien ici */

}

 

 

/* Il va faloir également que tu supprime dans le HTML les classes col-md-12 et col-md-6 que tu trouve dans les divs juste après .row dans l'arboressance. */

 

 

/* Enfin, fait attention au clearfix, il ne faut pas le mettre partout, sinon, ça peut faire planter ton code */

[MrSoulPC915]

Si je puis me permettre, trois livres peu onéreux et très compréhensible que je te conseil vivement :

 

• HTML5 pour les webdesigners
• CSS3 pour les webdesigners
• Responsive Webdesign

[BoutikShop69]

Rebonjour,

 

Je te remercie pour ton aide, mais où trouves-tu : #HOOK_PAYMENT .row  et  #HOOK_PAYMENT .row a

 

Ou faut-il que je les créé dans le global.css ? Quelque chose à modifier dans les tpl, stp ?

 

Cordialement.

[MrSoulPC915]

Ne le prend pas mal, mais je pense qu'on ne s'attaque pas à un code aussi complex (et bordélique), sans un minimum de connaissances.

 

Renseigne toi au sujet des sélecteurs CSS et ce à quoi ils servent.

[BoutikShop69]

Ne le prends pas mal, non plus, mais consulte ta messagerie, et pourras voir ce que quelqu'un comme moi a réalisé avec ses connaissances, sachant que je suis parti du thème livré par défaut.

 

Mais je demande juste si c'est dans le css ou dans les tpl que tu a trouvé ces sélecteurs.

 

Cordialement.

[MrSoulPC915]

J'ai bien été voir ton site, j'ai fais même fait mes tests en live depuis l'inspecteur de chrome si tu veux tout savoir.

Et bien que ce soit pas bien dans mes gouts esthétique, je reconnais que tu as du bosser un minimum.

 

Concernant #HOOK_PAYMENT .row  et  #HOOK_PAYMENT .row a, je les ai trouvés tout simplement en lisant le HTML brut de ton site, donc si tu ne trouve pas ces sélecteurs dans le fichier style.css, tu peux tout simplement les créer dans custom.css.

 

Il est d'ailleurs je pense préférable de laisser tranquil le fichier style.css et rajouter son code customisé dans custom.css comme son nom l'indique.

 

Quant à col-md-12 et col-md-6, c'est dans le tpl, mais je ne saurais pas te dire lequel, va falloir chercher... et fait attention, ce sont deux classes que l'on trouve partout.

[BoutikShop69]

Quant à col-md-12 et col-md-6, je sais où ils se trouvent, dans tous les fichiers, paiement.tpl, situé dans chaque module de paiement.

 

Ces mêmes modules ne lisent que le Global.css, et si je mets mes sélecteurs/règle css ailleurs que dans ce fichier, ils ne seront pas pris en compte.

 

Supprimer flex, c'est hyper facile, il suffira que je supprime ce que j'ai écrit.

 

Afficher deux modules dans la même position dans prestashop relève de l'exploit, et n'est que très peu pratiqué, au point de ne trouver pratiquement aucune discussion sur ce sujet pour prestashop dans tout internet, par contre c'est couramment pratiqué dans jomla .....

 

Et c'est ça qui est difficile. Je ne te demande pas si les réglages que tu me propose vont s'afficher correctement en version mobile, je sens que tu vas encore me taper sur les doigts.

 

Il y a mon niveau d'accord, mais même sur la centaine de milliers de thème existant même payant, aucun ne propose l'affichage que je souhaite mettre en place.

 

Je regarde tout cela de plus près, et je ferais un retour sur la réussite et ou les difficultés rencontrés.

 

Cordialement.

[MrSoulPC915]

Ces mêmes modules ne lisent que le Global.css, et si je mets mes sélecteurs/règle css ailleurs que dans ce fichier, ils ne seront pas pris en compte.

 

Tu es vraiment sur de ça ? (après, je ne connais que la version 1.7), ce n'est pas un problème de cache ?

 

Afficher deux modules dans la même position dans prestashop relève de l'exploit, et n'est que très peu pratiqué, au point de ne trouver pratiquement aucune discussion sur ce sujet pour prestashop dans tout internet, par contre c'est couramment pratiqué dans jomla .....

 

Et c'est ça qui est difficile. Je ne te demande pas si les réglages que tu me propose vont s'afficher correctement en version mobile, je sens que tu vas encore me taper sur les doigts. 

 

Comprend pas ton histoire de position et le rapport avec le sujet de ce post ?

 

Ça n'a rien à voir avec les modules.

 

En fait, tu mets en page tes éléments HTML pour une résolution desktop et une autre mise en page pour la résolution mobile avec l'aide des media queries. On appel ça le Responsive Design (d'où le conseil lecture)

 

Ça ressemble vaguement à ça :

 

 

@media (max-width: 768px) {

    #header {

        background: rgb(235,235,235);

    }

 

}

 

[BoutikShop69]

Bonjour,

 

Il s'agit du thème de base, et dans le global.css, le code qui gère la partie affichage "paiement" est le suivant :

 

p.payment_module {
  margin-bottom: 10px; }
 

p.payment_module a {
    display: block;
    border: 1px solid #d6d4d4;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 17px;
    line-height: 23px;
    color: #333333;
    font-weight: bold;
    padding: 33px 40px 34px 99px;
    letter-spacing: -1px;
    position: relative; }
   

p.payment_module a.bankwire {
      background: url(../img/bankwire.png) 15px 12px no-repeat #fbfbfb; }
   

p.payment_module a.cheque {
      background: url(../img/cheque.png) 15px 15px no-repeat #fbfbfb; }
   

p.payment_module a.cash {
      background: url(../img/cash.png) 15px 15px no-repeat #fbfbfb; }
   

p.payment_module a.cheque:after, p.payment_module a.bankwire:after, p.payment_module a.cash:after {
      display: block;
      content: "\f054";
      position: absolute;
      right: 15px;
      margin-top: -11px;
      top: 50%;
      font-family: "FontAwesome";
      font-size: 25px;
      height: 22px;
      width: 14px;
      color: #777777; }
   

p.payment_module a:hover {
      background-color: #f6f6f6; }
   

p.payment_module a span {
      font-weight: bold;
      color: #777777; }

.payment_module.box {
  margin-top: 20px; }

p.cheque-indent {
  margin-bottom: 9px; }

.cheque-box .form-group {
  margin-bottom: 0px; }
 

.cheque-box .form-group .form-control {
    width: 269px; }

 

#HOOK_PAYMENT {      -       .payment_module img {          -          et      p.payment_module {

 

SONT DES AJOUTS PERSONNELS DE MA PART.

 

Je travaille avec prestashop depuis la 1.4.3, cela fait 7 ans que je manipule et lit le code de cette solution logicielle en long en large et en travers, donc pour répondre à ta question, oui je suis sûr. Enfin il n'existe "Aucun Fichier CSS Dans Les Modules de Paiement".

 

Tu m'indiques : "Comprend pas ton histoire de position et le rapport avec le sujet de ce post ?" C'est pourtant simple :

 

Il n'existe à ce jour en dehors de ce topic, "Aucun Référentiel Sur et Dans Tout Prestashop" concernant "L'ALIGNEMENT DES MODULES DE PAIEMENT QUE CE SOIT PAR 2 OU MÊME PAR 3 SUR LA MÊME LIGNE".

 

Idem : Il n'existe "AUCUN THEME MÊME PAYANT QUI INCLUT CET ALIGNEMENT DANS LA PAGE "CHOIX PAIEMENT".

 

Si recette a été un jour trouvée (2012), elle s'est perdue, car la personne n'a pas partagé sa solution.

 

L'idéal serait de proposer comme pour le product-list, de pouvoir choisir un : "Affichage des blocs ligne par ligne ou en GRILLE".

 

Enfin sur ce que je travaille, j'ai fait plusieurs intégration "sans module", et je pense notamment à l'effet zoom sur les images à l'accueil et dans le product-list, où j'ai utilisé les "propriétés CSS" pour l'obtenir. Donc si tu pouvais éviter de me rabaisser continuellement quand tu parles de mon niveau de compétence, ce serait sympa.

 

En te remerciant.

 

Cordialement.

[MrSoulPC915]

Je n'ai pas dans l'idée de te rabaisser, mais de te conseiller au mieux. Et je pense que c'est uniquement lié à une incompréhension des deux part. De mon côté, je comprend la moitié de ce que tu me raconte, pas que ce soit débile, mais je pense incomplet, il ne faut pas oublié que je ne connais pas ton processus de création, vu que tu n'en a pas parlé.

 

Par exemple, quand tu dis "SONT DES AJOUTS PERSONNELS DE MA PART", j'aurais aimé savoir où, tpl ? css ? Module ?

 

Quant à ton idée d'intégration graphique sans module, c'est tout à ton honneur, c'est d'ailleurs la seul solution logique, un module, c'est fait pour rajouter une fonction.

[BoutikShop69]

Rebonjour,

 

Concernant :   #HOOK_PAYMENT {      -       .payment_module img {          -          et      p.payment_module { 

 

Dans le global.css 

 

Qu'est-ce que tu entend par incomplet, stp ? Et qu'entend-tu par : il ne faut pas oublié que je ne connais pas ton processus de création, vu que tu n'en a pas parlé.

 

Je t'ai mis en pièce jointe dans un post, -  la structure du thème de base en prestashop 1.6 - , il pourrait t'être utile d'étudier son arborescence .......

 

En attendant, dans un fichier (module), on trouve par exemple ceci :

 

<div class="row">
    <div class="col-md-12 col-md-6">
        <p class="payment_module">
            <a
            class="bankwire"
            href="{$link->getModuleLink('bankwire', 'payment')|escape:'html':'UTF-8'}"
            title="{l s='Pay by bank wire' mod='bankwire'}">
 

En te remerciant.

 

Cordialement.

 

Edit : La méthode de code que tu m'a donné, dans la réalité ne fonctionne pas, ça me détraque l'affiche des blocs de paiements dans tous les sens, pc et mobile. Va falloir trouver autre chose comme solution.

 

Honnêtement avec la méthode "flexbox", j'étais beaucoup plus proche de la solution, il me manque juste comment savoir l'utiliser .....

 

Sinon passer par un inline-grid ou ul-grid ..... à creuser.

Edited August 10, 2017 by BoutikShop69 (see edit history)