26787 sujets

CSS et mise en forme, CSS3

Pages :
Hello

En adaptant une application de commentaire sur ma boutique Shopify, cela fait plusieurs jour que je suis confronté à un problème d’affichage que je n’arrive pas à résoudre par moi même. J’ai un niveau intermédiaire en HTML et CSS que j’ai acquis il y a plusieurs années. N’étant pas un pro dans le domaine, et après avoir testé beaucoup de code, je m’en remets à votre aide.

Je suis parti d’une application gratuite, qui permet d’avoir des commentaires/avis sur les produit de la boutique, que j’adapte visuellement à mes besoins. Cette application permet 3 mode d’affichages : LISTE, GRILLE, et CARROUSEL. Elle permet également d’ajouter une photo à son avis, ce qui est l’option que je recherchais. En revanche, la photo du commentaire est affichée uniquement avec le mode LISTE. Les autres mode d’affichage ne gère pas les photos. Mon souhait étant d’afficher la partie commentaire en grille/mosaïque (GRID) avec les photos, j’ai donc modifier un peu le code pour intégrer les photo aux commentaires affichés.

Maintenant que c’est codé, c’est l'enchaînement/alignement vertical des blocs de commentaires en qui ne se fait plus correctement, étant donné qu’avec ou sans photo la taille verticale de ces derniers peut être différente. Voici en image ce que cela donne :

Image 1 :
upload/1568218842-77009-02.jpg

Image 2, suite :
upload/1568218906-77009-03.jpg


On voit bien le problème que cela amène. Mon souhait serait d'obtenir quelque chose de plus harmonieux, qui occupe mieux l'espace comme ceci dans les enchaînements des blocs :

upload/1568218933-77009-01.jpg


L’affichage grille de l'application utilise le CSS 12 Column Grid. J’imagine qu’il doit y avoir des propriétés CSS à ajouter à propos de l’utilisation d’une Grille sur le Container ou sur les Items pour résoudre ce problème d’affichage ? J’ai testé beaucoup de code de ce côté là, mais en vain.

Voici le code html qui correspond à l’affichage de la grille de commentaire :


<div id="HulkAppsReviews" data-type="productReviews" data-product-id="{{product.id}}" data-product-title="{{product.title | escape}}" style="display:none;">
<!-- Commentaire mode GRILLE et CAROUSEL -->
    <div id="reviewsCarousel" class="carousel row">
      <div v-for="review in productReviews.data" class="carousel-cell col-xs-12 col-sm-6 col-md-4 col-lg-4 text-center">
        <div class="review-item equalize">
          <!-- Image -->
          <img :src="review.image" class="review-image img-responsive"/> 
          
          <div class="info">
            <div class="review-rating">
              <span v-html="getRating(review)"></span>
            </div>
            <div class="review-title text-uppercase" v-text="review.title"></div>
         	<div class="review-author" v-text="review.author"></div>
         	<div class="review-date text-uppercase" v-text="dateFormat(review.created_at)"></div>
         	<div class="review-body" v-html="truncateWords(review.body, 20)"></div>
         	<div><a href="#" @click.prevent="showReview(productReviews.data, review.id)">Read More</a></div>
          </div>          
        </div>
      </div>
    </div>
</div>
    

Pour ceux qui veulent, voici les fichiers CSS et JavaScript qu'utilise l'application, qui sont de taille importante : CSS / JavaScript

Voila un résumé du code CSS disponible dans le fichier au dessus, qui concerne les id et class présentes dans le code html au dessus :

.row {
    width: 100%
}

.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 {
    position: relative;
    min-height: 1px
}

.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 {
    float: left
}

.col-xs-12 {
    width: 100%
}

@media (min-width: 768px) {
    .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12 {
        float:left
    }
  
  .col-sm-6 {
        width: 50%
    }
}

@media (min-width: 992px) {
    .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 {
        float:left
    }
  
  .col-md-4 {
        width: 33.33333333%
    }
}

@media (min-width: 1200px) {
    .col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12 {
        float:left
    }
  
  .col-lg-4 {
        width: 33.33333333%
    }
}

#HulkAppsReviews {
    text-align: left
}

#HulkAppsReviews .text-uppercase {
    text-transform: uppercase
}

#HulkAppsReviews .text-lowercase {
    text-transform: lowercase
}

#HulkAppsReviews .img-responsive {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto
}

#HulkAppsReviews #reviewsCarousel {
    margin-bottom: 20px
}

#HulkAppsReviews #reviewsCarousel .review-item {
    display: block;
    background-color: #f2f2f2;
    /* padding: 30px; */
    margin: 5px
}

#HulkAppsReviews #reviewsCarousel .review-title {
    font-size: 16px;
    font-weight: 600;
    margin: 5px 0
}

#HulkAppsReviews #reviewsCarousel .review-author {
    font-size: 14px
}

#HulkAppsReviews #reviewsCarousel .review-date {
    font-size: 12px
}

#HulkAppsReviews #reviewsCarousel .review-body {
    margin: 15px 0
}

/* --------------------------------------------
              RAJOUT MAISON 
-------------------------------------------- */

.review-item { 
  -moz-border-radius : 5px ; 
  -webkit-border-radius : 5px; 
  border-radius : 5px; 
	}
  
.review-image { 
  -moz-border-radius : 5px 5px 0px 0px; 
  -webkit-border-radius : 5px 5px 0px 0px; 
  border-radius : 5px 5px 0px 0px; 
	}

.review-item .info { 
  padding: 25px;
	}


Que pourrais-je ajouter comme propriété CSS pour pallier à ce problème d'affichage ? Je suis preneur de toute aide et info, en vous remerciant par avance.

Loïc
Modifié par Loath (14 Sep 2019 - 23:26)
Salut,

Malheureusement pas de solution en CSS à ma connaissance pour obtenir un tel placement.... encore moins avec du grid.

Pour faire ça généralement il faut passer par du Js qui va répartir les articles dans les 3 colonnes différentes (et éventuellement calculer les hauteur pour bien les répartir etc).

Apres tu peux tenter de tricker au moment ou ton code est généré. Dans une première colonne ne mettre qu'un commentaire sur 3, dans la seconde pareil mais en partant du second et idem pour la 3 eme colonne. Par contre il y aura surement une différence de taille à la fin qui peut etre assez importante si ca tombe mal et qu'une colonne se retrouve avec seulement des commentaires sans phot par exemple (d'ou l’intérêt du js de calculer les hauteur).
Tiens il y a quelques pistes ici : https://w3bits.com/css-masonry/ avec plein de solution (et notamment cet article mais il y a du Js avec https://w3bits.com/css-masonry/ )

Mais en gros soit tes blocs on une hauteur définie (tu peux dire par exemple qu'un commentaire avec image est 2 fois plus grand qu'un sans image) mais tu fixe la hauteur de tes blocs docn ca aura l'ai un peu rigide, soit tu peux faire une grid avec énormément de petites lignes, calculer à la volée la hauteur d'un bloc et lui assigner une classe qui va prendre X lignes de ta grid (second lien).
Ah sinon à la fin du premier lien que je t'ai passé je suis retombé sur le column-count : https://www.w3schools.com/cssref/css3_pr_column-count.asp ou encore https://www.alsacreations.com/tuto/lire/1557-les-multicolonnes-en-css3.html

J'avais abandonné ca a l'époque à cause du support mais on dirait que ca va mieux là : https://caniuse.com/#search=column-count

Cette solution à l'air vachement plus intéressante (et simple a mettre en place) du coup.

Bon code !
Administrateur
Hello,

En effet, les multicolonnes sont de mieux en mieux supportées et pourraient être une bonne solution.

Si tu optes pour cette solution, il va tout de même falloir gérer les sauts de colonnes que l'on peut interdire via la propriété break-inside.

Petite démo : https://codepen.io/raphaelgoetter/pen/EqmBg?editors=1100
_laurent a écrit :
Salut,

Malheureusement pas de solution en CSS à ma connaissance pour obtenir un tel placement.... encore moins avec du grid.

Pour faire ça généralement il faut passer par du Js qui va répartir les articles dans les 3 colonnes différentes (et éventuellement calculer les hauteur pour bien les répartir etc).

Apres tu peux tenter de tricker au moment ou ton code est généré. Dans une première colonne ne mettre qu'un commentaire sur 3, dans la seconde pareil mais en partant du second et idem pour la 3 eme colonne. Par contre il y aura surement une différence de taille à la fin qui peut etre assez importante si ca tombe mal et qu'une colonne se retrouve avec seulement des commentaires sans phot par exemple (d'ou l’intérêt du js de calculer les hauteur).

Salut Laurent, merci pour ta réponse.
Effectivement, j'ai aujourd'hui recodé l'affichage complet de l'application en Flexbox, en partant d'une feuille blanche. J'ai assigner les items flexibles par colonnes avec nth-child et order. Le résultat est sympa, mais on se retrouve confronté au problème de déséquilibre des colonnes à la fin, qui peut être important. Je vais donc me pencher sur ce que tu proposes dans les messages suivant.
Modifié par Loath (12 Sep 2019 - 21:40)
_laurent a écrit :
Tiens il y a quelques pistes ici : https://w3bits.com/css-masonry/ avec plein de solution (et notamment cet article mais il y a du Js avec https://w3bits.com/css-masonry/ )

Mais en gros soit tes blocs on une hauteur définie (tu peux dire par exemple qu'un commentaire avec image est 2 fois plus grand qu'un sans image) mais tu fixe la hauteur de tes blocs docn ca aura l'ai un peu rigide, soit tu peux faire une grid avec énormément de petites lignes, calculer à la volée la hauteur d'un bloc et lui assigner une classe qui va prendre X lignes de ta grid (second lien).

Merci pour ton aide. Il me semble que le second lien est identique au premier .. ?
Modifié par Loath (12 Sep 2019 - 21:39)
_laurent a écrit :
Ah sinon à la fin du premier lien que je t'ai passé je suis retombé sur le column-count : https://www.w3schools.com/cssref/css3_pr_column-count.asp ou encore https://www.alsacreations.com/tuto/lire/1557-les-multicolonnes-en-css3.html

J'avais abandonné ca a l'époque à cause du support mais on dirait que ca va mieux là : https://caniuse.com/#search=column-count

Cette solution à l'air vachement plus intéressante (et simple a mettre en place) du coup.

Bon code !

Merci. Je n'ai pas bien compris ce qu'il y avait à voir sur le lien suivant : https://caniuse.com/#search=column-count
Désolé d'avance, je me débrouille en informatique mais je ne suis pas un pro du code. Je n'en fais que ponctuellement. En revanche, je suis débrouillard, et je n'hésite pas à bien me documenter pour arriver au rendu voulu. Je vais commencer à me pencher sur le code du CSS Masonry layouts (avec html, css, et JS), pour voir si je peux l'intégrer à mon binz. Merci encore d'avoir pris le temps de me répondre.
Modifié par Loath (12 Sep 2019 - 21:46)
Hahaha oui dsl pour les liens je me suis embrouillé avec mes onglets on dirait ! Smiley sweatdrop

Le site caniuse montre les compatibilités des navigateurs pour le CSS, HTML, Js, svg etc...
Ici https://caniuse.com/#search=column-count on peut donc voir la compatibilité ds navigateurs avec la propriété column-count la ligne principale représente les versions actuelle des navigateurs, et ici tout est vert donc ca veut dire que c'est reconnu par tout les navigateurs récent et c'est une très bonne chose. Apres selon tes besoins de compatibilité tu peux regarder jusqu'a quelle ancienne version c'est supporté. Par exemple jusqu’à IE9 column-count n'est pas reconnu par IE. C'est un outils très utile qui permet de savoir si une fonctionnalité est assez mure pour être utilisée en production ou non.

Et sinon La démo de Raphael est parfaite pour ce que tu veux faire je pense. Penche toi la dessus en priorité. Smiley smile
_laurent a écrit :
Hahaha oui dsl pour les liens je me suis embrouillé avec mes onglets on dirait ! Smiley sweatdrop

Le site caniuse montre les compatibilités des navigateurs pour le CSS, HTML, Js, svg etc...
Ici https://caniuse.com/#search=column-count on peut donc voir la compatibilité ds navigateurs avec la propriété column-count la ligne principale représente les versions actuelle des navigateurs, et ici tout est vert donc ca veut dire que c'est reconnu par tout les navigateurs récent et c'est une très bonne chose. Apres selon tes besoins de compatibilité tu peux regarder jusqu'a quelle ancienne version c'est supporté. Par exemple jusqu’à IE9 column-count n'est pas reconnu par IE. C'est un outils très utile qui permet de savoir si une fonctionnalité est assez mure pour être utilisée en production ou non.

Et sinon La démo de Raphael est parfaite pour ce que tu veux faire je pense. Penche toi la dessus en priorité. Smiley smile

Merci pour ton explication Laurent, je comprend mieux maintenant.
Raphael a écrit :
Hello,

En effet, les multicolonnes sont de mieux en mieux supportées et pourraient être une bonne solution.

Si tu optes pour cette solution, il va tout de même falloir gérer les sauts de colonnes que l'on peut interdire via la propriété break-inside.

Petite démo : https://codepen.io/raphaelgoetter/pen/EqmBg?editors=1100

Merci Raphael pour ta réponse.
Après avoir essayé en Grid, en Flexbox, et via CSS Masonry Generator (html, css, js), les multi-colonnes type Masonry semble être ce qui marche le mieux. Dommage car j'aime beaucoup le rendu depuis le générateur CSS Masonry . Mais ça ne fonctionne pas chez moi, certainement un conflit JavaScript avec les scripts de l'application Product Reviews que j'utilise comme base pour un shop Shopify. J'ai cherché un peu, mais comme je ne connais pas le JS... Quand j'aurais un peu plus de temps, je m'intéresserais de plus près au JS. J'ai déjà mis dans les favoris le cours de Pierre Giraud à ce sujet qui me semble bien complet.

Concernant les multi-colonnes, je suis donc parti de ce code ICI. Le résultat commence à être sympa. Je peaufine le tout depuis ce matin pour adapter mes reviews.
Concernant l'ordre d'affichage des blocs commentaires, vers quoi puis-je me tourner pour les ordonner par ligne et non par colonne ? Actuellement les blocs sont afficher par colonne de façon décroissant comme ceci :

11 - 09 - 06 - 03
10 - 08 - 05 - 02
---- 07 - 04 - 01

Commentaire 01 tout en bas à droite, puis on remonte 02, 03, et ainsi de suite.
Il serait plus logique d'obtenir un affichage par ligne comme ceci :

06 - 05 - 04
03 - 02 - 01

Voila à quoi ça ressemble actuellement (je pourrais y mettre le code si besoin) :

upload/1568382788-77009-capturedaeacran2019-09-13aa15.jpg
Modifié par Loath (13 Sep 2019 - 15:58)
Administrateur
Loath a écrit :

Concernant l'ordre d'affichage des blocs commentaires, vers quoi puis-je me tourner pour les ordonner par ligne et non par colonne ?

Ah.
Comment dire.
Cette contrainte, jusqu'alors inconnue, vient tout changer dans l'équation.

Si tu choisis d'utiliser le modèle d'affichage "Multicolumns" de CSS c'est uniquement pour disposer en colonnes et non par lignes. Si nous avions eu cette information, nous ne t'aurions jamais orienté vers cette spécification.

Il va falloir changer de technique :
- Flexbox pur : https://tobiasahlin.com/blog/masonry-with-css/
- Flexbox + un minimum de JS : https://codepen.io/inorganik/pen/pREYPJ
- Grid Layout (avec ton générateur par exemple)
Raphael a écrit :

Ah.
Comment dire.
Cette contrainte, jusqu'alors inconnue, vient tout changer dans l'équation.

Si tu choisis d'utiliser le modèle d'affichage "Multicolumns" de CSS c'est uniquement pour disposer en colonnes et non par lignes. Si nous avions eu cette information, nous ne t'aurions jamais orienté vers cette spécification.

Il va falloir changer de technique :
- Flexbox pur : https://tobiasahlin.com/blog/masonry-with-css/
- Flexbox + un minimum de JS : https://codepen.io/inorganik/pen/pREYPJ
- Grid Layout (avec ton générateur par exemple)

Merci Raphael.
Je commence à avoir testé pas mal de solution dont le Flexbox pur et celui avec JS que tu cites. Pour résumer les besoins d'affichage de mon application Reviews, il faudrait idéalement :

• Un affichage type Masonry
• Ne pas avoir à déterminer une hauteur fixe du conteneur
• Ordre d'affiche décroissant par ligne (8/7/6/5, puis à la ligne, 4/3/2/1, etc). L'ordre peut légèrement changer au besoin d'ajustement et de distribution automatique des blocs pour ajuster la hauteur des colonnes entre elles.
• Responsive, 4 colonnes, puis 3, puis 2, puis une suivant la taille d l'écran

Idéalement avec peu voir pas de JavaScript. Je ne sais pas le programmer, juste l'intégrer. Mais surtout l'application de Reviews utilise déjà une grosse partie en JS. En rajouter en gérant son affichage en JavaScript poserait potentiellement un problème de compatibilité si j'ai bien compris. C'est ce que j'en ai déduit de mon essaie avec le CSS Masonry Generator qui nécessite deux scripts JS.

Voila ce que j'ai déjà essayé (je ne me souviens plus exactement de tous les problèmes rencontrés vu le nombre de technique testées et adaptées pour l'application) :

1) CSS 12 Column Grid : trop d'écart de hauteur à la fin entre chaque colonne
2) Flexbox pur type Pinterest : reste en 3 colonne peut importe la taille de l'écran
3) CSS Masonry Generator : problème de compatibilité avec le JS de l'application
4) Multicolomns : Affichage au top, responsive, mais ordre d'affiche en colonne et non en ligne
5) Masonry with flexbox and minimal js : trop figé, si on détermine 4 colonnes sur grand écran, on se retrouve avec 4 minuscules colonnes sur Smartphone. Affichage peu optimisé avec 1 ou 2 commentaires. Au delà c'est ok.
6) Flexbox pur : peut importe la taille de l'écran, le nombre de colonne reste également figé. Obligé de déterminer une hauteur du conteneur, pas vraiment compatible avec un application de commentaire. La hauteur varie trop aléatoirement pour fixer une hauteur. Mise à part ça l'affichage est bon, et l'ordre peut être géré correctement. Petit bémol sur l'affichage avec seulement 2 items, peu optimisé.

N'étant pas un spécialiste du code, je ne sais pas si les défauts des multiples solutions peuvent être contourner sans faire de grosse programmation JS.

En résumé, les plus concluant actuellement sont : 4) Multicolomns / 6) Flexbox pur / 5) Masonry with flexbox and minimal js

Peut on , comme sur le multi-colonnes via @media, déterminer le nombre de colonnes à afficher suivant la taille de l'écran sur les technique de Flexbox pur et de Masonry with flexbox and minimal js ? Qu'est ce qui au final serait le plus adapté dans mon cas ?

Merci d'avance pour votre aide.
Modifié par Loath (15 Sep 2019 - 17:47)
Beaucoup d'exemple de Masonry ICI et LA. Mais quelle base choisir pour répondre à mes besoins...
Au final, j'ai opté pour le Masonry with flexbox and minimal js que tu as posté Raphael.

J'ai bien pris le temps de le configurer puis de l'intégrer avec mon application de reviews. J'ai commencé par le passé en 4 colonnes, puis par la rendre un peu plus sexy avant d'y intégrer les data des commentaires qui sont appelées via le framework vue.js. J'ai également pris le temps de bosser un peu le JavaScript (même si je ne sais pas le coder) pour avoir un nombre de colonne différent en fonction de la taille de l'écran.

En revanche, je bloque sur un point. La hauteur des éléments flexibles. Mes blocs de commentaire auront une hauteur aléatoire en fonction de leur contenu (texte, photo, etc). Hors sur le code Masonry with flexbox and minimal js, la hauteur de chaque .block est défini dans la partie html :
<div class="block" style="height:430px;">

Si l'on supprime cette hauteur, chaque .block est étiré pour occupé l'intégralité de l'espace horizontal. On se retrouve donc avec des .block empilé ligne par ligne, les un au dessus des autres comme ici : Masonry Flexbox + JS (sans hauteur de bloc)

Une idée de comment résoudre ce problème, qui rend ce script inutilisable dans mon cas ?

Merci d'avance !
Modifié par Loath (16 Sep 2019 - 22:42)
Administrateur
Jean-Pierre-Bruneau a écrit :
Pourquoi restez vous dans les arrangements à l'ancienne alors que les nouveaux outils de HTML5 vous tendent les mains ????

Oui. Mais je n'ai pas compris le rapport avec le sujet Smiley smile
Modifié par Raphael (18 Sep 2019 - 14:39)
Raphael a écrit :

Oui. Mais je n'ai pas compris le rapport avec le sujet Smiley smile

Idem, quel rapport avec l'affichage Masonry ?