problème d'affectation de style dans mes formulaire

problème d'affectation de style dans mes formulaire - HTML/CSS - Programmation

Marsh Posté le 11-11-2005 à 15:36:32    

Bonjour,
j'ai un autre problème dans mon CSS. j'ai fait une modification des input de mon formulaire d'identification. mais le problème c'est que j'ai un autre formulaire dans mon site mais je ne voudrai pas appliquer les modifications dessus.  
Le problème c'st que mon css applique pour tous les input du site
 
voici comment se présente mon CSS:
 

Code :
  1. <style type="text/css">
  4. body {
  5. margin: 0;
  6. padding:0;
  7. position: absolute;
  8. width: 100%;
  9. height: 100%;
  10. background-color: #FAFAFA;
  11. font-family: verdana, arial, sans-serif;
  12. }
  14. .bannière {
  15. position: absolute;
  16. top: 30px;
  17. left: 181px;
  18. width: 458px;
  19. height: 101px;
  20. font-size: 36px;
  21. padding: 10px;
  22. }
  24. .login{
  25. position: absolute;
  26. top: 40px;
  27. left: 649px;
  28. /*bottom: 445px;*/
  29. width: 106px;
  30. height: 81px;
  31. font-size: 36px;
  32. padding: 10px;
  33. background-image:url(champ_login.jpg);
  35. }
  37. .gauche{
  38. position: absolute;
  39. top: 131px;
  40. left: 180px;
  41. width: 168;
  42. height: 376;
  43. padding: 10px;
  45. }
  47. .bas{
  48. position: absolute;
  49. top: 507px;
  50. left: 179px;
  51. width: 586;
  52. height: 26;
  53. padding: 10px;
  54. }
  56. .droit{
  57. position: absolute;
  58. top: 140px;
  59. left: 747px;
  60. width: 28;
  61. height: 377;
  62. }
  64. .contenu{
  65. position: absolute;
  66. top: 131px;
  67. left: 348px;
  68. width: 389;
  69. height: 377;
  70. margin-top: 10px;
  71. margin-left: 10px;
  72. /*
  73. margin-right: 15px;
  74. margin-bottom: 15px;*/
  75. }
  77. .deco{
  78. font-size: 12;
  79. }
  81. form input{
  82. font-size: 60%;
  83. background: #dadada;
  84. color: #2e446b;
  85. border: 1px solid #dbdbdb;
  86. padding: 1px;
  87. width: 80px;
  88. height: 17px;
  89. margin: 2px;
  90. }
  92. .S1{
  93. font-size: 14;
  94. text-indent: 10px;
  95. top: 131px;
  96. left: 348px;
  97. width: 389;
  98. height: 377;
  99. background-image:url(section1.jpg);
  100. }
  102. .S2{
  103. font-size: 14;
  104. text-indent: 10px;
  105. top: 131px;
  106. left: 348px;
  107. width: 389;
  108. height: 377;
  109. background-image:url(section2.jpg);


 
Bien sur j'ai déclaré mon css externe dans le <head> de ma page.
si je fais un .form { } avec les meme parametre et que je les déclare dans un div uniquement sur le formulaire que je souhaite, ça ne merche pas. donc ma mise en forme des input de mes formulaire se fait sur tous les formulaire et non celui que je désire.
Merci par avance de votre aide.

Reply

Marsh Posté le 11-11-2005 à 15:36:32   

Reply

Marsh Posté le 11-11-2005 à 16:07:01    

Il faudrait donner un nom de class particulier pour le formulaire particulier, ex.: <form ... class="toto" ...>, et un autre nom de class pour les autres formulaires, ex.: <form ...class="titi"...>, et avoir un style pour chaque class, ex.: .form.toto {...} et .form.titi {...}.

Reply

Marsh Posté le 11-11-2005 à 16:08:24    

ah c'est pas bête du totu ça :)  
je vais essayer ça de suite.
merci

Reply

Marsh Posté le 11-11-2005 à 16:17:57    

Donc je viens de tester ce que tu m'a dit mais ça m'a pas l'air de fonctionner.
lorsque je fais ceci:

Code :
  1. form input.login {
  2. font-size: 60%;
  3. background: #dadada;
  4. color: #2e446b;
  5. border: 1px solid #dbdbdb;
  6. padding: 1px;
  7. width: 80px;
  8. height: 17px;
  9. margin: 2px;
  10. }


et que j'applique la classe "login" dans le formulaire souhaité (<from....class="login>, mon formulaire n'apparait plus
 
j'ai essayé avec ".form.login { } mais mon formulaire n'apparait pas non plus. et enfin ".form input.login{}" et l'effet est le même.
Je précise que "form input {}" est un style appliqué directement aux input en général comme un "body{}" ou "p{}" sans "." devant. mais lorsque j'éssaye de creer mon propre style avec un "." (".input {}" ) et que j'applique la classe devant les input ("<div class="input"><input.....></div>" ) rien ne se passe
 
RECTIFICATION: effectivement ça marche. j'ai just eutilisé un nom de class qui rentrait en conflis avec certains value de mes input.  
Merci pour ton aide :jap:  :jap:  
problème résolu


Message édité par ephagor le 11-11-2005 à 16:27:01
Reply

Marsh Posté le 11-11-2005 à 16:24:49    

renomme "form input.login" en ".login" dans ton CSS

Reply

Marsh Posté le 11-11-2005 à 16:27:44    

voici ce que j'ia fait et cela marche:

Code :
  1. form input.test{
  2. font-size: 60%;
  3. background: #dadada;
  4. color: #2e446b;
  5. border: 1px solid #dbdbdb;
  6. padding: 1px;
  7. width: 80px;
  8. height: 17px;
  9. margin: 2px;
  10. }


en appliquant la classe "test" aux input de mon choix , la mise ne forme s'effectue
 
EDIT: en applisuant le .login que tu viens de me donner, ce la marche également.  
en fait, le problème venait que n'appliquais pas la classe au bons endroit. je l'appliquait à la balise<form> et non aux <input>


Message édité par ephagor le 11-11-2005 à 16:30:12
Reply

Marsh Posté le 11-11-2005 à 16:31:32    

Tu n'as pas besoin de préciser "form input.test", ne mettre que ".test" suffit. et tu écrit class=test (ou login précedemment) associé à ton input pour que la classe soit affectée à la bonne balise (ici, input).

Reply

Marsh Posté le 11-11-2005 à 16:44:52    

oui c'est ce que j'ai effectivement.
ça marche niquel maintenant
merci de ton aide...problème résolu

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed