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

Discussion dans 'Web, design' créé par kaaps, 19 Avril 2007.

Statut de la discussion:
Fermée.
  1. Offline
    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 :)
    kaaps, 19 Avril 2007
    #1
  2. Offline
    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.
    eSb`, 19 Avril 2007
    #2
  3. Offline
    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">"
    kaaps, 19 Avril 2007
    #3
  4. Offline
    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)
    eSb`, 19 Avril 2007
    #4
  5. Offline
    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 ?
    kaaps, 19 Avril 2007
    #5
  6. Offline
    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)
    eSb`, 19 Avril 2007
    #6
  7. Offline
    kaaps Elite
    et on sai po modifier la hauteur du champs en question ? augmenter le champs un peu plus haut?
    kaaps, 19 Avril 2007
    #7
  8. Offline
    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é ; ))
    eSb`, 19 Avril 2007
    #8
Statut de la discussion:
Fermée.