Centrer verticalement une image dans une rangée
4 years 10 months ago #56962
by ced1870
Joomlack Webmaster and Developer
Replied by ced1870 on topic Centrer verticalement une image dans une rangée
ok , alors essaie avec ce code CSS
Code:
.pajade-flex div.cktype {
height: 100%;
}
.pajade-flex div.imageck {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.pajade-flex div.imageck img {
margin: auto !important;
}
Joomlack Webmaster and Developer
Please Log in or Create an account to join the conversation.
4 years 10 months ago #56984
by jmgroud
Le peu que je sais est occulté pas le trop que je ne sais pas !
Replied by jmgroud on topic Centrer verticalement une image dans une rangée
Bonjour Cedric
Merci pour cette exemple. Ca ne fonctionne pas tel-quel mais si j'ajoute ...
L'image est bien centrée verticalement 
Le centrage vertical est possible, mais ceci ne fonctionne pour l'instant que pour l'image...
En effet, si je remplace l'image par un autre objet, un simple texte (exemple du bloc de droite) ou un autre objet (onglets, boutons, etc...), ce centrage vertical ne fonctionne pas.
Si j'ai bien compris, le centrage lui-même s'effectue par les lignes...
Si je remplace l'image par du texte (par exemple), cette classe est remplacée par "cktext", donc pas de centrage.
Si je devais mettre en place cette méthodologie de façon globale, et si j'ai bien compris le système, il faudrait ajouter dans le CSS personnalisé dans mon template des lignes spécifiques pour tous les objets disponibles dans la liste de gauche dans Page Bulder CK, donc pour les images, les textes, les boutons, les sliders, les images animées, les onglets horizontaux et verticaux, etc... Oui ? Non ?
Hormis le fait que c'est "un peu galère" pour centrer tous ces objets (bcp de lignes de programmations), il faudrait :
- Créer une classe spécifique pour cadrer en haut
- Créer une classe spécifique pour cadrer en bas
- Et le faire pour toutes les classes des objets qui peuvent être déposés dans les blocs.
J'image que tout ceci doit fonctionner, mais à chaque modification de version de Page Builder CK, nous pouvons rajouter le risque de voir éventuellement d'autres classes apparaître, disparaître, se modifier, etc... Il faudrait donc à chaque mise à jour de Page Builder CK vérifier que le CSS personnalisé fonctionne toujours.
Je me pose donc la question suivantes : N'est-il pas possible de simplifier ?
Première idée
Avoir dans Page Bulder CK (dans une prochaine version) la possibilité d'un centrage vertical à l'intérieur d'un bloc, et ceci quelque soit le contenu du bloc ?
Deuxième idée
Avoir un CSS personnalisé mais plus simple qui permettrait de centrer le bloc complet (et non pas son contenu).
J'imagine (peut-être à tors) gérer la position verticale du bloc de classe "cktype" (en haut, en bas ou au centre) car ce bloc semble être celui qui ne change jamais de nom quelque soit son contenu. Dans ce cas, si vous avez des idées de customisation CSS (haut, bas, centre), je suis preneur.
N'étant pas du tout à la hauteur des spécialistes CSS j'en ai mal à la tête :whistle:
Un grand merci d'avance.
Jean-Marie
Merci pour cette exemple. Ca ne fonctionne pas tel-quel mais si j'ajoute ...
Code:
.pajade-flex div.innercontent {
height: 100%;
}

Le centrage vertical est possible, mais ceci ne fonctionne pour l'instant que pour l'image...

En effet, si je remplace l'image par un autre objet, un simple texte (exemple du bloc de droite) ou un autre objet (onglets, boutons, etc...), ce centrage vertical ne fonctionne pas.
Si j'ai bien compris, le centrage lui-même s'effectue par les lignes...
Ligne directement associée à la classe "imageck"....pajade-flex div.imageck img {
margin: auto !important;
}
Si je remplace l'image par du texte (par exemple), cette classe est remplacée par "cktext", donc pas de centrage.
Si je devais mettre en place cette méthodologie de façon globale, et si j'ai bien compris le système, il faudrait ajouter dans le CSS personnalisé dans mon template des lignes spécifiques pour tous les objets disponibles dans la liste de gauche dans Page Bulder CK, donc pour les images, les textes, les boutons, les sliders, les images animées, les onglets horizontaux et verticaux, etc... Oui ? Non ?
Hormis le fait que c'est "un peu galère" pour centrer tous ces objets (bcp de lignes de programmations), il faudrait :
- Créer une classe spécifique pour cadrer en haut
- Créer une classe spécifique pour cadrer en bas
- Et le faire pour toutes les classes des objets qui peuvent être déposés dans les blocs.
J'image que tout ceci doit fonctionner, mais à chaque modification de version de Page Builder CK, nous pouvons rajouter le risque de voir éventuellement d'autres classes apparaître, disparaître, se modifier, etc... Il faudrait donc à chaque mise à jour de Page Builder CK vérifier que le CSS personnalisé fonctionne toujours.
Je me pose donc la question suivantes : N'est-il pas possible de simplifier ?
Première idée
Avoir dans Page Bulder CK (dans une prochaine version) la possibilité d'un centrage vertical à l'intérieur d'un bloc, et ceci quelque soit le contenu du bloc ?
Deuxième idée
Avoir un CSS personnalisé mais plus simple qui permettrait de centrer le bloc complet (et non pas son contenu).
J'imagine (peut-être à tors) gérer la position verticale du bloc de classe "cktype" (en haut, en bas ou au centre) car ce bloc semble être celui qui ne change jamais de nom quelque soit son contenu. Dans ce cas, si vous avez des idées de customisation CSS (haut, bas, centre), je suis preneur.
N'étant pas du tout à la hauteur des spécialistes CSS j'en ai mal à la tête :whistle:
Un grand merci d'avance.
Jean-Marie
Le peu que je sais est occulté pas le trop que je ne sais pas !
Please Log in or Create an account to join the conversation.
4 years 10 months ago #56985
by jmgroud
Le peu que je sais est occulté pas le trop que je ne sais pas !
Replied by jmgroud on topic Centrer verticalement une image dans une rangée
Après quelques "bidouilles" sans forcément tout comprendre mais tout semble fonctionner...
Voici ce que j'ai indiqué au niveau de la customisation CSS du template :
Il semblerait que l'on puisse avoir une certaine liberté de programmation avec Page Builder CK:
- J'ai créé 3 classes : une pour afficher en haut (pajade-haut), une en bas (pajade-bas), une autre pour centrer verticalement (pajade-centre)
- Si j'indique une de ces 3 classes dans la zone "class" de la partie "row_ID", tous les blocs réagissent de la même façon
- Si je désire avoir un cadrage vertical différent sur des blocs d'une même ligne, je laisse vide la zone "class" de la partie "row_ID" et j'indique la classe de cadrage dans la zone "class" de la partie "block_ID".
- Dans tous les cas, la zone "class" de la partie "ID" reste vide.
Tout semble fonctionner mais...
- Le code CSS que j'ai écrit est-il bien optimisé (j'ai dupliqué les 3 premières définitions de classes) ?
- Pensez-vous que ma méthode soit correcte ?
- Dommage qu'on ne puisse pas avoir ce choix de cadrage vertical directement dans Page Builder CK et que l'on soit obligé de passer par des créations de classes, dommage mais pas bloquant :whistle:
Pouvez-vous me dire ce que vous pensez de ma méthode et de l'écriture du CSS...
Merci
Jean-Marie
Voici ce que j'ai indiqué au niveau de la customisation CSS du template :
Code:
.pajade-haut div.innercontent {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.pajade-centre div.innercontent {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.pajade-bas div.innercontent {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.pajade-haut div.cktype {
margin-top: 0 !important;
margin-bottom: auto !important;
}
.pajade-centre div.cktype {
margin-top: auto !important;
margin-bottom: auto !important;
}
.pajade-bas div.cktype {
margin-top: auto !important;
margin-bottom: 0 !important;
}
Il semblerait que l'on puisse avoir une certaine liberté de programmation avec Page Builder CK:
- J'ai créé 3 classes : une pour afficher en haut (pajade-haut), une en bas (pajade-bas), une autre pour centrer verticalement (pajade-centre)
- Si j'indique une de ces 3 classes dans la zone "class" de la partie "row_ID", tous les blocs réagissent de la même façon
- Si je désire avoir un cadrage vertical différent sur des blocs d'une même ligne, je laisse vide la zone "class" de la partie "row_ID" et j'indique la classe de cadrage dans la zone "class" de la partie "block_ID".
- Dans tous les cas, la zone "class" de la partie "ID" reste vide.
Tout semble fonctionner mais...
- Le code CSS que j'ai écrit est-il bien optimisé (j'ai dupliqué les 3 premières définitions de classes) ?
- Pensez-vous que ma méthode soit correcte ?
- Dommage qu'on ne puisse pas avoir ce choix de cadrage vertical directement dans Page Builder CK et que l'on soit obligé de passer par des créations de classes, dommage mais pas bloquant :whistle:
Pouvez-vous me dire ce que vous pensez de ma méthode et de l'écriture du CSS...

Merci
Jean-Marie
Le peu que je sais est occulté pas le trop que je ne sais pas !
Please Log in or Create an account to join the conversation.
4 years 10 months ago #56992
by ced1870
Joomlack Webmaster and Developer
Replied by ced1870 on topic Centrer verticalement une image dans une rangée
je suis content que tu ais réussi à faire ce que tu veux, et oui on a un peu de liberté de création dans Page Builder CK 
pour ton code, il n'est pas si mal, à ta place je le garderais comme cela. Merci pour ton retour d'info

pour ton code, il n'est pas si mal, à ta place je le garderais comme cela. Merci pour ton retour d'info
Joomlack Webmaster and Developer
The following user(s) said Thank You: jmgroud
Please Log in or Create an account to join the conversation.
Time to create page: 0.212 seconds