Discussion :

[micmor]

bonjour

Je cherche la solution pour modifier une règle des style via du javascript. Le but étant d'aligner les bordures inférieures pour les trois articles, pour mon site www.caravane-camping.be (page d'accueil), se trouvant sur la même ligne (row-0 et row-1) quelque soit la longueur de l'article.

Car si j'emploie min-height et que la hauteur d'un des articles dépasse la valeur définie dans min-heigh, les bordures de celui-ci seront ajustées à cet article mais les autres bordures des articles restant respecteront la règle css min-height (si les hauteurs des autres articles sont plus petites que min-height).



Voilà où j'en suis pour le moment

1e étape
script en construction

Pour l'affichage de la première ligne des articles en blog

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var hauteurdiv = document.getElementsByClassName("items-row cols-3 row-0 row-fluid clearfix")[0].offsetHeight;
document.getElementsByClassName("tck-article item column-1")[0].style.height = hauteurdiv+"px";
document.getElementsByClassName("tck-article item column-2")[0].style.height = hauteurdiv+"px";
document.getElementsByClassName("tck-article item column-3")[0].style.height = hauteurdiv+"px";

les bordures inférieures sont bien alignées.


Pour l'affichage de la deuxième ligne des articles en blog

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var hauteurdiv2 = document.getElementsByClassName("items-row cols-3 row-1 row-fluid clearfix")[0].offsetHeight;
document.getElementsByClassName("tck-article item column-1")[0].style.height = hauteurdiv2+"px";
document.getElementsByClassName("tck-article item column-2")[0].style.height = hauteurdiv2+"px";
document.getElementsByClassName("tck-article item column-3")[0].style.height = hauteurdiv2+"px";

les bordures inférieures ne sont pas bien alignées.


j'ai essayé aussi en mettant

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var hauteurdiv2 = document.getElementsByClassName("items-row cols-3 row-1 row-fluid clearfix")[1].offsetHeight;
document.getElementsByClassName("tck-article item column-1")[1].style.height = hauteurdiv2+"px";
document.getElementsByClassName("tck-article item column-2")[1].style.height = hauteurdiv2+"px";
document.getElementsByClassName("tck-article item column-3")[1].style.height = hauteurdiv2+"px";

sans plus de résultat



EDIT: je me demande si en ajoutant la class du div supérieur cela ne fonctionnerait pas ?
par exemple:

pour la règle CSS ".row-0 .tck-article.item.column-1" la règle css d'essai est bien appliquée (color:red)

en JS

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsByClassName("row-0 tck-article item column-1")[0].style.height = hauteurdiv2+"px";

ne fonctionne pas, la hauteur "hauteurdiv" n'est pas appliquée. A-t-il moyen de mettre deux class CSS dans getElementsByClassName venant de div différent ?


2e étape
Après il restera à appliquer cela que pour la règle responsive @media screen and (min-width: 1025px) (affichage sur grand écran)



Merci

[mathieu]

vous parlez de 3 articles mais là j'en vois 6 actuellement, il y a "Comment protéger sa caravane contre le vol ?" et 5 autres, c'est bien ça ?

pour faire la mise en page avec des cases de même taille, essayez avec le modèle "grid". ainsi vous aurez seulement besoin de css et pas de javascript.
regardez là :
https://developer.mozilla.org/fr/doc...SS_Grid_Layout

[micmor]

Bonjour

Merci pour aide

oui, trois article en ligne 1 (row-0) et 3 articles en ligne 2 (row-1).. C'est l'affichage en blog sur 3 colonnes et 6 articles max

C'est l'affichage blog par defaut de joomla 3 , je ne pense pas que je puisse modifier le css facilement.