[RÉGLÉ] Css - Tableau - Nombre impaire

[_Ovb]

Bonjour à tous,

Voici ce que je souhaiterais faire :


Comme vous pouvez le voir j'y arrive.
Grâce à ceci :

.blog {
	-webkit-column-count: 2; 
	-moz-column-count: 2; 
	column-count: 2;
 }

Tout se passe bien, sauf quand j'ai un nombre d'objet impair :


A ce moment là il coupe l'objet en deux et met la moitié à droite et l'autre moitié à gauche pour respecter l'affichage en deux colonnes...

Aurriez-vous une solution pour moi ?

Merci à tous

[_Ovb]

Re : Css - Tableau - Nombre impaire

Rebonjour,
J'ai remplacé mon code par :

display:flex !important;

Cela fonctionne, mais est-ce le plus propre ?
Dois-je m'attendre a des déconvenues avec ce code ?

[ghazal]

Re : Css - Tableau - Nombre impaire

Salut,
j'utilise très régulièrement !important sans pb.

C'est de moins en moins nécessaire mais reste utile.
Par exemple, je ne modifie jamais les CSS propres à un template.
Je me débrouille pour rajouter un fichier CSS, genre custom.css ou user.css comme dans Protostar, dans lequel je place mes propres règles, ou une modif d'une règle existante.
Et !important est bien pratique dans certains cas.

[_Ovb]

Re : Css - Tableau - Nombre impaire

Salut,
j'utilise très régulièrement !important sans pb.

C'est de moins en moins nécessaire mais reste utile.
Par exemple, je ne modifie jamais les CSS propres à un template.
Je me débrouille pour rajouter un fichier CSS, genre custom.css ou user.css comme dans Protostar, dans lequel je place mes propres règles, ou une modif d'une règle existante.
Et !important est bien pratique dans certains cas.

Merci pour ton partage, cependant ici je parlais plus du : display:flex
Je n'ai qu'une expérience de copier coller en Css, ce qui fait que je n'ai aucune maturité par rapport à la pérénité et la qualité du code produit...

[lomart]

Re : Css - Tableau - Nombre impaire

Bonjour,

Si l'on se réfère à ce site http://caniuse.com/#search=flex
La prise en charge des flexbox s'améliore mais reste encore partielle pour IE11 et zero pour IE8 (toujours lui)

En ce qui me concerne, pour une fonction aussi importante que le layout, je resterais sur les bonnes vieilles méthodes encore un petit peu.

Si tu veux du multi-colonnes, tu peux t'inspirer de l'article que j'ai publié ce matin pour les listes de catégories http://lomart.fr/trucs-et-astuces/63...des-categories

[ghazal]

Re : Css - Tableau - Nombre impaire

Ooops. Erreur d'aigullage.

Si ta règle flex fonctionne, ne te pose pas trop de questions.
Mais il est important de tester sur les principaux navigateurs en "desktop" et en responsive.

En ce qui concerne flex, et si tu ne maitrises pas vraiment les les CSS (si je te comprends bien), tu n'abordes pas la question par l'angle le plus facile.
Flex est typiquement un ajout CSS3 qui a subi pas mal de modifs depuis son apparition, le temps que les différents navigateurs (chrome, FF, etc ...) s'ajustent ... ou pas.

En ce qui me concerne, pour une fonction aussi importante que le layout, je resterais sur les bonnes vieilles méthodes encore un petit peu.

+1 avec lomart

[_Ovb]

Re : Css - Tableau - Nombre impaire

Merci Lomart,
En fait pour être plus précis dans ma demande, j'ai déja repéré la class de tous les éléments, ils me reste à "simplement" trouvé la syntax pour construire mon tableau... Maintenant peut-être que je recherche des choses qui n'existent pas et que c'est directement dans le php que je trouverai mon bonheur (ou mon malheur au choix ).

Je commence a dévoré ton article dans 5minutes (clopine et kawa) et je reviens vers toi dans 1-2 aspirines

[_Ovb]

Re : Css - Tableau - Nombre impaire

En ce qui me concerne, pour une fonction aussi importante que le layout, je resterais sur les bonnes vieilles méthodes encore un petit peu.

+1 avec lomart

J'aimerais justement, mais ce qui est vieux comme les chemins pour vous est un nouveau monde pour moi ...
J'espère trouver mes réponsses dans le lien de lomart

[lomart]

Re : Css - Tableau - Nombre impaire

Ton contenu vient d'où ?
C'est un article, une catégorie d'articles au format blog ?

[_Ovb]

Re : Css - Tableau - Nombre impaire

J'aurais sans doute du commencer par là, désolé.
Voici le lien vers le type de page que j'essaye de mettre en tableau : http://undca.be/index.php/hainaut/lundi?start=6
Merci pour votre aide à tous les deux

Avec

.blog {
  display: table-cell !important;
 }

J'arrive à avoir plus ou moins l'aspect souhaité, me reste à trouvé comme lui dire de remplir plusieurs colonnes avec mes cellules...

[lomart]

Re : Css - Tableau - Nombre impaire

Tu peux utiliser mon module LM-MASONRY avec .blog.gmapfp comme bloc parent et .gmapfp_article comme bloc enfant
De mémoire, je dois gérer la double classe comme sélecteur, je vais vérifier

De plus cette methode te permets d'avoir des blocs de hauteurs différentes

[lomart]

Re : Css - Tableau - Nombre impaire

Je confirme la prise en charge de .blog.gmapfp comme sélecteur
Par contre gmapfp_article est un id. Je me suis fait avoir car il se répète, ce qui est normalement interdit (et illogique)
Il va falloir utiliser .gmapfp_table
Sur cette classe, on a actuellement un margin-right: 1.5em; Cela laisserait à penser que le bloc enfant est prévu pour être en multicolonne !
Avec LM-Masonry, il va falloir neutraliser cette marge par un .gmapfp_table {margin-right:0;} dans les règles CSS complémentaires

[_Ovb]

Re : Css - Tableau - Nombre impaire

C'est moi le margin-right
Toujours est-il que ton système fonctionne parfaitement ...
J'en reste bouche bée...
Même si je ne suis pas certain d'avoir compri la totalité de pourquoi et comment cela fonctionne... Cela Fonctionne !!!
Merci à toi

[lomart]

Re : Css - Tableau - Nombre impaire

Merci pour le retour

Même si je ne suis pas certain d'avoir compri la totalité de pourquoi et comment cela fonctionne... Cela Fonctionne !!!

C'est toute la magie de Masonry. Je ne fais que faciliter son utilisation dans Joomla.