11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Modifier une régle de style (height)

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, configurée avec un affichage blog 3 colonnes, deux lignes, 6 articles) 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-heigh
(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
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
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

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), elle colorie le texte en rouge

en JS
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
Modifié par micmor (05 Sep 2022 - 20:40)
Modérateur
Bonjour,


Je ne sais pas si tu es toujours coincé. Si ton but c'est que tout les bloc fassent la même hauteur, je pense que tu te casse bien trop la tête et qu'un brin de CSS suffit : un petit passage en flex (comme pour la section tck-modules en dessous en bleu et jeune c'est très bien) ou en grid, ca prendra 4 ou 5 ligne et ca sera hyper souple.

https://jsfiddle.net/undless/wnsb1jhd/

Bonne journée
Bonjour,

Merci pour ton aide et le lien.
Si on peut se passer de javascript, tant mieux, cela simplifie la gestion du site.

Mais je ne parviens pas - pour le moment - à faire le lien entre les règles CSS pour l'affichage de mes 3 modules et la modification de l'affichage par défaut "blog" de la page d'accueil (3 colonnes, 2 lignes).
Bonsoir. Votre grille est en float (left), il faudrait au moins la passer en flexbox, voir en grid layout.
Bonjour

Merci pour la piste. Mais de quelle grille, parlez-vous ? Celle du "maincontent " ?
Modifié par micmor (01 Sep 2022 - 08:52)
bon, j'avance un peu


.blog.tck-blog {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: max-content;
}


la grille s'affiche bien en 3 colonnes , 2 lignes.

Mais le soucis initial avec la hauteur des articles est de nouveau là, vu que j'ai retiré la règle CSS que j'avais mis auparavant

.tck-article.item.column-1,.tck-article.item.column-2,.tck-article.item.column-3 {
min-height:320px;
}


Donc , il me reste à trouver la règle CSS qui permet de calculer les hauteurs de la ligne 1 et de la ligne 2 en fonction de l'article le plus long de chaque ligne. On revient au problème du début qui avait été réglè par
.tck-article.item.column-1,.tck-article.item.column-2,.tck-article.item.column-3 {
min-height:320px;
}

mais qui impose que un des 3 articles d'une même ligne ne dépasse la valeur définie dans le min-heigt.
Moi j'ai testé sur votre site en ligne et ça fonctionne sans problème... excepté qu'il faut que les styles soient appliqués sur les éléments directs (pas comme actuellement).

Car, bien sûr, si les éléments directs ont bien tous la même hauteur grâce à grid, les éléments placés à l'intérieurs fonts ce qu'ils veulent... et c'est eux qui ont le style des bordures !

Bref, trop de div's tuent les div's...
Donc, le problème de la hauteur des articles (ceux entourés de bordures) n'est pas réglé avec la solution de la règle grid, on revient au point de départ.

sur les éléments directs (pas comme actuellement). Qu'attendez-vous par cela ?
Modérateur
Bonjour,

grid ou flex se doivent d'être utiliser sur les bons conteneurs pour avoir les effets escomptés.

Votre structure HTML est peut-être un peu trop fournis par rapport au visuel et source d'incompréhension dans l'usage de grid ou de flex .

flex(ou grid) est à appliqué au conteneur de la zone/structure à afficher en grille. : disons ici items-row et passons le en flex.

Les enfants direct vont donc remplir cette grille: ce sont -> span4 mais Ils n'ont aucun styles !

Alors pour que item remplisse la hauteur de span4 , il faut aussi se servir de flex ou grid sur span4 (le parent qui dessine la grille). Restons avec flex (mais grid ici irait bien aussi)

Enfin, ou peut alors aussi passer item en flex et modifions le sens de la grille en flex-direction:column;

On peut alors, par exemple, alignés les derniers contenus similaires des boites à partir de kunenadiscuss kpublic, en leur appliquant un margin:auto

récap des styles a ajoutés (faire attention au poids/spécificité des sélecteurs):
.items-row, .items-row div.span4, .item {display:flex;}
.span4 .item {flex-direction:column;}
.kunenadiscuss {margin-top:auto;}

pour ce viuel :
upload/1662037899-2857-flexflex.jpg





Et la version avec le conteneur intermédiaire en grid pour info :
.items-row, .item {display:flex;}
.items-row div.span4{display:grid;}
.span4 .item {flex-direction:column;}
.kunenadiscuss {margin-top:auto;}



Il y a des tutoriels ici même , par exemple https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html

Tu en trouveras d'autre avec le mot clé flex ou grid ici https://www.alsacreations.com/search/

Cdt
Modifié par gcyrillus (01 Sep 2022 - 15:11)
Un grand merci à vous trois @_laurent, @olivier c et @gcyrillus pour votre aide.

gcyrillus , j'ai encore beaucoup de chose à apprendre concernant les règles CSS. C'est assez complexe quand on veut sortir des sentiers battus. Merci pour tes explications et tes liens.

Etonnemment avec la première version 
.items-row, .items-row div.span4, .item {display:flex;}
.span4 .item {flex-direction:column;}
.kunenadiscuss {margin-top:auto;}


Le dernier article (article 3, ligne 2), la largeur de la bordure est plus petite, il y a donc un décalage d'alignement entre les bordures de l'article "3" et de la ligne 1 et l'article "3" de la ligne 2.
j'ai donc annulé ces règles CSS pour le moment

Par contre avec la version 2
.items-row, .item {display:flex;}
.items-row div.span4{display:grid;}
.span4 .item {flex-direction:column;}
.kunenadiscuss {margin-top:auto;}


Pas de problème, les bordures sont bien alignées.

EDIT

j'ai dû mettre ces règles dans la gestion du responsive "Ordinateur Autres résolutions
CSS personnalisés" et tablette format Portrait et Paysage CSS personnalisés

.items-row, .item {display:flex;}
.items-row div.span4{display:grid;}
.span4 .item {flex-direction:column;}
.kunenadiscuss {margin-top:auto;}


ll y avait un problème lorsque le site était visualisé sur smartphone. Donc je n'ai pas mis ces règles pour "Mobile format Portrait, paysage" sinon les articles étaient alignés sur une seule ligne.
Modifié par micmor (04 Sep 2022 - 13:28)
Par contre, pourrais-tu m'en dire plus sur
a écrit :

On peut alors, par exemple, alignés les derniers contenus similaires des boites à partir de kunenadiscuss kpublic, en leur appliquant un margin:auto


Donc c'est le lien de kunadiscuss qui détermine indirectement la hauteur des bordures des articles ??

Merci
Modérateur
micmor a écrit :


Donc c'est le lien de kunadiscuss qui détermine indirectement la hauteur des bordures des articles ??

Merci


Non, C'est tout le contenu de leur parent (.item) qui sont des enfants d'une grille(.span4) (grid ou flex selon le code que tu as gardé). C'est le plus haut de la ligne qui détermine la hauteur des autres. Ceux-ci etant en flex, les enfants peuvent être alignés (repoussés) à l'aide de marges. Ici une marge haute automatique, va repoussé vers le bas si il y a de la place.

L'exemple de @Laurent était bien plus concis et clair dans sa structure que la tienne et surement plus facile à appréhender que ta structure.
Un parent en grille et des enfants , pas de marge mais gap pour que les enfants ne se touchent pas. C'est , je pense, l'exemple que tu aurais du suivre pour bien comprendre comment flex ou grid fonctionne puis, ensuite , faire facilement la maintenance de ton HTML sans devoir tout réanalysé à chaque intervention ...

Cdt

edit , en reprenant le fiddle de laurent (modifie la largeur de la fenêtre d'affichage:
exemple avec les media queries : https://jsfiddle.net/ecm2xzhd/

exemple avec article aussi en flex et margin-top sur un paragraphe : https://jsfiddle.net/2z63yxvn/

Le code HTML est déjà beaucoup plus lisible et les styles appliqués beaucoup plus facile à retrouvés.
Modifié par gcyrillus (04 Sep 2022 - 13:12)
bon,

j'ai effectué les modifications selon le code de @_laurent et mis ces règles dans @media 


.items-row {
  display: flex;
  gap: 10px;
margin-bottom: 10px;
}


.span4  {
 flex: 1;
border-color: #d6d6d6;
border-style: outset;
border-width: 2px;
border-radius : 5px 5px 5px 5px;
padding:5px;
}


et supprimé les règles CSS 


//.items-row, .item {display:flex;}
//.items-row div.span4{display:grid;}
//.span4 .item {flex-direction:column;}
//.kunenadiscuss {margin-top:auto;}


et

//.tck-article.item.column-1,.tck-article.item.column-2,.tck-article.item.column-3 {
//  border-color: #d6d6d6;
//  border-style: outset;
//  border-width: 2px;
//  border-radius : 5px 5px 5px 5px;
//  padding: 10px;
//  margin-bottom: 10px;
//}


Le résultat obtenu , semble identique....
Modifié par micmor (04 Sep 2022 - 14:05)
Par contre, je ne comprends pas, pourquoi il faudrait utiliser la règle min-height, vu que les différents codes CSS (celui de @_laurent et @gcyrillus) fonctionnent bien sans min-height.
Modérateur
micmor a écrit :
Par contre, je ne comprends pas, pourquoi il faudrait utiliser la règle min-height, .... .


Aucun d'entre nous ne te la proposé, mais au contraire, proposé un systéme de grille pour ne pas t'en soucier Smiley smile
C'est certain, je faisais allusion au contenu des liens que tu m'avais renseigné : https://forum.alsacreations.com/topic-5-89865-1-Modifier-une-regle-de-style-height.html#p573715

par exemple ici: https://jsfiddle.net/ecm2xzhd/

Mais effectivement, tout fonctionne parfaitement sans le min-height. Quand je pense qu'au départ je partais sur une solution basée sur du javascript. J'ai encore beaucoup à apprendre sur le CSS. Connaissez-vous des titres de livres intéressants sur le sujet, (html, css). Car c'est parfois plus facile de lire la version papier que sur un écran .

Encore un très grand merci à vous trois.
Modifié par micmor (05 Sep 2022 - 20:40)
Sujet clos
Aller à