28173 sujets

CSS et mise en forme, CSS3

[Résolu] Formulaire avec un input image

Bonjour,

Je cherche à mettre une image en input pour l'envoi d'un formulaire.
Je souhaite que cette image soit centrée en verticalement par rapport à la zone de saisie du formulaire.

Mon code xhtml :

<div id="rechercher">
<form action="" method="get">
	<p>
		<label for="recherche">Rechercher :</label>
		<input type="hidden" name="page" value="recherche" />
		<input type="text" name="recherche" id="recherche" value="Saisir votre recherche ici." onfocus="this.value='';" size="25" />
		<input type="image" src="rechercher.jpg" alt="Rechercher" />
	</p>
</form>
</div><!-- fin rechercher -->

Le CSS :

#rechercher form, #rechercher input { font-family: Verdana, sans-serif; font-weight: normal; font-size: 11px; }
#rechercher label { display: none; }


Voilà un aperçu du résultat :
upload/7902-1.jpg

Comment puis-je procéder ?

Merci d'avance.
Modifié par DrumSHoTS (12 Sep 2006 - 10:22)
Salut,

Ajoute un id par exemple à ton input image.

xhtml
<input type="image" src="rechercher.jpg" alt="Rechercher" id="recherhceImg" />


CSS

#rechercherImg { margin-top: 5px; }


après a toi d'ajuster la hauteur du margin. C'est un peu bourri mais ça marche Smiley lol

J'espère que cela te conviendra.
Cette solution me décale tous les blocs input et label contenus dans mon bloc <p> vers le bas. J'imagine que c'est à cause des balises label et input qui sont des balises en ligne.

Une autre solution ?
J'ai déjà lu ces solutions en long en large et en travers.
Finalement, la solution du centrage vertical a toujours des incompatibilté quelque part pour les blocs.

Dans le cas des balises en ligne, si j'ai bien compris, le vertical-align est bien supporté (cas d'une balise en ligne contenue dans une autre balise en ligne, pour centrer une image verticalement à du texte par ex)

Ce dont je ne suis pas sûr, c'est la balise <p>. C'est une balise bloc, mais contrairement à une balise comme <div>, <p> ne peut pas contenir un autre élément bloc (j'ai juste jusqu'à présent ?).
Alors est-ce que l'on peut en conclusion dire que le contenu de <p> sera en ligne, et donc que je peux utiliser le vertical-align pour centrer verticalement ma zone de saisie input et ma zone d'image input (input étant elle-même une balise en ligne) ?

Merci d'avance.
Oui, mais non. Le vertical-align ne marchera dans ta balise p que pour des éléments anonymes, c'est à dire du texte directement contenu dans ton <p>.

Le centrage vertical est une des pires mouises dans le css, il n'y a pas de solution simple pour centrer un élément verticalement sans connaître sa hauteur et celle de son conteneur au préalable
Ok, je pense avoir trouvé une solution (dites moi si je fais une grosse bourde...)

J'ai encadré mes balises <label> et <input> d'une balise <span>. Ainsi, je place dans mon css le code suivant :

#rechercher input { vertical-align: middle; } 
#image { width: 71px; height: 11px; }
#rechercher label { display: none; }
#rechercher form, #rechercher input, #rechercher label { font-family: Verdana, sans-serif; font-weight: normal; font-size: 11px; }

et dans mon xhtml le code suivant :

<form action="" method="get">
	<p>
		<span><input type="hidden" name="page" value="recherche" /><label for="recherche">Rechercher :</label><input type="text" name="recherche" id="recherche" value="" onfocus="this.value='';" size="25" /><input type="image" src="rechercher.jpg" name="image" id="image" alt="Rechercher" /></span>
	</p>
</form>

(J'ai essayé de bien mettre sur la même ligne tout le code contenu entre mes 2 balises <span> sinon, j'ai des décalages dans tout mon bloc form.)

Les inputs étant dans ma balise <span>, l'image est centrée verticalement sur la zone de saisie grâce à :

#rechercher input { vertical-align: middle; }

Ce code est-il propre ?
Modifié par DrumSHoTS (12 Aug 2006 - 09:53)
J'ai testé avec plusieurs navigateur, le tout a l'air fonctionnel, il est valide xhtml transitionnal et strict (j'ai testé les deux).

Mais, je ne suis toujours pas sûr de la propreté du code.

Est-ce que vous le trouvez conforme ?

Merc d'avance.
Modifié par DrumSHoTS (12 Aug 2006 - 10:03)
Hm je regarde javais pas vu toute la ligne en fait Smiley ohwell
Ca me semble quand meme bizzare de mettre ces input et ces label dans un span ca va pas t'avancer mais je sais pas trop ... En meme temps si le code est valide
Modifié par jacquesdupontd (12 Aug 2006 - 15:00)
Sujet clos
Aller à