[Resolu] Probleme Positionnement texte dans input

Bonjour à tous,

Ca fait quelques heures que je cherche une solution pour ce petit problème mais je sèche complètement.

Voici le code css

#cadre {
width:236px;
height:40px;
background:yellow;
}
#cadre form {
  float: left;
  padding: 4px 0 0 0;
}
#cadre form #recherche-texte {
  width: 180px;
  height: 32px;
  padding: 8px 0 0 5px;
  background:  url(images/recherche.png) right top no-repeat;
  border: none;
  vertical-align: top;
  color: #aaa;
  margin-right:5px;
}
.positionnement {
padding-left:40px;
text-align:left;
}
#cadre form #recherche-submit {
  width: 36px;
  height: 32px;
  border: none;
  margin: 0;
  padding: 0;
  color: white;
  background:  url(images/bouton-ok.png) left top no-repeat;
  vertical-align: top;
  font-weight: bold;
  cursor: pointer;
}

Voici le code HTML

<div id="cadre">   

<form id="recherche" action="/search/" method="post">
<label for="recherche-texte"><input id="recherche-texte" class="positionnement" value="recherche" title="recherche" type="text" onfocus="if(value=='recherche') this.value='';" /></label>
<input value="OK" name="recherche-submit" id="recherche-submit" type="submit" />

</form>
</div>

Le problème exact porte sur le texte de recherche. (.positionnement)Le texte ne veut pas être décalé de 40px à gauche, ce qui m'éviterait de mordre sur mon image.
Si vous avez une idée pour résoudre ce problème.

Merci.
Modifié par foulensois (20 Apr 2009 - 16:14)

Bonjour,

Il y a surcharge de padding left sur ton input
#recherche-text et .positionnement déclare tous les 2 deux valeurs différentes de padding left (0 et 40px)

et comme un identifiant prend toujours le dessus sur une class. Ici le padding left sera donc de 0px.

En enlevant le .positionnement, si je mets le padding-left dans le div, le bouton de validation saute mais le texte se met à la bonne place.

J'ai tenté diverses manières mais je n'arrive jamais à bloquer ces 2 contenus... L image de 180 et l autre de 36 px de largeur ne rentrent jamais dans ce cadre de 236 px...

Le seul truc possible pour les placer serait peut être de créer un background dans le div cadre et de positionner le input texte par la suite.

Je vais essayer ça pour voir et je reviens vers vous au cas où mes problèmes ne sont pas résolus.

Edition :

Je suis passé par un background avec une image de fond. Le rendu est identique mais évite d'avoir ce léger problème.
Modifié par foulensois (20 Apr 2009 - 16:16)