formulaire/trigger/css

**Ptitepalou** · 08/03/2013, 16h11

Bonjour à tous,

Sur ma page contact, j'ai actuellement 3 formulaires s'ouvrant par la fonction trigger (chacun des trigger appelle une page php où se situe le formulaire).
J'ai changé mon menu de gauche, qui avant était fait d'image, et maintenant fait de menus déroulants s'ouvrant par trigger.
Du coup mes textes (trigger) précédant mes formulaires (toggle_container) ont pris le même fond que le menu : j'ai bien réussi à modifier cela en css

Cependant mes formulaires ne s'affichent plu de la même façon.
Non seulement ils ne poussent plus le bas de la page (seulement le trigger suivant), mais en plus les td ne s'affichent plus correctement oO
Le colspan ne fonctionne plus, les input ne sont pas dans le même ordre ....

Comment faire ?

Voici le même formulaire en 2 images, le premier qui s'affiche sur le site, le second est l'url simple du formulaire (non intégré au site). C'est cette version que je voudrais avoir sur le site

http://imageshack.us/g/252/contactsite.jpg/

Je ne sais pas trop d'où vient le problème, je suppose que c'est le html alors voici le code du form :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<div class="contact" style="background-color:#E4F1EA;">
	<h2 style="color:#060;">Contact produits industriels</h2>
    	<p class="trigger" style="clear:left; height:30px; background:#E4F1EA;"><span class="bold">Pour toute question concernant le service Industrie,</span> vous pouvez nous contacter par mail en complétant ce formulaire <a style="color:#cd003a" href="#" >ci-dessous</a>.<br/>
Votre demande sera automatiquement transmise au service, qui vous répondra dans les plus brefs délais.</span></p>
<div class="toggle_container"> 
		<div class="block">
		<p class="red">* Champs obligatoires</p>
<form name="contact" action="contact2.php" method="post" onsubmit="return testform()" id="commentForm" > 
 
    <table cellpadding="0" cellspacing="0" class="table_contact"> 
        <tr> 
            <th width="115" class="label"><label id="pro_1" for="pro_1"><span class="bold">Professionnel</span></label></th> 
            <td> <input type="radio" id="pro1" name="pro" value="professionnel" onclick="champs('oui');" /></td> 
        </tr> 
        <tr> 
            <th width="115" class="label"><label id="pro_0" for="pro_0"><span class="bold">Particulier</span></label></th> 
            <td> <input type="radio" id="pro0" name="pro" value="particulier" onclick="champs('non');" />                                        </td> 
        </tr> 
         <tr> 
            <th width="115" class="label"><label for="societe" id="raison" style="display:none"><span class="bold">Société :</span></label></th> 
            <td><input type="text" name="societe" id="societe" size="45"  style="display:none" /></td> 
        </tr>
 
        <tr> 
            <td colspan="2" class="label">&nbsp;</td> 
		</tr>
        <tr> 
            <th width="115" class="label"><label id="secteur2" style="display:none"><span class="bold">
                                  Secteur d'activité : <span class="red">*</span></span></label></th> 
            <td> <select  name="secteur" id="secteur" style="display:none"> 
                                          <option selected="selected" value=""  >Choisissez :</option> 
                                          <option value="">--------------------------------------------------------------------</option> 
                                          <option value="Construction / BTP" >Construction
                                            / BTP</option> 
                                          <option value="">__________________</option> 
                                          <option value="Matériaux de construction">Matériaux
                                            de construction</option> 
                                          <option value="Génie civil">Génie civil</option> 
                                          <option value="Gros oeuvre">Gros oeuvre</option> 
                                          <option value="">&nbsp;</option> 
                                          <option value="Distribution">Distribution</option> 
                                          <option value="">__________________</option> 
                                          <option value="Auto / Moto / Bateau">Auto
                                            / Moto / Bateau</option> 
                                          <option value="Alimentaire">Alimentaire</option> 
                                          <option value="Bricolage / jardin / déco">Bricolage
                                            / jardin / déco</option> 
                                          <option value="Hi-fi / vidéo / informatique / télécom / multimédia">Hi-fi
                                            / vidéo / informatique / télécom / multimédia</option> 
                                          <option value="Négoce / commerce gros industriel">Négoce
                                            / commerce gros industriel</option> 
                                          <option value="Distribution : Autres">Autres</option> 
                                          <option value="">&nbsp;</option> 
                                          <option value="Services publics / administrations">Services
                                            publics / administrations</option> 
                                          <option value="">__________________</option> 
                                          <option value="Affaires étrangères">Affaires
                                            étrangères</option> 
                                          <option value="Armée">Armée</option> 
                                          <option value="Collectivités">Collectivités</option> 
                                          <option value="Enseignement">Enseignement</option> 
                                          <option value="Services publics / administrations : Autres">Autres</option> 
                                          <option value="">&nbsp;</option> 
                                          <option value="Industrie">Industrie</option> 
                                          <option value="">__________________</option> 
                                          <option value="Aéronautique / spatial">Aéronautique
                                            / spatial</option> 
                                          <option value="Agriculture">Agriculture</option> 
                                          <option value="Agro-alimentaire">Agro-alimentaire</option> 
                                          <option value="Armement">Armement</option> 
                                          <option value="Auto / Moto / Cycles">Auto / Moto / Cycles</option> 
                                          <option value="Chimie / parachimie">Chimie / parachimie</option> 
                                          <option value="Construction navale">Construction navale</option> 
                                          <option value="Eau / gaz / électricité / chauffage">Eau / gaz / électricité / chauffage</option> 
                                          <option value="Electronique">Electronique</option> 
                                          <option value="Emballage">Emballage</option> 
                                          <option value="Equipement industriel">Equipement industriel</option> 
                                          <option value="Mécanique / machine-outil">Mécanique / machine-outil</option> 
                                          <option value="Métallurgie">Métallurgie</option> 
                                          <option value="Plasturgie">Plasturgie</option> 
                                          <option value="Robotique">Robotique</option> 
                                          <option value="Sidérurgie">Sidérurgie</option> 
                                          <option value="Télécoms">Télécoms</option> 
                                          <option value="Transports">Transports</option> 
                                          <option value="Industrie : Autres">Autres</option> 
                                          <option value="">&nbsp;</option> 
                                          <option value="Services">Services</option> 
                                          <option value="">__________________</option> 
                                          <option value="Finance / assurances / juridique">Finance / assurances / juridique</option> 
                                          <option value="Marketing / communication / évènementiel">Marketing / communication / évènementiel</option> 
                                          <option value="Ressources humaines">Ressources humaines</option> 
                                          <option value="Services : Autres">Autres</option> 
                                          <option value="">&nbsp;</option> 
                                          </select> 
			</td> 
        </tr> 
        <tr> 
            <th width="115" class="label"><label id="ad_societe" for="ad_societe"><span class="bold">Adresse :</span></label></th> 
            <td><input type="text" name="adresse" id="adresse" size="45"  /></td> 
        </tr> 
        <tr> 
            <th width="115" class="label"><label id="code_postal" for="code_postal"><span class="bold">Code postal :</span></label></th> 
            <td><input type="text" name="cp" id="cp" size="45"  /></td> 
        </tr> 
        <tr> 
            <th width="115" class="label"><label id="ad_ville" for="ad_ville"><span class="bold">Ville :</span></label></th> 
            <td><input type="text" name="ville" id="ville" size="45"  /></td> 
        </tr> 
        <tr> 
            <th width="115" class="label"><label id="ad_telephone" for="ad_telephone"><span class="bold">Téléphone :</span></label></th> 
            <td><input type="text" name="telephone" id="telephone" size="45"  /></td> 
        </tr> 
        <tr> 
            <th width="115" class="label"><label id="ad_telecopie" for="ad_telecopie"><span class="bold">Télécopie :</span></label></th> 
            <td><input type="text" name="telecopie" id="telecopie" size="45"  /></td> 
        </tr> 
        <tr> 
            <th width="115" class="label"><label id="civilit&eacute;" for="civilit&eacute;"><span class="bold"> Civilité : <span class="red">*</span></span></label></th> 
             <td><input name="civ" type="radio" value="M" class="validate[required]" checked="checked" /> 
                 <label class="civilite" id="choice1" for="choice1">M.</label> 
                 <input name="civ" type="radio" value="Mme"/> 
                 <label class="civilite" id="choice2" for="choice2">Mme</label> 
                 <input type="radio" name="civ" value="Mlle" /> 
                 <label class="civilite" id="choice3" for="choice3">Mlle</label> </td> 
        </tr>
 
        <tr> 
            <td colspan="2" class="label">&nbsp;</td> 
		</tr>
        <tr> 
            <th width="115" class="label"><label id="lastname" for="lastname"><span class="bold"> Nom : <span class="red">*</span></span></label></th> 
            <td><input type="text" name="nom" id="nom" size="45" class="required" /></td> 
        </tr> 
        <tr> 
            <th width="115" class="label"><label id="firstname" for="firstname"><span class="bold">Prénom : <span class="red">*</span></span></label></th> 
            <td><input type="text" name="prenom" id="prenom" size="45" class="required"  /></td> 
        </tr> 
        <tr> 
            <th width="115" class="label"><label id="formation" for="fonction"><span class="bold">Fonction :</span></label></th> 
            <td><input type="text" name="fonction" id="fonction" size="45"  /></td> 
        </tr> 
        <tr> 
            <th width="115" class="label"><label id="email" for="email"><span class="bold"> E-mail : <span class="red">*</span></span></label></th> 
            <td><input type="text" name="mail" id="mail" size="45" class="required email" /></td> 
        </tr>
        <tr> 
            <td colspan="2" class="label">&nbsp;</td> 
        </tr> 
 
        <tr> 
            <th width="115" class="label"> <label id="sujet" for="sujet">Sujet : <span class="red">*</span> </label></th> 
            <td><select name="liste0" id="liste0" onchange="liste(this.form)" class="required" > 
                                          <option value="" selected="selected">Sélectionnez votre sujet</option> 
                                          <option value="">---------------------------------</option> 
 
                                          <option value="liste4">Marques</option> 
                                          <option value="liste5">Produits</option> 
                                          </select> <br />
 
 
                                            <select name="liste4" id="liste4" style="display:none" onchange="champs3(this.form)"> 
                                              <option value="" selected="selected">Sélectionnez une marque</option> 
                                                                                            <option value="Compresseurs">[...]</option> 
                                                                                            </select> 
 
                                              <select name="liste5" id="liste5" style="display:none" onchange="champs4(this.form)"> 
                                                <option value="" selected="selected">Sélectionnez une famille de produits</option> 
                                                                                                <option value="Abrasion">[...]</option> 
                                                                                                </select> 
                                          <input name="confi1" type="checkbox" id="confi1" style="display:none" value="oui" /> 
                                          <label for="confi2" id="confi2" style="display:none">Confidentiel</label>                                        
			</td> 
        </tr> 
 
        <tr> 
            <td colspan="2" class="label">&nbsp;</td> 
		</tr> 
        <tr> 
            <th width="115" class="label">Objet : <span class="red">*</span></th> 
            <td> <input name="objet" type="radio" id="obj1" value="Technique" checked="checked" /> 
                                          <label id="ad_obj1" for="ad_obj1">Technique</label> <input type="radio" id="obj2" name="objet" value="Commercial" /> 
                                          <label id="ad_obj2" for="ad_obj2">Commercial</label> </td> 
        </tr>
 
        <tr> 
            <td colspan="2" class="label">&nbsp;</td> 
		</tr>
        <tr> 
            <td colspan="2" class="label"><textarea name="message" cols="50" rows="10" id="message" class="required"  onfocus="if(this.value=='Rédigez votre texte ici.'){this.value='';} " onblur="if(this.value==''){this.value='Rédigez votre texte ici.';}">Rédigez votre texte ici.</textarea></td> 
        </tr> 
        <tr>
            <th width="115" class="label">&nbsp;</th> 
 
		</tr>
        <tr> 
            <td colspan="2" valign="top"> <input type="checkbox" id="documentation" name="documentation" value="docu" checked="checked"/><label id="docu" for="docu">Je souhaite recevoir de la <span class="bold">documentation</span> sur le produit ou la marque qui m'intéresse</label> </td> 
        </tr> 
 
        <tr> 
            <td colspan="2" class="label">&nbsp;</td> 
		</tr> 
        <tr> 
            <td colspan="2" valign="top"><input type="checkbox" id="legal" name="legal" value="legal" checked="checked" />                                               <label id="ad_legal" for="ad_legal">J'accepte
                                              que <span class="bold"></span> utilise mes coordonnées pour m'informer des nouveautés et des évènements</label> </td> 
        </tr> 
 
        <tr> 
            <td colspan="2" class="label">&nbsp;</td> 
		</tr>
        <tr> 
 
            <td><input name="button" type="button" class="okvalid" onclick="document.contact.reset()" value="Effacer" /></td><td> 
                                          <input name="button" type="submit" class="okvalid" value="Valider" /></td> 
		</tr>
 
    </table> 
</form>
</div></div> <!-- end toggle -->
</div>

Et si c'est dû au CSS, alors je ne sais pas quelle partie du code vous montrer oO

Voilà merci d'avance de vos réponses, je suis désespérée ^^

**NoSmoking** · 09/03/2013, 17h27

Bonjour,
le code que tu as mis rend l'effet de ta 2nd image, donc l'erreur se situe vraisemblablement dans le code en amont.

Passe par un validateur pour voire où cela pèche.

formulaire/trigger/css

HTML

Vue hybride

Discussions similaires

Partager

Partager