Déjà inscrit au forum ? ( Mot de passe perdu / Mail de validation non reçu ) :
[Tutoriel] Personnaliser les champ de texte et autres
valentin45000


Site/blog

131 messages

posté le 2010-01-25 à 11:58:20


En espérant qu'il vous plairas ^^

Partie 1 :



Partie 2 :



Dernière modification le 25-01-2010 à 11:58:31

simon


Site/blog

2960 messages

posté le 2010-01-25 à 21:41:07

Valentin

J'ai commencé les bordures et j'avance tranquillement.
Quel est ce logiciel qui permet de voir le css?

Merci pour ces tutos et

Bonne soirée.
Cent fois sur le métier remets ton ouvrage...
...Car c'est en forgeant qu'on devient forgeron



valentin45000


Site/blog

131 messages

posté le 2010-01-25 à 21:48:00

et
Il y en à plein des logiciel mais la tu n'en a pas besoin ;)
Bonne personnalisation ;)

Cordialement, Valentin.

simon


Site/blog

2960 messages

posté le 2010-01-27 à 09:59:07

Valentin
J'ai bien suivi et me voici avec des champs de textes personnalisés.

J'ai mis
input[name=pseudo]{
background:#163bde;
border: 3px outset #ffcc00;
color:#fff;
background-image: url(http://paysages-corses.blog4ever.com/blog/url_artimage-192458-2447626-4626.html);

}

input[name=pseudo]:hover,:focus{
background:#000000;
color:#fff;
}

La fonction focus devrait maintenir la couleur noire jusqu'au prochain clic et le hover juste le survol.
Si je met :hover,:focus le focus ne fonctionne pas.


Cent fois sur le métier remets ton ouvrage...
...Car c'est en forgeant qu'on devient forgeron



valentin45000


Site/blog

131 messages

posté le 2010-01-27 à 12:38:57

Salut ,
alors faut mettre :

input[name=pseudo]:hover :focus{
background:#000000;
color:#fff;
}



Dernière modification le 27-01-2010 à 12:39:28

simon


Site/blog

2960 messages

posté le 2010-01-27 à 13:11:26

Valentin

non rien à faire.
Cent fois sur le métier remets ton ouvrage...
...Car c'est en forgeant qu'on devient forgeron



valentin45000


Site/blog

131 messages

posté le 2010-01-27 à 14:20:50

Bon alors fait de forcig ^^


input[name=pseudo]{
background:#163bde;
color:#fff;
border: 3px outset #ffcc00;
color:#fff;
background-image: url(http://paysages-corses.blog4ever.com/blog/url_artimage-192458-2447626-4626.html);

}
input[name=pseudo]:hover{
background:#000000;
color:#fff;
border: 3px inset#ffcc00;
color:#fff;
}

input[name=pseudo]:focus{
background:#000000;
color:#fff;
border: 3px inset#ffcc00;
color:#fff;
}

simon


Site/blog

2960 messages

posté le 2010-01-27 à 17:00:58

re

Rien à faire le mode focus ne va pas.

Sans doute poser la question à .
J'ai même essayé:
input[name=pseudo]a:hover,:focus{
background:#000000;
color:#fff;
border: 3px inset#ffcc00;
color:#fff;
}
Cent fois sur le métier remets ton ouvrage...
...Car c'est en forgeant qu'on devient forgeron



valentin45000


Site/blog

131 messages

posté le 2010-01-27 à 17:17:03

Sisi sa marche j'ai testé.
Ajoute ça :
input[name=pseudo]:focus{
background:#000000;
color:#fff;
border: 3px inset#ffcc00;
color:#fff;
}
Car la tu ne l'as pas ajouté.

simon


Site/blog

2960 messages

posté le 2010-01-27 à 17:32:50

re
j'ai dû faire un test car voici:

input[name=pseudo]:hover{
background:#000000;
color:#fff;
border: 3px inset#ffcc00;
color:#fff;
}

input[name=pseudo]:focus{
background:#000000;
color:#fff;
border: 3px inset#ffcc00;
color:#fff;
}

input [name=email]{
background:#2b7aca;
color:#fff;
border: 3px outset #ffcc00;
color:#fff;
background-image: url(http://paysages-corses.blog4ever.com/blog/url_artimage-192458-2447626-4626.html);

}

input [name=email]:hover{
background:#000000;
color:#fff;
}

input [name=email]:focus{
background:#000000;
color:#fff;
}


Je ne sais pas si on se comprend bien pour FOCUS pour moi c'est : je clic et ça reste 000000; noir même si la souris se déplace.
et ça reprend la couleur de départ au clic suivant sur une autre cellules.
Je clic "pseudo c'est noir puis le noir s'en va si je clic sur e-mail.En ce moment le noir s'en va car c'est en mode "hover"
Cent fois sur le métier remets ton ouvrage...
...Car c'est en forgeant qu'on devient forgeron



valentin45000


Site/blog

131 messages

posté le 2010-01-27 à 18:22:59

Je crois avoir trouver en regardant tout ton code, remplace tout (pas tout tout le css juste les input et tout) pas cela :
input[type=submit]{
background:green;
color:#fff;
border: 3px outset #ffcc00;
color:#fff;
}

input[type=submit]:hover{
background:#000000;
color:#fff;
border: 3px inset#ffcc00;
color:#fff;
}



textarea {
background:#163bde;
color:#fff;
font-weight:bold;
border: 3px outset #ffcc00;
font: 17pt monotype corsiva;
}

input[type=text]{
border: 3px outset #ffcc00;
color:#fff;
background-image: url(http://paysages-corses.blog4ever.com/blog/url_artimage-192458-2447626-4626.html);
}

input[type=text]:hover{
background:#000;
border: 3px outset #ffcc00;
color:#fff;
}

input[type=text]:focus{
background:#000;
border: 3px outset #ffcc00;
color:#fff;
}



Tu avais mis des type et des name donc il ne savais plus quoi choisir donc il faisais son ptit mélange

simon


Site/blog

2960 messages

posté le 2010-01-27 à 19:25:39

Valentin

Désolé de répondre si tard mais j'ai dû m'absenter.

Je ne sais plus LOL, donc voici mon code complet:

/*début de construction des bordures*/

input[type=text]{
background:#163bde;
color:#fff;
border: 3px outset #ffcc00;
color:#fff;
background-image: url(http://paysages-corses.blog4ever.com/blog/url_artimage-192458-2447626-4626.html);

}

input[type=submit]{
background:green;
color:#fff;
border: 3px outset #ffcc00;
color:#fff;
}

input[type=submit]:hover{
background:#000000;
color:#fff;
border: 3px inset#ffcc00;
color:#fff;
}

input[type=text]:hover{
background:#000000;
color:#fff;
border: 3px inset#ffcc00;
color:#fff;
}


textarea {
background:#163bde;
color:#fff;
font-weight:bold;
border: 3px outset #ffcc00;lor:#fff;
font: 17pt monotype corsiva;

}

input[name=pseudo]{
background:#163bde;
border: 3px outset #ffcc00;
color:#fff;
background-image: url(http://paysages-corses.blog4ever.com/blog/url_artimage-192458-2447626-4626.html);

}

input[name=pseudo]:hover{
background:#000000;
color:#fff;
}

input[name=pseudo]:focus{
background:#000000;
color:#fff;
}


input [name=email]{
background:#2b7aca;
color:#fff;
border: 3px outset #ffcc00;
color:#fff;
background-image: url(http://paysages-corses.blog4ever.com/blog/url_artimage-192458-2447626-4626.html);

}

input [name=email]:hover{
background:#000000;
color:#fff;


}
input [name=email]:focus{
background:#000000;
color:#fff;


}
input [name=site]{
background:#2b7aca;
color:#fff;
border: 3px outset #ffcc00;
color:#fff;
background-image: url(http://paysages-corses.blog4ever.com/blog/url_artimage-192458-2447626-4626.html);

}

input [name=site]:hover{
background:#000000;
color:#fff;


}
input [name=site]:focus{
background:#000000;
color:#fff;


}




/*fin*/


Je note au passage que je n'ai pas mis de code pour : "nbfourni" et "ajouter" et pourtant ces 2 cellules sont actives avec le code hover et noir.

Cent fois sur le métier remets ton ouvrage...
...Car c'est en forgeant qu'on devient forgeron



valentin45000


Site/blog

131 messages

posté le 2010-01-27 à 19:51:06

remplace tout cela par :
input[type=submit]{
background:green;
color:#fff;
border: 3px outset #ffcc00;
color:#fff;
}

input[type=submit]:hover{
background:#000000;
color:#fff;
border: 3px inset#ffcc00;
color:#fff;
}



textarea {
background:#163bde;
color:#fff;
font-weight:bold;
border: 3px outset #ffcc00;
font: 17pt monotype corsiva;
}

input[type=text]{
border: 3px outset #ffcc00;
color:#fff;
background-image: url(http://paysages-corses.blog4ever.com/blog/url_artimage-192458-2447626-4626.html);
}

input[type=text]:hover{
background:#000;
border: 3px outset #ffcc00;
color:#fff;
}

input[type=text]:focus{
background:#000;
border: 3px outset #ffcc00;
color:#fff;
}

simon


Site/blog

2960 messages

posté le 2010-01-27 à 20:40:01

Valentin

Rien à faire voici la page [lien]

Mais ce n'est pas grave , il doit bien y avoir une faute.
La fontion focus est un peu spéciale.
Bonne soirée et merci pour le bon suivi de ce tuto.
Cent fois sur le métier remets ton ouvrage...
...Car c'est en forgeant qu'on devient forgeron



valentin45000


Site/blog

131 messages

posté le 2010-01-27 à 20:42:40

Chez moi ça marche mais je crois que internet explorer ne reconnais pas focus, mais sache que sa marche ;)
Et en principe quand on fait un tuto il est mieux de répondre aux question diverses ^^

simon


Site/blog

2960 messages

posté le 2010-01-27 à 20:57:52

Valentin

C'est bien de savoir que ça marche.
IE8 RECONNAIT LA COULEUR ASCENSEUR (scrollbar)mais pas les autres navigateurs.
Je pense que firefox est plus pointu.
ça me tente de télécharger firefox, au moins pour voir les réglages avec 2 navigateurs.

Cent fois sur le métier remets ton ouvrage...
...Car c'est en forgeant qu'on devient forgeron



valentin45000


Site/blog

131 messages

posté le 2010-01-27 à 21:51:09

C'est sur que niveau reconnaissance code Firefox est de loin le meilleurs.
Après si sa marche sur firefox sa ne marche peut être pas sur ie mais si sa marche sur ie sa marche forcément sur firefox.
Voili voilou ^^

simon


Site/blog

2960 messages

posté le 2010-01-27 à 22:28:10

re

J'ai téléchargé firefox et tout est bon.
J'ai même pû regler mon lecteur [lien]
qui était décalé.( enfin le lecteur c'est un essai)
Ce qui veut dire que tes tutos ne sont pas si mauvais

Bonne fin de soirée.
Cent fois sur le métier remets ton ouvrage...
...Car c'est en forgeant qu'on devient forgeron



valentin45000


Site/blog

131 messages

posté le 2010-01-28 à 07:35:44

Merci
Quand tu fait des réglages regarde les sur firefox et ie ;)

Bonne continuation.



Il faut être membre de ce forum pour ajouter un nouveau sujet ou répondre à un sujet, dans cette catégorie



Cliquez sur la carte :
dashboard ===> Nombre d'utilisateurs en ligne===> Nombre de personnes sur chaque page
lecteurs ===> Une liste des pages les plus consultées, avec le nombre de visiteur sur chaque page.
cartes ===>Le mode normal vous montre d'où viennent les visiteurs. Les cibles clignotent pour les personnes qui viennent de se connecter.
Historique :
lines => 24 h day ===>Un graphique des visiteurs durant les dernières 24 heures.

Recommander ce blog | Contacter l'auteur | Reporter un abus | S'abonner au blog Flux RSS du blog | Espace de gestion | Annuaire des blogs