Discussion :

[moulette85]

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 html :

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
<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>&nbsp;Vos coordonnées&nbsp;</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>&nbsp;Votre commentaire / demande&nbsp;</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 :

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

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 :

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

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 =)

[Dan_A]

Un exemple de formulaire css :
http://garyblue.port5.com/webdev/form.html
position:absolute n'est pas souvent compatible. La position par défaut (static) est celle qui pose le moins de problèmes car elle évite les chevauchements, problèmes quand on change de résolution ou de taille de caractères.
Position:relative ne doit pas non plus être utilisé à toutes les sauces...

[moulette85]

Dsl pour le retard de réponse ^^

Je vais refaire en enlevant les position et en laissant par défaut, on va bien voir ce que ça peut donner =)

[moulette85]

Vouala, je pense que j'ai fait le tour, et je me suis rabattu sur un site extensible en hauteur plutôt qu'un cadre central fixe, ça plaît ou pas... mais il ne semble plus y avoir de problèmes =)

Merci =)