[RÉGLÉ] Multicolonnage du contenu des articles ?

[RobertG]

Bonjour,

Je n'arrive pas à comprendre comment gérer un multicolonnage "en standard", donc sans extension, pour l'affichage d'un contenu d'article, par exemple précédemment géré par un tableau.
J'utilise JCE et un template livré avec Astroid, et dans la barre de gestion du contenu d'article, dans la liste "styles", j'ai toute une série de "col" et "col-" suivi d'un nombre.

Il y a quelques jours, j'ai pensé utiliser "col-4" pour chacune des 3 parties de l'article, en pensant qu'elles se positionneraient l'une à côté de l'autre, mais elles se sont empilées verticalement.
Je ne comprends donc pas comment définir le style de chaque zone pour obtenir ce que je veux.

Merci de vos conseils !

[lomart]

Bonsoir Robert,

Je ne suis pas un utilisateur de JCE, mais je pense que col-x est la largeur basée sur une grille de 12 colonnes. Cela n'a rien à voir avec la mise en colonne de texte.
Dans UP, j'utilise ce CSS pour la mise en colonnes

@media (min-width:481px) {
  .text-col-2 {
    column-count: 2;
   column-gap: 20px;
   column-rule: 1px solid #999;
  }
  .text-col-3 {
   column-count: 3;
   column-gap: 20px;
   column-rule: 1px solid #999;
  }
}
.text-col-no-break {break-inside:avoid;}

Il faut encadrer le texte avec la classe text-col-x.
Si l'on veut conserver un bloc sur toute la largeur (ex un titre) on lui attribue une classe text-col-no-break

la mediaquerie force a une colonne sur smartphone

[RobertG]

Merci de ta réponse !

Je pensais aussi qu'utiliser la classe "col-4" fonctionnerait, j'ai même essayé d'englober les 3 parties dans une classe col-12, mais ça n'a pas fonctionné.
Mais je suis en train de me demander si je n'aurais pas oublié alors de mettre chaque partie dans une div... Il faudra que je voie si je retrouve sur quel site et dans quel article j'ai testé.

[lomart]

Mais je suis en train de me demander si je n'aurais pas oublié alors de mettre chaque partie dans une div...

L'intérêt du multi-colonnage est d'équilibrer la longueur de texte dans les colonnes en fonction de la largeur du navigateur et de la taille des caractères choisie par le visiteur.
Fractionner le texte dans des div.col-x ne remplit pas cette condition

[RobertG]

Merci Loïc,

En fait ce que je cherche à faire n'est pas ça, mais simuler un tableau ou dans le cas présent, placer dans un article trois parties distinctes comportant image et texte, avec un "lire la suite" qui était précédemment gérés en Joomla! 3 par un module Roksprocket.

[lomart]

OK, c'est le terme multicolonnage qui m'a induit en erreur

Si tu ne trouve pas, UP a une solution avec

{up flexauto=3}
texte et image colonne 1
{up readmore}
... le contenu masqué ...
{/up readmore}
{====}
texte et image colonne 2
{up readmore}
... le contenu masqué ...
{/up readmore}
{====}
texte et image colonne 3
{up readmore}
... le contenu masqué ...
{/up readmore}
{up flexbox}

[RobertG]

J'y avais pensé en effet, mais je voulais trouver une méthode juste avec du CSS pour utiliser ses fonctionnalités actuelles, sans ajouter d'extension sur le site en question.

[Helloo]

Bonjour,

Avec JCE (pro) tu peux insérer Flexbox avec un clic, c’est génial !

Flexbox c’est ça :

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

JCE exemple :

https://www.youtube.com/watch?v=YMYlcRBx5LA

[RobertG]

Merci de cette précision ! Il faut que je reprenne les fonctionnalités de JCE auxquelles je ne m'étais jusqu'ici pas intéressé, n'en ayant pas eu besoin.

[Helloo]

RobertG , comment ce fait ‘il que j’ai ton avatar ?




EDIT: C'est de nouveau bon, bizarre

[RobertG]

Il y a en effet parfois des erreurs de vBulletin sur l'affichage de qui a répondu !

Et malgré ma réponse, je te vois comme dernier intervenant, mais de nouveau avec mon avatar...

[cavo789]

vBulletin se montre parfois coquin ;-)

[Helloo]

Effectivement cavo789

Ce forum ma l'air malade, un virus ? Covid ? Faut-il mettre un masque pour publier ici ?

[RobertG]

Bon, cette fonctionnalité Flexbox ne correspond peut-être pas non plus.

J'ai actuellement un tableau de 4 lignes, avec encadrement du tableau et des cellules.
La première colonne a la même largeur pour toutes les lignes, la deuxième colonne prend toute la largeur restante sur les trois dernières lignes, la première étant divisée en 3 : 2-1-1

Je commence par la première ligne. Je créée une ligne de 3 colonnes avec les proportions 1-2-1 (je ne trouve pas plus d'option) puis je rajoute une colonne à cette ligne, qui prend la largeur 1. OK. J'insère du texte, mais impossible de définir la couleur du fond de cellule, il faut que je passe en mode code. Je ne peux pas non plus mettre une bordure, au moins pour l'ensemble de la ligne.
Si je teste en réduisant la largeur d'écran, les cellules s'empilent et ça ne veut plus dire grand-chose.
J'ajoute une deuxième ligne, mais impossible de définir une largeur de première colonne identique, sans compter l'empilement sur petits écrans..
Une image sera plus parlante :


Quelles sont mes erreurs ?
Merci de vos conseils !

[RobertG]

Bien, pour le tableau en question, la définition des largeurs et hauteurs à 100% suffit à ce qu'il soit correctement visible sur smartphone.
Pour d'autres, j'utiliserai si nécessaire Responsible Tables de Web-eau-net.

Et pour le multicolonnage de sections différentes au sein d'articles, UP devrait convenir.