Uniformiser hauteur des modules et position d'un bouton

[RobertG]

Bonjour à tous,

Je suis sur un projet où la page d'accueil, au lieu de contenir 6 intros d'articles, affichera à la place deux lignes de 3 modules chacun contenant éventuellement une image, un peu de texte et un bouton "lire l'article".
En utilisant un "min-height" pour moduletable et moduletable > div dans la feuille de style et en ajoutant une bordure, les modules sont bien uniformisés, mais je ne trouve pas comment forcer le bouton à se positionner en bas du module pour que tous les boutons soient au même niveau.
Avez-vous une idée de comment faire ?


Merci de vos conseils !
Robert

[Eddy.vh]

Salut Robert.

Je pense que si tu déclares un parent du bouton (selon le html) en position relative, tu peux placer le bouton en absolu et gérer son placement par rapport au bottom.

[RobertG]

Merci Eddy,

Le CSS n'a jamais été ma tasse de thé...
J'ai réussi avec ce code en fin de contenu (l'ajout est en gras), mais je ne sais pas s'il n'y aurait pas plus simple en ajoutant une classe dans la feuille de style personnalisée (je pense à ceux qui vont gérer le site et auron peut-être à créer d'autres modules :

<img style="display: block; position: absolute; top: 360px; left: 80px; margin: 15px auto;" src="images/modules/lire.png" alt="Lire l'article" />

[RobertG]

Bon, j'avance, mais ce n'est pas encore ça ! Dans le fichier custom.css du template, j'ai ajouté la classe que j'ai ensuite utilisée, manuellement, dans le code du module :

.btonlire {
position:absolute;
top:350px;
left:95px;
}

L'ennui, c'est que ce fichier n'est pas récupéré dans l'éditeur de texte (JCE) et que je ne vois pas comment l'y faire intégrer dans la liste des styles, mais aussi qu'en fonction des écrans, comme sur tablette ou smartphone, le bouton n'est plus correctement centré.
Je n'ai pas l'expérience des instructions fonction de ces tailles d'écran comme "@media screen and (min-width: 1300px) {"

[lomart]

Bonjour Robert,

Tu peux utiliser flexbox pour cela (avec ou sans UP).
Inspire toi de la dernière partie de cette page qui montre plusieurs méthodes de justification verticale : https://up.lomart.fr/liste-css/css-flexgrid

[RobertG]

Merci Loïc, mais je suis paumé. J'essaierai d'y revenir plus tard.

[RobertG]

Encore merci ! Je m'en suis sorti avec flexbox pour le moment.
Je regarderai avec UP car passer en mode code pour les modifications ne me semble pas l'idéal pour les gestionnaires du site !

[lomart]

Pour tes tests avec UP, voici un shortcode pour démarrer. Il peut être saisi ave un éditeur wysiwyg

<p>{up flexauto=3 | mobile=1 | class=fg-gap fg-vspace-between-1 m-child-raz-1 | css-head=#id > * [border:1px grey solid]}</p>
<h3>titre</h3>
<p>texte</p>
<p>texte</p>
<button>Le bouton</button>
<p>{============}</p>
<h3>titre</h3>
<p>texte</p>
<button>Le bouton</button>
<p>{============}</p>
<h3>titre</h3>
<p>texte</p>
<p>texte</p>
<p>texte</p>
<p>texte</p>
<button>Le bouton</button>
<p>{/up flexauto}</p>

fg-vspace-between-1 répartit verticalement sur toute la hauteur
m-child-raz-1 supprime les margin/padding du 1er et dernier blocs
-1 veut dire que la règle est pour le niveau -1

[RobertG]

Merci Loïc,

J'essaierai, mais pour le moment, je ne vois pas comment appliquer ça aux 6 modules qui sont côte à côte et sur deux lignes.
Et comme j'ai un autre problème sur du multicolonne qui fonctionne sur plusieurs navigateurs mais pas Firefox, je suis plus préoccupé par ça, puisque l'utilisation de classes a résolu le premier besoin.

[lomart]

Bonjour Robert,

je ne vois pas comment appliquer ça aux 6 modules qui sont côte à côte et sur deux lignes.

justement, c'est cela que fait le shortcode !
flexauto=3 | mobile=1 met 3 blocs par ligne sur grand écran et 1 sur mobile. Tu peux ajouter tablet=2 pour avoir 3 lignes de 2 sur les moyens écrans

Depuis la version 1.7 de UP, le webmaster peut créer des jeux d'options pour éviter aux rédacteurs de se perdre dans le code. Actuellement, je suis en train d'adapter toutes les actions pour cela.

 {up flexauto=3 | tablet=2 | mobile=1 | class=fg-gap fg-vspace-between-1 m-child-raz-1 | css-head=#id > * [border:1px grey solid]}

devient

{up flexauto=3blocs}

Je pense rendre disponible la nouvelle version de UP assez vite. Mais si tu as besoin, je t'envoie la version adaptée pour flexauto

[RobertG]

Merci, je pourrai attendre cette nouvelle version.