Template softico, modules new 1,2,3,4,

Bonjour

J'utilise le template softico pour un de mes sites  ( www.asbl-des-locaux.be/ )

Afin de diminuer la hauteur entre les modules (new) et le "content", j'aimerais que les modules new1 (l'agenda de l'asbl), new2, new3, new4 (les documents de l'asbl)  soient de la même hauteur lorsqu'ils sont au repos.  Par exemple, dans mon cas, même hauteur que new 4, quel que soit le contenu dans le module.

Et, lorsqu'on sélectionne un des modules (new), celui-ci s'ouvre à pleine hauteur (selon son contenu)  et idéalement par-dessus, le "content".

Est-ce possible ?

Merci
 

en mettant
ici hauteur max 150px, les modules peuvent être de la même hauteur

et

Il manque une règle pour rendre le fond opaque et la couleur du background sur toute la hauteur (et pas 150 px avec la règle modifiée au-dessus, lorsqu'on sélectionne le module (contenu).

z-index:1 ne fonctionnant pas.


Merci

Bon avec un petit mélange de chat gpt , de nombreux essais de modification css, je suis arrivé à ceci

 


En mettant   " document.querySelectorAll(".news1, .news2, .news3, .news4")" , c'est ok pour les quatres modules

puis 3 règles css supplémentaires


Et cela semble fonctionner . Mais, a-t-il plus simple pour y arriver, sans le script ?

Merci

EDIT, j'ai déjà trouvé des inconvénients à cette solution,
- l'affichage sur mobile ne fonctionne pas, les modules se superposent.
- impossible de cliquer sur les liens en fin de modules newxxx, par exemple dans le module news1. Je suppose que c'est dû aux hauteurs différentes pour les modules dans les règles css.

J'ai désactivé pour les moments les modifcations, trop de bug à l'affichage, c'est dommage.

Salut
c'est assez bizarre ta demande car en fait tu voudrais modifier la hauteur des éléments au survol, cela inclut de pousser la page vers le bas avec des effets yoyo

perso je pense que tu pourrais le faire avec un truc du genre en css
CEd

Rien à dire, on reconnait le travail du pro.

Ok sur bureau, ok sur mobile. C'est tout à fait le fonctionnement que je voulais.

c'est assez bizarre ta demande, car en fait, tu voudrais modifier la hauteur des éléments au survol, cela inclut de pousser la page vers le bas avec des effets yoyo

Avec le script, il n'y avait pas d'effet yoyo, juste que le contenu (maincontent) était atténué lors du survol des modules et de l'affichage de ceux-ci. Mais, avec les deux inconvénients cités plus haut.

Ta solution permet de se passer du code javascript et c'est bien mieux ainsi. En analysant ton code, tu as utilisé un div plus haut dans la hiérarchie css que moi "#newstopcolumn1 et utilisé z-index:11,  et pourquoi 11,10,9,8 ?

Merci

EDIT le z-index 11,10,9,8 , n'est-ce pas pour gérer justememt le problème d'affichage sur un mobile et éviter la superposition des module dans ce cas ?
 

content que ça marche

et pourquoi 11,10,9,8 ?

oui c'est pour mobile car les modules sont les uns sous les autres, il faut que celui plus haut s'affiche au dessus des autres