28173 sujets

CSS et mise en forme, CSS3

[Résolu] Mise en forme bouton submit

Pages :
Bonjour,

Quels sont les attributs CSS que je peux passer sur un bouton submit pour obtenir à sa place un visuel de simple texte ?

Je m'explique, ce que j'ai :
Firefox
upload/7902-submitfiref.jpg
IE
upload/7902-submitie.jpg
Ce que je veux :
upload/7902-cequejeveux.jpg

Mon code :

<form action="http://localhost/search.php" method="get">
	<p>
		<span>
		<label for="recherche">Rechercher :</label>
		<input type="text" name="recherche" id="recherche" value="" onfocus="this.value='';" size="25" />
		<input type="hidden" name="page" id="page" value="recherche" />
		<input type="submit" name="submit" id="submit" value="Rechercher" />
		</span>
	</p>
</form>


Merci d'avance.
Modifié par DrumSHoTS (19 Sep 2006 - 16:40)
Ca doit suffir ca je pense. Tu bouches les trous (...)

input.bouton{
   background-color:...;
   color:...;
   border:0;
}


et le bouton : 

<input type="submit" class="bouton" />
J'ai essayé de faire çà, le problème est que j'ai un espace sur les bords droits et gauche (autour du texte "Rechercher") différent sous IE et Firefox. Ce qui me provoque un décalage dans ma structure graphique (apparence différente sous IE et Firefox).

Comment faire en sorte que cet espace soit supprimé ?
(la différence est visible sur mes deux images IE et Firefox dans les captures d'écran du premier post de ce sujet)

Merci d'avance.
Pour Firefox, Ok, mais pour IE l'espacement reste le même, on dirait qu'il force un espacement par défaut sur le bouton...

Une autre solution pour IE ?
Sinon, est-il déconseillé de remplacer le bouton submit par un lien comme suit :
<FORM method=GET action="/cgi-bin/mailer" NAME="mon_formulaire" TARGET=_blank>
<A HREF="javascript:document.mon_formulaire.submit()">Valider</A>
</FORM>

?
Modifié par DrumSHoTS (12 Sep 2006 - 12:07)
DrumSHoTS a écrit :
Sinon, est-il déconseillé de remplacer le bouton submit par un lien comme suit :
<FORM method=GET action="/cgi-bin/mailer" NAME="mon_formulaire" TARGET=_blank>
<A HREF="javascript:document.mon_formulaire.submit()">Valider</A>
</FORM>

?

Oui, totalement.
Les formulaires, conçus correctement, sont accessibles. Les liens de validation via une fonction javascript, non. Sacrifier l'accessibilité pour un petit détail de mise en forme, ça serait dommage. Smiley cligne
DrumSHoTS a écrit :
J'ai essayé de faire çà, le problème est que j'ai un espace sur les bords droits et gauche (autour du texte "Rechercher") différent sous IE et Firefox. Ce qui me provoque un décalage dans ma structure graphique (apparence différente sous IE et Firefox).

Tu veux dire que tes visiteurs qui utilisent Firefox ou Internet Explorer seront perturbés de ne pas obtenir le même résultat, au pixel près, qu'avec un autre navigateur qu'ils n'utilisent pas ?

Les éléments de formulaire sont difficilement stylables. Les possibilités sont plus limitées que pour d'autres éléments HTML. Dans certains cas, l'apparence globale de l'élément de formulaire n'est pas du tout modifiable, même si on ne souhaitait que modifier une couleur de texte ou une couleur de fond (cf. Safari, Opera et Konqueror dans une certaine mesure, peut-être Firefox sous Mac si je me souviens bien, etc).

La question est donc : le fait de ne pas avoir exactement le même rendu pose-t-il un problème ? Et si jamais le design retenu impose des contraintes très fortes pour la mise en forme des éléments de formulaire (sans ménager la moindre marge de manœuvre), alors j'aurais tendance à penser (mais ça n'engage que moi) qu'il s'agit d'une erreur de conception. Smiley decu
mpop a écrit :
La question est donc : le fait de ne pas avoir exactement le même rendu pose-t-il un problème ? Et si jamais le design retenu impose des contraintes très fortes pour la mise en forme des éléments de formulaire (sans ménager la moindre marge de manœuvre), alors j'aurais tendance à penser (mais ça n'engage que moi) qu'il s'agit d'une erreur de conception. Smiley decu


Je ne suis pas totalement en accord avec les propos (sans prendre la remarque pour moi, je ne suis en aucune manière le concepteur de la charte graphique qui m'est imposée), je pense que la technique doit être au service de la conception (charte graphique précise), et non l'inverse.

Bref, si il n'existe pas de solution claire (IE...) pour régler mon problème, je vais trouver une solution, pourquoi pas un input image, solution que je n'aime pas... mais si nécessaire.

Pour la solution alternative du javascript, dans quelle mesure va t'elle pertubrer l'accessibilité ?
Modifié par DrumSHoTS (12 Sep 2006 - 13:56)
DrumSHoTS a écrit :
Pour la solution alternative du javascript, dans quelle mesure va t'elle pertubrer l'accessibilité ?

Disons que Javascript n'est pas le meilleur ami des lecteurs d'écran, par exemple. Je ne sais pas si certaines fonctions « classiques » servant à créer des liens ou valider des formulaires sont prises en compte, mais il y a fort à parier que cela risque de poser des problèmes.

Pour ce qui est de la technique au service de la conception, bien sûr, dans l'idéal. Mais quels sont les points les plus importants de la « conception » ? La fonctionnalité, l'erogonomie, ou la mise en forme au pixel près ?

Bref, tu as une différence de quelques pixels (un padding par défaut incompressible dans IE, soit quatre ou cinq pixels de chaque côté)... es-tu dans un contexte où cela rentre en conflit avec des contraintes précises ? Ou est-ce juste pour respecter au pixel près la charte graphique ?
J'ai tranché dans le vif et opté pour la solution de l'input image, le rendu est propre, autant sur IE que sur Firefox, une balise alt vient agrémenter l'image pour rendre le tout accessible.
Bon, je n'aime pas trop cette solution d'image pour un élément cliquable, mais c'est le meilleur compromis accessibilité/visuel que j'ai pu trouver.

Alors, si vous avez d'autres solutions, je suis preneur, ou si vous avez envie d'écrire à Microsoft pour leur dire que le css sur une balise input n'est pas encore au point... Smiley smile

Pour répondre à mpop, j'ai des contraintes graphiques très précises, je ne peux pas m'en écarter, alors j'essaie de satisafire tout le monde (graphique/ergonomie/fonctionnalité/accessibilité) comme je le peux, tant bien que mal.

A bientôt.
Modifié par DrumSHoTS (14 Sep 2006 - 12:27)
Bonjour,

DrumSHoTS a écrit :

Je ne suis pas totalement en accord avec les propos (sans prendre la remarque pour moi, je ne suis en aucune manière le concepteur de la charte graphique qui m'est imposée), je pense que la technique doit être au service de la conception (charte graphique précise), et non l'inverse.


Alors, j'aurais plutôt tendance à dire que la charte graphique doit être au service du contenu, le site au service du visiteur et qu'il faut faire avec les techniques dont on dispose ...

Effectivement, il en va d'une définition des priorités.
Vero a écrit :
Bonjour,



Alors, j'aurais plutôt tendance à dire que la charte graphique doit être au service du contenu, le site au service du visiteur et qu'il faut faire avec les techniques dont on dispose ...

Effectivement, il en va d'une définition des priorités.


Je suis totalement en accord avec toi, le problème est qu'il faut trouver des compromis dés que la technique atteint ses limites et ne peut répondre aux critères imposés, tant ergonomiquement que visuellement (conception de la charte graphique).
Je suis pris entre tous les feux de la bataille, il faut juste que j'arrive à esquiver les tirs...
Salut,
DrumSHoTS a écrit :
Pour répondre à mpop, j'ai des contraintes graphiques très précises, je ne peux pas m'en écarter

En même temps le "pixel perfect", ça n'existe pas...Si l'utilisateur à une petite résolution, un veux navigateur ou tout simplement qu'il grossit le texte ou redimensionne sa fenêtre, toute la mise en page vire...
Oui, on lit souvent cela ...

L'intégrateur est pris au piège entre le graphiste, roi de la jungle, et le pauvre utilisateur dont il défend la cause, mais en vain.

Et on sacrifiera l'utilisateur pour un malheureux espace sur un label de formulaire ... qui met en l'air toute la mise en page sous IE.

Peut-être faut-il réfléchir à la logique de mise en page ?
Vero a écrit :

Et on sacrifiera l'utilisateur pour un malheureux espace sur un label de formulaire ... qui met en l'air toute la mise en page sous IE.

Smiley frappe Tant pis pour eux, ils n'ont qu'a ne pas utiliser IE...Nan, je déconne, loin de moi l'idée de troller...Maaais d'un autre coté, je me mets à la place de DrumShots, c'est pas l'utilisateur qui lui paye ses pates...

Sinon, plus sérieusement, je ne sais pas si la solution du bouton (Dieu bénisse QuentinC) peut convenir sous IE, a savoir : 

<button type="submit" value="Bobby Ewing">Rechercher</button>

button
{
  display: block;
  border: none;
  color: #F00;
  background-color: transparent;
  margin: 0 auto;
  cursor: pointer;
  padding: 0;
}


A+

EDIT: Je viens de tomber sur ce topic donc pour les boutons, méfiance
Modifié par coccimaster (14 Sep 2006 - 13:28)
Attention hein, je faisais juste une remarque générale, je voulais pas déclencher une croisade contre les graphistes. Smiley cligne

Mais je me demande des fois : si le graphiste a autant d'autorité, il ne peut pas y avoir quelqu'un au dessus capable de lui dire : « ce point là se heurte à des limitations techniques, et tenter de les dépasser risque de provoquer des problèmes d'accessibilité ou de perturber l'ergonomie du site, il va donc falloir que tu t'adapte ».

Finalement, c'est pas si éloigné du fait de dire « ça ne va pas : le design de l'affiche que tu as fait repose entièrement sur un bleu électrique que l'on ne pourra jamais obtenir avec une simple quadrichromie, il va falloir retravailler ça ».

J'ai l'impression que le côté « magique » de l'informatique fait qu'il doit y avoir un moyen de, alors que le print permet de mieux réaliser les limites de telle ou telle solution... voire l'impossibilité de certaines choses.

Bref, mieux vaut travailler avec un graphiste sensibilisé aux contraintes (et aux possibilités !) du format web...
<button type="submit" value="texte">Rechercher</button>
button { display: block; 
border: none; 
color: #FFFFFF; 
background-color: #000000; 
margin: 0 auto; 
cursor: pointer; 
padding: 0; }


Cette solution est identique à celle du input submit, IE ne gère pas bien le padding sur les bords droit et gauche.

Je garde ma solution input image, c'est le seul qui arrive à concilier (à peu près..) les demandes de tous.

Merci encore pour toutes ces infos.

Et bien évidement, je suis d'accord avec vous, le pixel parfait n'existe pas, mais je fais mon possible pour contenter toutes les parties, ce qui n'est pas évident, vous le savez bien... !

A bientôt.
Ah ben çà...

LA solution au problème, c'est quand même beau le partage !

Merci pierre 6020

Je suis tellement content de cette solution que je montre le résultat, enfin presque parfait ! :
Firefox (tout petit padding de rien du tout, même si le padding = 0)
upload/7902-firefox.jpg
IE (plus de padding du tout !)
upload/7902-ie.jpg

Merci encore !
Modifié par DrumSHoTS (19 Sep 2006 - 16:26)
Pages :
Sujet clos
Aller à