Problème formulaire/trigger/css ?

Résolu/Fermé
Ptitepalou - Modifié par Ptitepalou le 8/03/2013 à 16:20
 Ptitepalou - 14 mars 2013 à 09:57
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 :


<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"> </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" >[...]</option>  
                                          <option value=""> </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é" for="civilité"><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"> </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"> </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"> </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"> </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"> </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"> </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"> </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 ^^

2 réponses

midnnight Messages postés 484 Date d'inscription jeudi 23 février 2006 Statut Membre Dernière intervention 26 juillet 2017 38
12 mars 2013 à 03:07
<div class="contact"
C'est bien la "class="contact qu'on aurait voulu voir...
Mais tu as posté le html...
A+
0
Bonjour,

A rajouter dans le css du form :

.contact form

et y entrer

float:none
width:auto


Thanks
0