[help] Image pour "users" et "password"

Statut
N'est pas ouverte pour d'autres réponses.

kaaps

Elite
Bonjour je voudrais faire comme sur se site dans la partie "login" http://www.boltwared.com

En faite j'aimerai savoir ce k on doi mettre pour k on puis mettre une image sur "users" et "password"

merci d'avance :)
 

eSb`

That's Poker!
Il a utilisé un attribut css, background-image.
Tu peux trouver ça dans son code :

Code:
.form_username {
    background-color: #f2f2f2;
    border: 1px dashed #56B0CA;
    background-image: url(images/username.gif);
    background-repeat: no-repeat;
    background-position: left top;}
Ensuite il utilise du javascript pour changer la classe de l'input et ne plus voir l'image.

Si tu veux plus de détailes n'hésite pas.
 
1er
OP
K

kaaps

Elite
et sur le page html il ya po moyen de faire quelque comme j'ai fait pour le bouton "GO"


-> bouton GO:
"<input type="image" src="img/img_12.jpg" value="login">"
 

eSb`

That's Poker!
Le problème si tu fais comme ça, c'est que tu ne peux pas écrire dedans (vu que ton input est de type image).

http://www.esb-studio.be/Gamerz/imginput.zip

Là j'ai rassemblé ce qui était nécessaire pour avoir le même résultat (copié/collé des éléments du site)
 
1er
OP
K

kaaps

Elite
merci beaucoup :D et il y a po moyen que l'image reste tous le temps et non pas quelle part lorsqu on clique dessus ?
 

eSb`

That's Poker!
Si bien sûr ; ), mais il faut que tes images soient "à faible opacité" pour ne pas gêner l'écriture alors.

Remplace les inputs par :
<input name="ws_user" type="text" class="form_username" size="10">
<input name="pwd" type="password" class="form_password" size="10">

En fait, avec ça tu enlèves le javascript qui s'occupait de changer la classe de l'input.
(tu peux donc supprimer les classes form_on et form_off du css, vu que tu ne les utilises plus)
 
1er
OP
K

kaaps

Elite
et on sai po modifier la hauteur du champs en question ? augmenter le champs un peu plus haut?
 

eSb`

That's Poker!
Tu peux ajouter 2 attributs dans la classe input (qui écrite comme cela s'applique à tous les input de la page).

input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #EDF1f1;
border: 1px dashed #56B0CA;
height: 20px;
padding-top:3px;
}

height -> tu joues sur la hauteur de l'input.
padding-top -> tu règles la hauteur par rapport à la "ligne du haut" de l'input. (mets une grande valeur de height et joue sur le padding pour voir son effet si tu ne connais pas son utilité ; ))
 
Statut
N'est pas ouverte pour d'autres réponses.
Haut