Décalage de bouton et longeur input type text

hug

se logger a ma page avant de voir le pb
http://www.prolixeserver.com/compte.php
login : test
pass : test

voila le pb plus bas si vous clicker sur l'icone crayon pour modifier
le password ou email ( le pseudo n'est pas encore pret)
un input se met en place avec une icone disquette pour pouvoir modifier la valeur

le premier pb c'est que je voudrais ke mon input soit de la longueur de la valeur
jai essayé avec un size et width avec du auto et du 100% mais il n'y a rien y faire
il ne veut pas prendre en conte la longeur de ma valeur comme longeur de input
:p je pense qu'il faudra passé par de l'ajax ...

if ($edit_email) {

echo "<li> Email : <input class=\"inputstyle\" type=\"text\" name=\"sauv_email\" value=\"$user \" <a class=\"bt-enregistrer\" href=\"\"><img src=\"images/bt-enregistrer.jpg\"/></a></li>";
}
else
{
echo "<li> Email : $user <a class=\"bt-modifier\" href=\"compte2.php?edit=email\"><img src=\"images/bt-modifier.jpg\"/></a></li>";
}
?>

l'autre pb c'est que l'icone de ma disquette n'est pas bien calé en hauteur par rapport a mon input type txt.

.bt-enregistrer {
border: 0;
width: 20px;
height: 20px;
margin: 0 0 0 10px;
padding: 5px 0 0 0;
}
.bt-enregistrer img {
border: 0;
text-decoration: none;
list-style: none;
}

il prend en compte que mon decalage sur la droite mais en hauteur en padding ou margin rien il ne veut pas bouger

voila si vous avez des idées
++

Salut zcd,

Tu ne peux pas obtenir la largeur d'une valeur. Tu ne peux obtenir que les dimensions de l'élément qui le contient.
Un élément input n'est pas fait pour s'adapter à son contenu, le width 100% signifie 100% de son conteneur et non pas 100% de son contenu. Quand au auto, chaque navigateur à un style par défaut pour les éléments HTML, auto signifie donc par défaut.

Je pense que tu confonds également ajax et javascript. Parce que y'a pas d'intérêt à ajax dans ce cas-là, mais éventuellement en javascript tu peux calculer le nombre de caractères de ta valeur, leur attribuer une largeur multiplier par le nombre de caratères donc et attribuer la largeur obtenue à ton élément input pour avoir le rendu que tu souhaites.
Ce n'est pas une pratique que j'encouragerais cependant.

Pour ton second problème.
1) l'attribut text-decoration: none n'a rien à faire dans la declaration d'un img, c'est au a.bt-enregistrer que tu veux l'associer.
2) dans le meme registre, le list-style: none, n'a rien à faire là non plus. C'est un attribut pour les listes.
3) ton élément a.bt-enregistrer est par défaut en ligne, et non bloc il est normal qu'il ne réagisse pas (ou que partiellement) aux déclarations de margin et padding. Tu peux éventuellement le transformer en élément flottant (il faudra transformer les éléments au même niveau également et ne pas oublier de rétablir le flux après )

Et voilà plein de boulot sur la planche, bon courage à toi

re

bon alors je me suis démerdé avec un float: right + une margin-right
c'est pas super propre mais sa marche

je vais quand même retenté, je pense que c le line-height sur mon ul qui fait décalé mon icône de disquette

Bonjour.

Ton html est tordu à la base.

Pas besoin d'utiliser une liste pour faire un form.

érgonomiquement autant proposer à l'utilisateur de tout changer d'un coup.

Ton formulaire qui n'en est pas un marche qu'avec javascript.

Il n'y a pas de label.

Dans ton champs Email input n'est pas fermé.

Fais quelque chose de plus propre sémantiquement, après seulement tu pourras régler les problèmes de positionnement.

Genre comme ca

Te faut juste le code entre le style

PS : Demande 2 fois le password, si le mec se plante genre maj activée ou fausse frappe ou autre....
Modifié par rs459 (09 Feb 2011 - 19:14)