28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Mettre cote à cote 2 <input>

Bonjour à tous,

J'ai un soucis qui à l'air tout bête mais que je n'arrive pas à résoudre:
Comment mettre cote à cote deux input sans marge?

Voici un petit test qui ne marche malheureusement pas:


<body>
<form id="form1" name="form1" method="post" action="" border="0"cellspacing="0" >
  <label>
    <input type="text" name="textfield" id="textfield" style="margin: 0px; border:0px; background-color:#CC0"/>
    <input type="text" name="textfield2" id="textfield2" style="margin: 0px; border: 0px; background-color:#06F"/>
  </label>
</form>
</body>

Modifié par olivier_nice (26 Aug 2009 - 13:51)
Salut,

Quel résultat obtiens-tu avec ce code ? Le retour à la ligne est considéré comme un espace, si tu as un léger écart cela peut venir de là... Essaie de mettre les 2 input sur la même ligne dans le code source.
Oui en effet ça règle le problème sur cet exemple. En revanche rien n'y fait sur mon "vrai" formulaire que tu peux voir ici:
http://exp.activeeon.com/ (zone de recherche)

Je souhaite coller le input text avec le bouton de validation tu as une idée ?
Il semblerait que ça soit du au padding, j'en ai pourtant besoin pour que le texte ne déborde pas de la zone blanche.

merci pour ta réponse,
olivier
Modifié par olivier_nice (25 Aug 2009 - 16:14)
Maintenant il ne sont plus alignés en hauteur je désespère ! Voici mon code actuel:


<input type="text" value="" name="s" id="s" 
style="
background: transparent url(\'images/bg_search.gif\') no-repeat;
border: none;
width: 83px;
height:20px;
"/><input type="submit" id="searchsubmit" value="'. esc_attr__('') .'" 
style="
background: transparent url(\'images/btn_search.gif\') no-repeat;
border: none;
width: 22px;
height:20px;" />


Que me conseillez-vous ?
Bonjour,

tes padding sont pris en compte et elargissent tes imput. Les fond ne peuvent se raccorder.

L'alignement vertical entre ces deux la sera plus ou moins aleatoire , d'un nav a l'autre (histoire de bordure ou de padding interne differents)

Le mieux serait que tu passes tes images de fonds dans un element html parent de tes imput .
Il te sera plus aisé de faire les raccords entre les deux images de fonds et tu n'auras pas le bug de IE6/7 qui fait partir sur la gauche l'image de fond quand le texte est plus long que la largeur de l'input[type=text] .

C'est expliquer sur ce site : http://www.alsacreations.com/astuce/lire/650-input-et-ie-corriger-le-dfilement-de-larrire-plan.html

GC
Sujet clos
Aller à