[HTML] Espace genant dans formulaire avec bouton image

**lysandre** · 02/10/2007, 13h06

Bonjour tout le monde!

Voici le code posant probleme:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
 
</head>
<body>
<form action="page.html" method="POST">
 
<input type="TEXT" name="chercher" size="1" maxlength=70>  <input TYPE="IMAGE" SRC="images/chercher.jpg">
</form>
     </body>
</html>

Quoi que je fasse (taille différente de l'image, formulaire dans un tableau avec valign="middle",...) il y a toujours un decalage anormal vers le bas entre le champ de saisie et le bouton image). Comment faire?
Ce probleme ne se produit pas avec un bouton input type="submit".

**Bisûnûrs** · 02/10/2007, 13h39

Etant donné que ce sont des éléments inline, avec juste ce code HTML les deux input se mettent l'un à côté de l'autre. Donc tu as queluqe part dans ton code CSS une valeur qui produit ce décalage. Donc si tu pouvais nous montrer ton CSS ..

**lysandre** · 02/10/2007, 13h45

Bonjour Bisûnûrs!

Pas de code css. Le probleme se produit avec le code ci-dessus...

Mon interpretation est que la balise input type="text" contient un espace vide invisible en haut, ainsi elle apparait décalée vers le bas et n'est pas centrée quand on met valign du contenant sur middle (elle est centrée mais en comprenant l'espace vide). Mais ca parait bizarre que cet espace vide apparaisse uniquement quand on met une balise input type="image"...

**Bisûnûrs** · 02/10/2007, 14h09

Ah, pardon, j'avais mal compris, tu veux centrer verticalement tes deux éléments entre eux c'est ça ? Je pensais qu'il y avait une marge importante en hauteur entre les deux éléments l'un en-dessous de l'autre.

**djoyeux** · 02/10/2007, 21h50

Le plus simple serait peut etre de faire un tableau avec des td valign='middle'

**Bisûnûrs** · 03/10/2007, 00h18

Envoyé par djoyeux

Le plus simple serait peut etre de faire un tableau avec des td valign='middle'

Pas la peine, si lysandre veut juste centrer les deux éléments verticalement entre eux, le bouton de type image se comportant comme une simple image, il suffit de mettre vertical-align:middle sur le bouton image.

**lysandre** · 03/10/2007, 14h13

valign dans le td ne marche pas. En fait qu'on mette valign="middle" ou valign="top" ou pas de valign du tout, il y a un decalage vertical entre les deux element.

Voila des petites expériences montrant les phenomenes que je ne comprends pas:
http://www.photo-illum.com/defaut.html
(on ne regarde pas le reste du site hein, je l'ai fait il y a longtemps et avec dreamweaver...

)
Bien que la derniere expérience donne le resultat qui m'interesse, si quelqu'un a une explication pour les espaces supplémentaires...

Ce que tu as proposé, Bisûnûrs, vertical-align:middle, marche quand on met les deux input dans le meme cellule, mais il faut spécifier cet attibut css pour les deux balises input.

**JulienC** · 03/10/2007, 15h34

Salut,

Lysandre, comme te le proposait Bisûnûrs, si tu utilise le style vertical-align sur le input de type image, l'image et le champ seront alors bien centrés verticalement (pas besoin de toucher à l'autre input).
J'ai testé rapidement sur ta page de test : cela fonctionne dans tous les cas (Dans ton exemple tu dois utiliser style="vertical-align: bottom;" sur le <input type="image"...).

**lysandre** · 03/10/2007, 16h56

Envoyé par JulienC

Salut,

Lysandre, comme te le proposait Bisûnûrs, si tu utilise le style vertical-align sur le input de type image, l'image et le champ seront alors bien centrés verticalement (pas besoin de toucher à l'autre input).
J'ai testé rapidement sur ta page de test : cela fonctionne dans tous les cas (Dans ton exemple tu dois utiliser style="vertical-align: bottom;" sur le <input type="image"...).

Oui tout a fait Julien, par contre si je veux le centrer verticalement il faut vertical-align:middle; sur les deux balises. En fait le probleme est resolu dans le sens ou j'arrive a faire ce que je veux, mais il ne l'est pas dans le sens ou je ne comprends pas les comportements des exemples que j'ai donnés dans le lien en haut...

**JulienC** · 04/10/2007, 10h45

Envoyé par lysandre

Oui tout a fait Julien, par contre si je veux le centrer verticalement il faut vertical-align:middle; sur les deux balises. En fait le probleme est resolu dans le sens ou j'arrive a faire ce que je veux, mais il ne l'est pas dans le sens ou je ne comprends pas les comportements des exemples que j'ai donnés dans le lien en haut...

Le fait est que seule l'image a besoin du vertical-align, j'imagine que c'est le comportement classique pour une image. Je m'explique :

* 1ère expérience :
Si je met vertical-align: bottom sur l'image, le champ et l'image sont bien alignés.

* 2ème expérience :
L'image, dans ton exemple, est plus grande que le champ (si, si !) : l'image a une hauteur de 22px, le champ de 16px (sans compter le padding, la bordure, etc...). Si je rétrécie l'image à 16px, le champ et l'image sont bien alignés

* 3ème expérience :
Je met vertical-align: top sur le champ, le champ et l'image sont bien alignés

Conclusion : par défaut, un champ est centré verticalement en bas (vertical-align: bottom), une image en haut (vertical-align: top).
Bien sûr, ce centrage se fait par rapport aux autres éléments entourant. Si tu mets chaque élément dans une cellule séparée, il n'y a plus de repère et donc plus de problème !
Quant au centrage de la cellule (valign), cela n'agit que sur l'ensemble du contenu (le champ + l'image). Le comportement est donc normal.

**Bisûnûrs** · 04/10/2007, 10h58

Dans tous tes exemples, sauf le dernier, les deux input sont l'un à côté de l'autre dans le code.

Mon précédent post disait que le bouton image se comporte exactement de la même manière qu'une simple image, donc par défaut le texte est aligné sur le bas de l'image, ce qui fait que dans tous tes exemples, lorsque l'on écrit du texte dans l'input text, il est aligné au bas de ton bouton image. Rien d'anormal en somme.

**lysandre** · 04/10/2007, 15h11

Envoyé par JulienC

Conclusion : par défaut, un champ est centré verticalement en bas (vertical-align: bottom), une image en haut (vertical-align: top).

C'est ce que j'aurais eu envie de conclure, mais etant donné que j'ai mis le height de la cellule a 10px, donc plus petit que les deux elements, la taille devrait s'ajuster au plus grand element contenu non? Donc dans mon cas l'image. On devrait donc avoir l'image avec aucun espace en-dessous (puisque la cellule s'est ajustée a l'image), et le champ text plus petit et aligné en bas, donc avec un espace en haut. Alors l'alignement haut de l'image et bas du texte ne semble pas expliquer l'espace sous l'image?

Bon, ce n'est peut-etre pas si important de comprendre la provenance de l'espace en bas, mais j'aime bien comprendre tout ce qui peut raisonablement l'etre...

[HTML] Espace genant dans formulaire avec bouton image

HTML

Discussions similaires

Partager

Partager