Formulaire de recherche -> Mettre une image dans le bouton

LPSIL

Février 2015

Salut. J’essaye depuis un moment de mettre une image à la place de texte dans mon bouton submit du formulaire de recherche de base de Spip 3.

Le problème est que Spip n’arrive pas à me trouver l’image, et je n’ai aucune idée de pourquoi.

Voici mon CSS :

.boutonrch {
	background:url("squelettes/img/preview2.png");
	
}

Mon formulaire :

<div class="formulaire_spip formulaire_recherche[ (#ENV{class})]" id="formulaire_recherche">
<form action="[(#ENV{action})]" method="get"><div>
	[(#ENV{action}|form_hidden)]
	[<input type="hidden" name="lang" value="(#ENV{lang})" />]
	<input type="[(#HTML5|?{search,text})]" class="search text" placeholder="Recherche" size="10" name="recherche" id="#ENV{_id_champ}"[ value="(#ENV{recherche})"] 
	/><input type="submit" class="boutonrch" class="submit" value="" title="rech" />
</div></form>
</div>

Est-ce que mon chemin pour l’image est correct ? J’ai essayé plusieurs dossiers mais Spip à pas l’air de les apprécier non plus

Par note Par date Par date chronologique

Indiquez l’intérêt que vous portez à cette réponse

0

Gilles

Février 2015

Il y a deux attribut "class" au bouton, est-ce normal ?

Sinon, je chemin relatif dans le css, il ne faut pas oublier qu’il est relatif par rapport au contexte d’appel, cad :
– par rapport à la feuille de style si la règle est définie dans un fichier séparé
– par rapport à l’url si la règle css est dans la page (attention alors en cas d’utilisation des url propres arborscentes)
Indiquez l’intérêt que vous portez à cette réponse

0

LPSIL

Février 2015

Oui, ça ne fonctionnait pas sur la classe submit, j’ai donc essayé de créer un Id et ensuite une class juste pour ce bouton, pour voir.

Sinon, pour ton explication sur les chemins, je ne suis pas sûr d’avoir saisi. Il faudrait que je mette l’image dans le même dossier que le fichier CSS, ou alors dans le même dossier que le formulaire de recherche ?

Aurigeft

Mars 2015

Bonjour,

Après avoir planché toute la mitinée et ce début d’après midi,
j’ai trouvé une façon de mettre une image à la place du bouton pour submit.

Si cela peut aider...

sur la page formulaires/recherche. html,

<div class="formulaire_spip formulaire_recherche[ (#ENV{class})]" id="formulaire_recherche">
<form action="[(#ENV{action})]" method="get"><div>
	[(#ENV{action}|form_hidden)]
	[<input type="hidden" name="lang" value="(#ENV{lang})" />]
	<label for="#ENV{_id_champ}"> </label>
	<input type="[(#HTML5|?{search,text})]" class="search text" size="10" name="recherche" id="#ENV{_id_champ}"[ value="(#ENV{recherche})"] accesskey="4" autocapitalize="off" autocorrect="off"
	/>
	<input type="submit" class="submit" value="" title="ok" />
</div></form>
</div>

et sur la page css/style. css :

.formulaire_recherche input.text { width: 10em; padding-left: 20px; background-image: url(img/recherche.png); background-repeat: no-repeat; background-position: left center; }
.formulaire_recherche input.submit{ border:none; padding:none; background: transparent; background-image: url(img/ok.png); }

L’image étant placée dans css/img.

Par contre mon image fait 33x33px, j’ai beau mettre width et height, je n’arrive pas à l’avoir entière, si vous trouvez comment, je vous remercie.

cordialement