Discussion :

[Zebulon777]

Bonjour tout le monde,

Je ne comprends pas pourquoi le centrage verticale dans le code suivant n'est pas pris en compte ?

Code :

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

1
2
<tr><td width='400' align='LEFT' valign='middle'>ASMA CRNA</td><td width='100' align='LEFT' valign='middle'></td><td width='400' align='LEFT' valign='middle'><IMG src='./Images/ledblue-icone-7520-32.png' width='32' height='32'>&nbsp;Nombre de posé pendant la P2</td><td width='100' align='LEFT' valign='middle'>0020</td></tr>

L'image et le libellé sont bien affichés dans la cellule, mais le texte reste désespérément en bas de la cellule.

Merci d'avance pour votre aide.

[Vil'Coyote]

l'image et le texte sont deux objet dissocié mettre un style globale n'affectera pas leur positionnement. apprend a utiliser le css et les div.

[Zebulon777]

Donc, si je comprends bien, il faut que je mette le texte dans une DIV ?
(A ce niveau de développement, je n'utilise pas de CSS)

Je suis désolé, mais je ne suis pas un pro, j'essaye de me débrouiller, mais là je coince : étant donné que toute la table est créée dynamiquement, je voudrai juste pouvoir simplement centrer verticalement le texte par rapport à l'image insérée.

Comment puis-je faire simplement cela ?

[Zebulon777]

Bon, en fait j'ai réussit à faire quelque chose, mais je ne suis pas sur de moi.

La ligne HTML (composée dynamiquement) donne ça :

Code html :

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

<tr valign='middle' ><td width='400' align='LEFT'><span class='SpanCentre'><IMG src='./Images/ledblue-icone-7520-32.png' width='32' height='32'></span>&nbsp;<span class='SpanCentre'>Nombre de posé pendant la P2</span></td><td width='100' align='CENTER'>0020</td>

Et le CSS est donc :

Code css :

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

1
2
3
4
5
6
7
8
 
/* SPAN CENTRE*/
.SpanCentre {
	padding:0px; /* aération interne de la zone de texte */
	vertical-align:middle;
	display:inline-block;
	line-height:10px; /* on rétablit le line-height */
}

Qu'en pensez-vous ?

[Invité]

Bonjour,

quand on voit ce genre de code :

Code html :

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

1
2
...<td width='400' align='LEFT' valign='middle'>...
...<tr valign='middle' ><td width='400' align='LEFT'>...

on se dit qu'il faut que tu apprennes EN PRIORITE le HTML !

Le HTML a évolué depuis le siècle dernier...

• utiliser des attributs obsolètes et/ou dépréciées n'arrangera pas ton problème.
• écrire tout le code SUR UNE SEULE ligne n'aide pas non plus à y voir clair.
• ... align='LEFT'><span ...><IMG ... : attributs et balises s'écrivent, de préférence, en minuscules.

...(A ce niveau de développement, je n'utilise pas de CSS)...

Pourtant le CSS est au coeur de ta question !

=> il te faut donc aussi apprendre à utiliser correctement le CSS.


En voici au moins les bases, pour les tableaux :

• Les tableaux (XHTML & CSS)

[Zebulon777]

Sympa les réponses. Doucement, les gars, j'essaye, j'essaye...

La ligne HTML que j'ai mise est juste un copier / coller de l'espion qui m'a permis de la récupérer, il va de soit que je ne fais pas tout tenir sur une seul ligne.

Quoiqu'il en soit, ce n'est pas mon métier, j'essaye de me débrouiller avec les moyens du bord et j'ai beaucoup appris grâce à "Développez" et les spécialistes qui s'y trouvent, il est donc normal que je me tourne vers ceux qui connaissent très bien le langage pour y trouver de l'aide.

Je vais suivre les liens et améliorer les choses

[miss_socrates]

Hormis les remarques de JReaux, le code me semble assez correct, mais je ne comprends pas pourquoi il y a 4 colonnes. Je pensais que le texte devait venir en dessous de l'image.
Autre question: que contient le tableau ? Des données chiffrées ? Ou bien sert-il juste à faire la mise en page?

[Zebulon777]

Les balises sont en majuscules car c'est tout simplement une habitude (peut-être mauvais, mais mon habitude quand même ) de codage.
Je trouve que c'est plus facile à lire comme ça.

Oui Miss, effectivement, je me sers du tableau pour faire de la mise en page, j'ai appris comme ça et je trouve ça plus facile.
En fait, l'image peut-être soit au-dessus, soit en-dessous, soit à gauche ou soit à droite du texte.

Ce morceau de code est du codé généré par un moteur d'inférence que je suis entrain de créer, donc, j'essaye de prévoir tous les cas de figure.

[Invité]

bonjour,

tu devrais vraiment t'intéresser aux techniques MODERNES et récentes (balises, attributs, mise en page,....)
Sinon, le moteur que tu crées sera obsolète (du moins son codage) avant même d'être terminé.

Commence déjà par utiliser le CSS, au lieu des attributs obsolètes align="..." valign="... !
Il est d'ailleurs possible (voire recommandé) d'utiliser des class afin de spécifier des comportements/styles particuliers.

Bon.
Pour ta question en particulier, il faut mettre l'attribut sur l'image, pas sur le td :

Code css :

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

table td img { vertical-align:middle; }

[Zebulon777]

Merci, je vais prendre tout ça en compte, mais il me faut de temps et, comme beaucoup de monde, j'en manque cruellement.