Champ formulaire + image de fond

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par tryan, 9 Avril 2011.

  1. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 229
    J'aime reçus:
    0
    Bonjour,

    Je teste l'intégration d'une image de fond concernant un simple formulaire sur un champ de type "text" et" submit" en utilisant un sprite css. Après quelques galères, je suis parvenus à mes fins mais je me demande si ma méthode est bonne et si il n'y a pas plus simple :?:

    Le lien de mon teste -http://annonce-vacance.com/css/formulaire.html

    Pour que mon teste fonctionne, il a fallut que j'utilise un hack css pour IE concernant la taille du champ text :?
    Testé sous IE FF et Chrome.

    Si vous avez mieux, je suis tout ouï :).

    Merci
     
  2. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
    Si ça peut t'aider, je la jouerais comme ça (ça a l'air ok sous IE/FF/Chrome/Opera).
    Par contre, pas testé sur IE9.
    +++

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <style type="text/css"> 
    	form, input {display:inline;vertical-align:middle;margin:0;padding:0}
    	fieldset {
    		padding:10px;
    		border:1px solid #000-;
    		O-border-radius: 15px;
    		-moz-border-radius: 15px;
    		-webkit-border-radius: 15px;
    		border-radius: 15px
    	}
    	#bg_recherche {
    		float:left;
    		margin:0;
    		padding:0;
    		border:0;
    		width:235px;
    		height:38px;
    		background:url(form.png) 0 0 no-repeat;
    	}
    	#recherche {
    		border:0;
    		background:none;
    		width:200px;
    		margin:9px 15px 0 15px;
    		font:normal 11px verdana,tahoma,arial;
    		color:#fff;
    	}
    	#valider {
    		border:0;
    		width:58px;
    		height:38px;
    		background:url(form.png) -248px -0 no-repeat;
    		font-size:0
    	}
    </style>
    </head>
    <body>
    
    <form id="formulaire" name="formulaire" method="get" action="#">
    <fieldset>
    	<div id="bg_recherche">
    		<input type="text" id="recherche" name="recherche" value="Rechercher" onFocus="if(value=='Rechercher') this.value='';" onBlur="if(value=='') this.value='Rechercher';" />
    	</div>
    	<input type="submit" id="valider" name="valider" value="Ok" />
    </fieldset>
    </form>
    </body>
    </html>
    
     
  3. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 229
    J'aime reçus:
    0
    Salut,

    Merci de ta réponse Supermaury :D .

    Bon, après vérification, je préfère nettement ta méthode :) cependant, il y a 2 points avec lesquels j'ai du mal et dont je ne trouve pas de réponse sur le web :
    Code:
          border:1px solid #000-;
          O-border-radius: 15px;
    
    A quoi sert le tiret après #000-?
    Késako que "O-border-radius", du moins pour quelle navigateur?

    Merci
     
  4. Supermaury
    Supermaury WRInaute discret
    Inscrit:
    25 Mars 2009
    Messages:
    144
    J'aime reçus:
    5
    Alors, le tiret dans la couleur, c'est une joile coquille de ma part :) A retirer donc.
    Et le préfixe O- c'est pour Opéra. D'ailleurs là aussi j'ai fait une coquille, il faut un tiret devant : -O- (j'ai passé le code au validateur mais pas la feuille de style oups).

    @++ !
     
Chargement...
Similar Threads - image fond Forum Date
fond d'image transparent ! Le café de WebRankInfo 18 Avril 2015
mettre image fond d'ecran qui flotte Développement d'un site Web ou d'une appli mobile 26 Février 2015
Image de fond ne s'affiche pas (Dreamweaver CS3) Développement d'un site Web ou d'une appli mobile 18 Décembre 2013
problemme de l'image de fond Administration d'un site Web 9 Août 2011
Bannière en image de fond Débuter en référencement 6 Août 2011
image de fond boite div "principal" Développement d'un site Web ou d'une appli mobile 13 Mars 2011
defilement d'image en fondu sur un site Demandes d'avis et de conseils sur vos sites 10 Décembre 2010
Image de Fond Facebook Facebook 4 Novembre 2010
Rendre une image en fond d'écran cliquable Développement d'un site Web ou d'une appli mobile 29 Juin 2010
Effondrement trafic google Images Crawl et indexation Google, sitemaps 4 Juin 2010
Recherche un script de news (particulier) avec image de fond Développement d'un site Web ou d'une appli mobile 13 Avril 2009
[RESOLU] image de fond dans une newsletter Développement d'un site Web ou d'une appli mobile 26 Mai 2008
Mettre une image en fond dans blogger ? Demandes d'avis et de conseils sur vos sites 26 Avril 2007
Image et image de fond Débuter en référencement 13 Mars 2007
Centrer une image de fond dans un tableau sans la répétée Développement d'un site Web ou d'une appli mobile 29 Novembre 2006
Image de fond qui se répète : avoir une belle jointure... Développement d'un site Web ou d'une appli mobile 2 Août 2006
Couleurs de fonds et images Débuter en référencement 10 Février 2006
Problème d'affichages d'images (fond) Développement d'un site Web ou d'une appli mobile 31 Janvier 2006
CSS et plusieurs images de fond Développement d'un site Web ou d'une appli mobile 18 Novembre 2005
Insertion d'une image en fond de Tableau Administration d'un site Web 15 Juin 2005