Formulaire html css

1 pièce(s) jointe(s)

Formulaire html css

bonjours,
je voudrais savoir votre avis sur ce code et et une capture pour voir ceux que ça donne:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<fieldset>
  <legend>général</legend>
  <p class="icon-prenom" title="prénom">
    <label class="label-inscription" for="prenom">votre prénom : *</label>
    <input class="global-input" type="text" placeholder="Votre Prénom"  name="prenom" id="prenom" required />veuillez mettre votre prénom.
  </p>
  <div>
    <label class="label-inscription">loisir :</label>
    <span class="choix-liste choix-actif icon-select">choix de la liste</span>
    <span class="choix-membre">choix 1, choix 8</span>
    <div class="select-multiple-choix">
      <ol class="select-choix">
        <li>
          <input type="checkbox" name="Choix1" id="Choix1" />Choix 1
        </li>
        <li>
          <input type="checkbox" name="Choix2" id="Choix2" />Choix 2
        </li>
        <li>
          <input type="checkbox" name="Choix3" id="Choix3" />Choix 3
        </li>
        <li>
          <input type="checkbox" name="Choix4" id="Choix4" />Choix 4
        </li>
      </ol>
      <ol class="select-choix">
        <li>
          <input type="checkbox" name="Choix5" id="Choix5" />Choix 5
        </li>
        <li>
          <input type="checkbox" name="Choix6" id="Choix6" />Choix 6
        </li>
        <li>
          <input type="checkbox" name="Choix7" id="Choix7" />Choix 7
        </li>
        <li>
          <input type="checkbox" name="Choix8" id="Choix8" />Choix 8
        </li>
      </ol>
      <ol class="select-choix">
        <li>
          <input type="checkbox" name="Choix9" id="Choix9" />Choix 9
        </li>
        <li>
          <input type="checkbox" name="Choix10" id="Choix10" />Choix 10
        </li>
        <li>
          <input type="checkbox" name="Choix11" id="Choi11" /> Choix 11
        </li>
        <li>
          <input type="checkbox" name="Choix12" id="Choix12" />Choix 12
        </li>
      </ol>
    </div>
  </div>
  <div>
    <label class="label-inscription">pays :</label>
    <span class="select-normal">
      <span class="select-normal-choix icon-select">Choix dans la liste</span>
      <ol class="select-choix-liste">
        <li>France</li>
        <li>Belgigique</li>
        <li>Portugal</li>
      </ol>
    </span>
  </div>
</fieldset>

si ca vous dit voilà le css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/*********************************************************************************************************Début des formulaires***********************************************************************************************************************************/
 
fieldset {
  display: block;
  margin-bottom: 1em;
  position: relative;
  border: 1px solid #CCCCCC;
  padding: 0;
  padding-top: 4em;
}
 
legend {
  border-bottom: 1px solid #CCCCCC;
  width: 100%;
  position: absolute;
  top: -1px;
  left: -1px;
 /* hide the fieldset border */
  line-height: 3em;
 /* emulating padding-top/bottom */
  text-indent: 1em;
 /* emulating padding-left */
  %left: -8px;
  font-weight: 700;
  font-size: 1.3em;
} /* for IE7 */
 
fieldset p, fieldset div {
  padding: 1em;
  margin: 0;
  overflow: hidden;
  border-top: 1px solid #CCCCCC;
}
 
fieldset div:nth-child(2), fieldset p:nth-child(2) {
  border-top: 0;
}
/*********************************************************************************************************Fin des formulaires***********************************************************************************************************************************/
/*********************************************************************************************************Début des select**********************************************************************************************************************************/
 
.choix-liste {
  position: relative;
  float: left;
  list-style: none;
  padding: 0.3em;
  margin-right: 11em;
  border: 1px solid #CCCCCC;
  border-bottom: 0;
  cursor: pointer;
  background-color: #FFFFFF;
  color: #0D5995;
  z-index: 1;
  width: 20em;
}
 
.choix-liste, .choix-actif {
  border-bottom: none;
  font-weight: bold;
  z-index: 10;
  color: #CCCCCC;
}
 
.select-multiple-choix {
  clear: both;
  position: relative;
  border: #CCCCCC 1px solid;
  z-index: 5;
  top: -0.1em;
  top: -2px;
/*	  background-color:#7192a8;*/
  overflow: hidden;
  width: 45em;
}
 
.select-choix li {
  float: left;
  width: 10em;
}
 
.choix-membre {
  font-weight: 700;
}
 
.select-normal {
  border: #CCCCCC 1px solid;
  display: inline-block;
  padding: 0;
  width: 15em;
}
 
.select-normal-choix {
  border-bottom: 1px solid #CCCCCC;
  padding: 0.5em;
  display: block;
}
 
.select-choix-liste li {
  padding: 0.5em;
}
 
.select-choix-liste li:hover {
  background-color: #4F6888;
  padding: 0.5em;
}
 
.label-inscription {
  float: left;
  width: 20em;
}
 
 
/*********************************************************************************************************Fin des select************************************************************************************************************************************/

j'ai mis des li ol afin de compter

j'aimerais savoir si je peux ou pas laisser label dans un div (perso je l met car c'est pour aligné correctement avec mes inputs

pour info j'ai fais un faux select car ça me convient plus qu'un vrai select html

sinon a part ca es-ce que je peux laisser comme ça ou je dois modifier une ou 2 balises

merci

Bonjour,

Citation:

j'ai mis des li ol afin de compter

j'ai du mal à visualiser le but !

Rapidement on peut noter que cette partie de code
Code:

1 2 3 4 5 6 7 8 <span class="select-normal"> <span class="select-normal-choix icon-select">Choix dans la liste</span> <ol class="select-choix-liste"> <li>France</li> <li>Belgigique</li> <li>Portugal</li> </ol> </span>
est non conforme au validateur.

merci,

j'ai pas lu ta réponse mais j'ai modifié entre temps

Code:

1
2
3
4
5
6
7
8
	  <div><label class="label-inscription">pays : *</label>      <div class="dropdown choix select-editer">
	  <span class="hida1 icon-select">Choix dans la liste</span>
	  <ol class="mutliSelect1 select-normal">
	  <li>France</li>
	  <li>Belgique</li>
	  <li>Portugal</li>
	  </ol>
	  </div></div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="multiple-choix"><label class="label-editer">couleur des cheveux :</label>	  <span class="choix-liste hida1 choix-actif icon-select">Choix dans la liste</span>
	  <span class="choix-membre"></span>
	  <div class="select-multiple-choix mutliSelect1">
	  <ol class="select-choix">
	  <li><input type="checkbox" value="chatains" />chatains</li>
	  <li><input type="checkbox" value="bruns" />bruns</li>
	  <li><input type="checkbox" value="noirs" />noirs</li>
	  </ol>
	  <ol class="select-choix">
	  <li><input type="checkbox" value="blonds" />blonds</li>
	  <li><input type="checkbox" value="poivre et sel" />poivre et sel</li>
	  <li><input type="checkbox" value="blancs" />blancs</li>
	  </ol>
	  <ol class="select-choix">
	  <li><input type="checkbox" value="roux" />roux</li>
	  <li><input type="checkbox" value="autres" />autres</li>
	  </ol>
	  </div></div>

c'est valide w3c et je ne sais pas pour quoi tu me dit c'est pas valide hors c'est valide w3c

le but c'est que ca marche ;)
merci

Citation:

c'est valide w3c et je ne sais pas pour quoi tu me dit c'est pas valide hors c'est valide w3c

après correction, peut être ... mais j'en reste pour le moment à

Citation:

Envoyé par NoSmoking

Citation:

j'ai mis des li ol afin de compter

j'ai du mal à visualiser le but !