Formulaire CSS only avec float
Bonsoir
EDIT : c'est mieux avec le site paraît il ^^ => clic ici, non définitif bien entendu =)
Je suis en train de recoder un formulaire en css only, et celui-ci ne réagit pas de la même façon sous IE et sous FF2 =/
Voici le code du formulaire :
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
| <form name="courrier" id="inscription" method="post" action="contact.php" onsubmit="return validateForm(this)">
<!-- <div id="titreForm">Formulaire de contact</div> -->
<div id="corpForm">
<fieldset id="coordonnees">
<legend> Vos coordonnées </legend>
<br />
<p>
<label for="nom" title="Veuillez saisir votre nom en lettres majuscules" class="oblig">* Nom :</label>
<input type="text" name="nom" id="nom" title="Veuillez saisir votre nom en lettres majuscules" tabindex="1" onfocus="this.className='focus';" onblur="this.className='normal';" onchange="javascript:this.value=this.value.toUpperCase();" />
</p>
<p>
<label for="prenom" title="Veuillez saisir votre prénom" class="oblig">* Prénom :</label>
<input type="text" name="prenom" id="prenom" title="Veuillez saisir votre prénom" tabindex="2" onfocus="this.className='focus';" onblur="this.className='normal';"/>
</p>
<p>
<label for="eMail" title="Veuillez saisir votre adresse email" class="oblig">* E-Mail :</label>
<input type="text" name="mail" id="eMail" title="Veuillez saisir votre adresse e-mail" tabindex="3" onfocus="this.className='focus';" onblur="this.className='normal';" />
<a href="#" class="aide" title="Votre adresse e-mail ne sera pas utilisée à des fins commerciales" tabindex="0"><img src="img_site/icon_help.gif" alt="Votre adresse e-mail ne sera pas utilisée à des fins commerciales" /></a>
</p>
</fieldset>
<br />
<fieldset id="commentaire">
<legend> Votre commentaire / demande </legend>
<br />
<!--<span class="legende">Entrez ici une description de ce que vous :</span>-->
<p>
<textarea name="comm" id="comments" rows="5" cols="60" tabindex="4" onfocus="this.className='focus';" onblur="this.className='normal';"></textarea>
</p>
</fieldset>
<br />
<em>* Champs obligatoires</em>
</div>
<div id="piedForm">
<input type="submit" name="Submit" id="valid" value="Envoyer" title="Cliquez sur ce bouton pour envoyer votre requête" tabindex="5" />
</div>
</form> |
Rien d'extraordinaire. J'ai trouvé que ce qui faisait défaut, c'est visiblement la partie CSS suivante :
Code:
1
2
3
4
5
6
7
8
| #corpForm fieldset#coordonnees label {
float: left;
width: 35%;
text-align: right;
margin: 0;
padding: 0 .5em 0 0;
line-height: 1.8em;
} |
Si vous désirez plus de détail sur la css restante, demandez, mais il n'y a rien d'extraordinaire sur cette partie là, hormis les margin / padding classique, sachant que le formulaire "inscription" fait 40em de large et est centré.
Ca fonctionne nickel sous IE (quel comble ^^) mais pas sous FF2, il y a un décalage. Le
Code:
1
2
3
4
| * {
padding: 0;
margin: 0;
} |
est bien présent au début de la CSS sinon. Si qqun a eu idée... Merci =)
PS : j'ai volontairement désactiver le bouton =)
--------------------------------------------------------------------
J'ai également une autre question mais je ne sais pas si je peux mêler les deux dans un même post... Delete me si jamais il faut créer un new topic :)
Mon site a été designé à la base entièrement en frame, et je me suis mis aux CSS pour le recoder correctement vis à vis des normes, il peut manquer des choses, mais je fais au possible =)
Cela dit, le positionnement ne me paraît pas optimal en position:absolute. Cf la partie centrale droite, la ou le contenu change, qui est pourtant en %age dans la CSS en hauteur et qui révèle un "bottom" fixe quand on passe du 1024 au 1280 dirait-on.
position:relative semble-t-il être plus approprié pour un site centré et adaptable à toutes les résolutions ?
Merci encore =)
