11481 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je souhaite remplir la cellule <td> d'un tableau <table> avec un bouton <a>, dans une ligne <tr> à hauteur variable.

Exemple ici : https://codepen.io/anon/pen/QMaZrG

Il semble que c'est à peu près impossible en CSS, aussi je me demande si ce ne serait pas faisable en JS ? Quelque chose comme
hauteur bouton en pixels = hauteur de la cellule qui le contient


Merci.
Bonjour.

Si, si, c'est possible en CSS : mettre la cellule en 'position : relative', le lien en 'position : absolute' et contraindre sur les quatres côtés comme une toile sur un cadre (left, top, right, bottom…).

Mais tel quel, ce n'est pas très joli car le lien n'est pas centré verticalement car alors 'vertical-align : middle' ne fonctionne pas.

Je ressortirais plutôt les pseudo-éléments et je mettrais la manip' du début sur un '::before'.

(Je me demande bien pourquoi height : 100% ne marche pas tout simplement.)

Smiley smile
Bonjour et merci pour cette piste.
Je n'arrive cependant pas à obtenir l'effet recherché en suivant vos instructions.
J'ai rajouté ça en fin de code mais sans aucun effet :
td {position:relative;}
a::before {
  position:absolute;
  right:0;
  left:0;
  top:0;
  bottom:0;
}
Toujours sur https://codepen.io/anon/pen/QMaZrG
Merci.
Modifié par Adage (18 Aug 2017 - 12:13)
Modérateur
J'avais tenté mais pas réussi.
C'est le height:1px; sur le table qui tient tout.... étrange.....
Bonjour.

Adage a écrit :

Je n'arrive cependant pas à obtenir l'effet recherché en suivant vos instructions.
J'ai rajouté ça en fin de code mais sans aucun effet :
td {position:relative;}
a::before {
  position:absolute;
  right:0;
  left:0;
  top:0;
  bottom:0;
}

Désolée, je n'avais pas vérifié mais apparemment les cellules ne semblent pas pouvoir servir de référence pour les pseudo-éléments…

kustolovic a écrit :
non cela ne fonctionne pas car on ne peut mettre position: relative sur une cellule de table (le résultat est indéfini)

Ça a l'air de fonctionner pour Firefox en positionnant directement le lien en absolu dans une cellule en relative… (celle-là, j'avais vérifié). Mais si ça ne fonctionne pas pour d'autres navigateurs… votre méthode est probablement meilleure.

Smiley smile
Modifié par Zelena (18 Aug 2017 - 17:33)
kustolovic a écrit :
on ne peut mettre position: relative sur une cellule de table

En fait c'était vrai avant mais maintenant il est tout à fait possible de le faire (si je ne dis pas de bêtises)...
kustolovic a écrit :
Bonjour

non cela ne fonctionne pas car on ne peut mettre position: relative sur une cellule de table (le résultat est indéfini)

La solution consiste à mettre la cellule en height: 100% ainsi que son contenu:

https://codepen.io/anon/pen/XaZpGw
Merci, ça fonctionne merveilleusement bien. Par contre je n'arrive pas à faire un vertical-align:middle... et les line-height:100% ne semblent pas fonctionner...

Une idée ?

Merci encore !
Bonjour.

Adage a écrit :
Par contre je n'arrive pas à faire un vertical-align:middle... et les line-height:100% ne semblent pas fonctionner...

Avec 'display : block', 'a', le lien n'est plus seulement que du texte, mais aussi un contenant qui prend déjà toute la place disponible. Il faut le centrer à l'intérieur de lui-même.
En mettant une valeur à line-height ?
line-height: 2;
line-height: 3;


Smiley smile
Zelena a écrit :
En mettant une valeur à line-height ?
line-height: 2;
line-height: 3;


Smiley smile
Mettre une valeur à line-height impliquerait que la hauteur de la ligne est fixe... Pourtant elle peut faire 2, 4, 8 lignes de haut... Ou alors j'ai raté quelque chose... ?
Merci.
Modérateur
Et en ajoutant cela:


a::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
Adage a écrit :
Mettre une valeur à line-height impliquerait que la hauteur de la ligne est fixe... Pourtant elle peut faire 2, 4, 8 lignes de haut... Ou alors j'ai raté quelque chose... ?

Line-height est la taille de l'interligne, et avec un nombre, elle est proportionnelle à la taille de la police.

@kustolovic : joli 'strut'.

Smiley smile