[CSS 3] mise en forme d'un formulaire [Résolu]

redoran · 29/01/2012, 15h59

Salam ; code css

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
 
 
html
{
background:#f4f6f7;
font-family: "times new roman",Arial, Verdana,serif;
}
.entete {
	padding:20px;
	width:  auto;
	margin: 0 auto;
	text-align: center;
	background: #d9d3d3;
}
.contenu{
	width: 900px;
	height:400px;
	margin: 0 auto;
	padding: 130px;
}
form {
	margin: 0 auto;
    width: 500px;
    padding: 50px;
    border: 1px solid grey;
	letter-spacing:.1em;
	font-weight:bold;
     /*** Rounded Corners ***/
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
 
    background: #92c3e8;
 
    /*** Shadow behind the box ***/
    -moz-box-shadow:2px 3px 10px #92c3e8;
    -webkit-box-shadow:2px 3px 10px #92c3e8;
}
.form h2{
	border:1px solid #42596d;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	color:#fff;
	font-weight:normal;
	font-size:1.2em;
	background: #eba328;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#42596d', endColorstr='#1a1f24'); /* for IE */
	background-image: -moz-radial-gradient(center,0px,center,500px,from(#42596d),to(#1a1f24));
	background-image: -webkit-gradient(radial,center top,0,center top,500,from(#42596d),to(#1a1f24));
	-webkit-transition: border .6s ease-in;
    -moz-transition: border .6s ease-in;
    -o-transition: all .6s ease-in;
    transition: all .6s ease-in;
}
.form h2{
 
	margin:0 auto 20px auto;
	padding:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
.label {
	display: block;
	float: left;
}
input   {
 
    width: 230px;
    background:#fff8cd;
    padding: 6px;
    margin-bottom: 20px;
    border-top: 2px solid #ad64e0;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px; 
 
    /*** Adding a small shadow ***/
    -moz-box-shadow: 0px 0px 2px #000;
    -webkit-box-shadow: 0px 0px 2px #000;
}
.buttons {
	cursor:pointer;
	margin-right:50px;
	 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
 }
.buttons:hover {
     color: black;
	 cursor:pointer;
}
.pied {
	padding:5px;
	background: #d9d3d3;
	margin: 0 auto;
	clear:both;
}

formulaire

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
<!DOCTYPE html>
<HTML>
<head>
	<!--Pour forcer le navigateur à afficher en mode IE9, sans quoi il peut passer en mode quirks.-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
	<meta charset="utf-8" />
	<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <!-- application dynamique  -->
	<link rel="shortcut icon" href="image/s3g.ico" />
	<link rel="stylesheet" type="text/css" href="style_div.css">
	<title> Identification</title>
</head>
<body>
	<div class="entete">
 
	</div>
	<div class="contenu">
		<form class="form">
			<h2> S-3-G: Identification</h2>
			<div class="label">
				<label for="ident">Identifiant</label><input type="text" name="ident" />
			</div>
			<div class="label">
				<label for="pass">Mot de passe</label><input type="password" name="pass" />
			</div>
			<div class="buttons">
				<button type="submit">S'identifier</button>
			</div>
		</form>
	</div>
 
</body>
<footer class="pied">
	Copyright © s3g - Conception kacinet
</footer>
</html>

mon problème c'est que j'arrive pas a aligner les champs inputs .
merci pour votre aide

rotrevrep · 29/01/2012, 21h45

je te propose ceci, remplace l'intérieur de ta div contenu :

Code :

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

1
2
3
4
5
6
7
8
<form class="form">
		<table align="center">
			<tr><td align="center" colspan=2>S-3-G: Identification</td></tr>
			<tr><td><label for="ident">Identifiant</label></td><td><input type="text" name="ident" /></td></tr>
			<tr><td><label for="pass">Mot de passe</label></td><td><input type="password" name="pass" /></td></tr>
			<tr><td align="center" colspan=2><button type="submit">S'identifier</button></td></tr>
		</table>
		</form>

c'est un début, mais ça alignera tes entrées

redoran · 30/01/2012, 08h11

Salam ; merci rotrevrep mais je crois que la mise en forme avec les div et css est indiquée dans le cadre de l'accessibilité, il me semble aussi que le CSS permet de réglé ce problème mais j'arrive pas a tombé sur la bonne pâte.

redoran · 30/01/2012, 15h52

Re; voila sur plusieurs tentative je suis arrivé a ça:
html

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
<!DOCTYPE html>
<HTML>
<head>
	<!--Pour forcer le navigateur à afficher en mode IE9, sans quoi il peut passer en mode quirks.-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
	<meta charset="utf-8" />
	<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <!-- application dynamique  -->
	<link rel="shortcut icon" href="image/favs3g.ico" />
	<link rel="stylesheet" type="text/css" href="style_div.css">
	<title> Identification</title>
</head>
<body>
	<div class="entete">
 
	</div>
	<div class="contenu"> 
		<form class="form">
			<div class="h1">
				<h1> S-3-G: Identification</h1>
			</div>
			<div class="label">
				<label for="ident">Identifiant:</label> 
			</div>
			<div class="input">
				<input type="text" name="ident" />
			</div>
			<div class="label">
				<label for="pass">Mot de passe:</label> 
			</div>
			<div class="input">
				<input type="password" name="pass" />
			</div>
 
			<div class="buttons">
				<button type="submit">S'identifier</button>
			</div>
		</form>
	</div> 
 
</body>
<footer class="pied">
	Copyright © s3g - Conception kacinet
</footer>
</html>

css:

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
html
{
background:#f4f6f7;
font-family: "times new roman",Arial, Verdana,serif;
}
.entete {
	padding:40px;
	width:  auto;
	margin: 0 auto;
	text-align: center;
	background: #edeffc;
}
.contenu{
	width: 900px;
	height:400px;
	margin: 0 auto;
	padding: 120px; 
}
.form {
	margin: 0 auto;
    width: 400px;
    padding: 50px;
    border: 2px solid grey;
	letter-spacing:.1em;
	font-weight:bold;
     /*** Rounded Corners ***/
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
 
    background: #92c3e8;
 
    /*** Shadow behind the box ***/
    -moz-box-shadow:2px 3px 10px #92c3e8;
    -webkit-box-shadow:2px 3px 10px #92c3e8;
}
.h1{
	border:1px solid #42596d;
	color:#ffe;
	font-weight:normal;
	font-size: 11px;
	background: #eba328;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#42596d', endColorstr='#1a1f24'); /* for IE */
	background-image: -moz-radial-gradient(center,0px,center,500px,from(#42596d),to(#1a1f24));
	background-image: -webkit-gradient(radial,center top,0,center top,500,from(#42596d),to(#1a1f24)); 
	-webkit-transition: border .6s ease-in;
    -moz-transition: border .6s ease-in;
    -o-transition: all .6s ease-in;
    transition: all .6s ease-in;
	text-align: center;
	margin: -20px 10px 40px 10px;
	-webkit-border-radius:7px;
	-moz-border-radius:7px;
	border-radius:7px; 
}
 
.label {
	float: left;
	margin-top: 15px;
}
.input   {
	float: right;
	width: 230px;
    background:#fff8cd;
    padding: 6px;
    margin-bottom: 15px;
    border: 0px 0px 0px 0px; 
 
    /*** Adding a small shadow ***/
    -moz-box-shadow: 0px 0px 2px #000;
    -webkit-box-shadow: 0px 0px 2px #000;
}
.buttons {
	margin-top: 08px;
	margin-left: 160px;
	cursor:pointer;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
 }
.buttons:hover {
     color: black;
	 cursor:pointer;
}
.pied {
	padding:5px;
	background: #d9d3d3;
	margin: 0 auto;
	clear:both;
}

il reste quelques ajustement des input ,toute proposition est la bienvenue.

NoSmoking · 30/01/2012, 21h49

Bonsoir,
au passage
- il me semble que des balises P seraient suffisantes...
- le FOR des LABEL se réfère à une ID et non à un NAME donc

Code html :

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

1
2
<label for="pass">Mot de passe:</label>
<input  id="pass" type="password" name="pass"  />

redoran · 31/01/2012, 11h11

Salam ; merci Nosmoking mais je crois que les div sa fait plus standard non !!! Bon selon la littérature.
actuellement je suis arrivé a cette solution :
css :

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
html
{
background:#f4f6f7;
font-family: "times new roman",Arial, Helvetica,Verdana,serif;
}
.entete {
	padding:40px;
	width:  auto;
	margin: auto;
	text-align: center;
	background: #edeffc;
}
.contenu{
	width: 900px;
	height:400px;
	margin: 0 auto;
	padding: 120px; 
}
.form {
	margin: 0 auto;
    width: 400px;
    padding: 30px;
    border: 2px solid grey;
	letter-spacing:.1em;
	font-weight:bold;
     /*** Rounded Corners ***/
   	-moz-border-radius: 5px 20px 5px 20px;
    -webkit-border-radius: 5px 20px 5px 20px;
	-o-border-radius: 5px 20px 5px 20px;
	-ms-border-radius: 5px 20px 5px 20px;
	border-radius: 5px 20px 5px 20px;
    background: #92c3e8;
 
    /*** Shadow behind the box ***/
    -moz-box-shadow:2px 3px 10px #92c3e8;
    -webkit-box-shadow:2px 3px 10px #92c3e8;
	-o-box-shadow:2px 3px 10px #92c3e8;
}
.h1{
	border:1px solid #42596d;
	color:#ffe;
	font-weight:normal;
	font-size: 11px;
	background: #eba328;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#42596d', endColorstr='#1a1f24'); /* for IE */
	background-image: -moz-radial-gradient(center,0px,center,500px,from(#42596d),to(#1a1f24));
	background-image: -webkit-gradient(radial,center top,0,center top,500,from(#42596d),to(#1a1f24)); 
	-webkit-transition: border .6s ease-in;
    -moz-transition: border .6s ease-in;
    -o-transition: all .6s ease-in;
    transition: all .6s ease-in;
	text-align: center;
	margin: -20px 10px 30px 10px;
	-moz-border-radius: 5px 20px 5px 20px;
    -webkit-border-radius: 5px 20px 5px 20px;
	-o-border-radius: 5px 20px 5px 20px;
	-ms-border-radius: 5px 20px 5px 20px;
	border-radius: 5px 20px 5px 20px;
}
 
.labelident {
	font-weight: bold;
	font-size: 14px;
	float: left;
	padding: 08px 8px;
	/* margin: 10px 0px 0px 0px; */
 
}
.labelpass {
	font-weight: bold;
	font-size: 14px;
	float: left;
	padding: 15px 8px;
 
}
.ident ,.pass{
	float: right;
	width: 230px;
	padding: 6px;
	margin-bottom: 10px;
	border: 0px; 
}
 
.buttons{
	margin-top: 15px;
	margin-left: 160px;
}
.buttons:hover {
     color: black;
	 cursor:pointer;
}
.pied {
	padding:5px;
	background: #d9d3d3;
	width:  auto;
	margin: auto;
 
}

HTML:

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
<!DOCTYPE html>
<HTML>
<head>
	<!--Pour forcer le navigateur à afficher en mode IE9, sans quoi il peut passer en mode quirks.-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
	<meta charset="utf-8" />
	<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <!-- application dynamique  -->
	<link rel="shortcut icon" href="image/favs3g.ico" />
	<link rel="stylesheet" media="screen" type="text/css" href="style_div.css">
	<title> Identification</title>
</head>
<body>
	<div class="entete">
 
	</div>
	<div class="contenu"> 
		<form class="form">
			<div class="h1">
				<h1> S-3-G: Identification</h1>
			</div>
			<div class="labelident">
				<label for="ident">Identifiant:</label> 
			</div>
			<div class="ident">
				<input type="text" name="ident" value="" size="28" maxlength="23" id="ident"/>
			</div>
			<div class="labelpass">
				<label for="pass">Mot de passe:</label> 
			</div>
			<div class="pass">
				<input type="password" name="pass" value="" size="28" maxlength="23" id="pass"/>
			</div>
 
			<div class="buttons">
				<button type="submit" name="sident" value="" onClick="verif()onClick="verif()">S'identifier</button>
			</div>
		</form>
	</div> 
 
</body>
<footer class="pied">
	Copyright © s3g - Conception kacinet
</footer>
</html>

j'espére que c'est le bon résultat mais toute proposition est la bienvenue

Bovino · 31/01/2012, 14h05

Citation:

les div sa fait plus standard non

Non, pas nécessairement.
Le HTML est un langage sémantique, c'est-à-dire que les balises sont supposées avoir un sens en fonction de leur contenu.
Si le sens sémantique du contenu ne correspond à aucune balise connue (et oui, des fois, il y a des balises qu'on ne connait pas ou qu'on a oubliées

), alors on peut se tourner vers les balises génériques (div et span), mais sinon, il est préférable d'utiliser des balises qui correspondent à leur contenu.

redoran · 31/01/2012, 14h31

Re ; merci bovino c'est bien dit mais

Citation:

il est préférable d'utiliser des balises qui correspondent à leur contenu.

donc est ce que mettre les labels et les inputs ( objet formulaire ) entre balises qui est destinée pour les paragraphes ?
je crois que les div sont mieux adapté non !!!!

NoSmoking · 31/01/2012, 20h42

Citation:

Envoyé par redoran

...mais
donc est ce que mettre les labels et les inputs ( objet formulaire ) entre balises qui est destinée pour les paragraphes ?

paragraphes est à prendre au sens large, on pourrait même utiliser une liste UL/LI par exemple ou encore RIEN

Code html :

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

1
2
3
<label for="ident">Identifiant:</label><input type="text" name="ident"><br>
<label for="pass">Mot de passe:</label><input type="password" name="pass"><br>
<button type="submit">S'identifier</button>

et avec le CSS qui va bien...

Bovino · 31/01/2012, 20h50

Citation:

ou encore RIEN

Euh... non, pas d'accord... des éléments de type inline doivent se trouver dans des éléments de type block.

Citation:

donc est ce que mettre les labels et les inputs ( objet formulaire ) entre balises qui est destinée pour les paragraphes ?
je crois que les div sont mieux adapté non !!!!

Je dirais que ça dépend de toi !

A toi de voir à quoi doivent (ou ne doivent pas) correspondre tes champs.

Sinon, tu as aussi les <fieldset> qui sont assez utiles.

NoSmoking · 31/01/2012, 22h30

Citation:

Envoyé par Bovino

Euh... non, pas d'accord... des éléments de type inline doivent se trouver dans des éléments de type block.

en HTML5 c'est tout à fait permis !

exemple valide :

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
<!DOCTYPE html>
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
form{
  width:350px;
  padding:20px;
  border:1px solid #e0e0e0;
  text-align : center;
}
label{
  display : inline-block;
  width : 130px;
  text-align : right;
}
.input_text{
  width : 150px;
}
</style>
</head>
<body>
<form action="action.php">
  <label for="ident">Identifiant :</label>
  <input type="text" name="ident" id="ident" class="input_text"><br>
  <label for="pass">Mot de passe :</label>
  <input type="password" name="pass" id="pass" class="input_text"><br><br>
  <button type="submit">S'identifier</button>
</form>
</body>
</html>

redoran · 01/02/2012, 08h13

Salam ; merci a vous deux pour cet éclaircissement.

voila un autre problème que j'ai avec mon formulaire , quand je clique sur la case niveau inférieur de la bare du titre de Firefox la fenêtre se rétrécie et le rendu de mon formulaire ( class contenu) se décale de 03 cm un peut prés a droite par rapport au footer est l’entête.
comment remédier a ce problème. merci

redoran · 01/02/2012, 14h07

Re ; j'ai réussi a enlevé ce dépassement par margin left et right:
css:

Code :

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

1
2
3
4
5
6
7
8
 
.contenu{
	width: 900px;
	height:400px;
	margin-left: auto;
	margin-right: auto;
	padding: 120px; 
}

mais le problème qui reste c'est que le formulaire reste a droite quand je miimise le navigateur firefox !!!!!

NoSmoking · 01/02/2012, 18h25

Citation:

mais le problème qui reste c'est que le formulaire reste a droite quand je miimise le navigateur firefox !!!!!

avec un tel CSS

Code :

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

1
2
3
4
5
6
.contenu{
	width: 900px;
	height:400px;
	margin: 0 auto;
	padding: 120px; 
}

il n'est rien de surprenant, le conteneur de ta forme fait au bas mot 2*120 + 900 = 1140px, comment veux tu qu'il suive le rétrécissement de ta fenêtre.

Au passage il est de bon ton de mettre le code HTML entre les balises <BODY> et </BODY>

redoran · 02/02/2012, 07h49

Salam ; merci Nosmoking pour votre attention ,

Citation:

il n'est rien de surprenant, le conteneur de ta forme fait au bas mot 2*120 + 900 = 1140px, comment veux tu qu'il suive le rétrécissement de ta fenêtre.

Au passage il est de bon ton de mettre le code HTML entre les balises <BODY> et </BODY>

est que vous pouvez donné plus de détaille par rapport a la formule de calcule et l’intérêt de mettre le html entre les balises <body> !!!!
merci.

jreaux62 · 02/02/2012, 12h27

Bonjour,
pourquoi se casser la tête ?
Tout est là : Personnalisation d'un formulaire XHTML avec CSS

Citation:

Envoyé par redoran

l’intérêt de mettre le html entre les balises <body>

Cette balise est faite pour ça !

redoran · 02/02/2012, 12h55

Re ; merci jreaux62 j'ai vu cette section , le tuto utilise les balises par contre j'utilise les balises <div> pour chaque élément du formulaire.
je ne c'est pas si je suis dans la bonnes voies !!!!
mon formulaire est centré mais une fois je minimise l'affichage de firefox j'ai le formulaire qui ne suit pas l'affichage.

NoSmoking · 02/02/2012, 20h37

Citation:

Envoyé par redoran

mon formulaire est centré mais une fois je minimise l'affichage de firefox j'ai le formulaire qui ne suit pas l'affichage.

à lire pour comprendre la méthode de calcul, Box model, et à quoi correspondent margin, padding et les autres.

redoran · 06/02/2012, 12h42

Re ; après relecture de mon source HTML , j'ai constaté qu'il y'avais autemp de div que d'objet HTML du formulaire ; alors j'ai remplacé les div par c'est plus pratique sauf autre avis.

code html

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
 
........
<title> Identification</title>
</head>
<body>
	<div class="entete">
			<div class="date">
				        <?php
						$jour = array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
						$mois = array("","Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");
						$dateDuJour = $jour[date("w")]." ".date("d")." ".$mois[date("n")]." ".date("Y");
						echo "Nous sommes le ". $dateDuJour;
						?>
 
			</div>
			<div class="h1">
				<h1> S-3-G: Identification </h1>
		</div>
	</div>
		<div class="contenu"> 
		<form class="form">
 
			<p class="labelident"><label for="ident">Identifiant:</label> 
					<input required="required" type="text" placeholder="Identifiant" name="ident" value="" size="28" maxlength="23" id="ident" autofocus/>
			</p>
			<p class="labelpass"><label for="pass">Mot de passe:</label> 
					<input type="password" placeholder="*********" name="pass" value="" size="28" maxlength="23" id="pass"/>
			</p>
 
			<p class="buttons">
				<button type="submit" name="sident" value="" onClick="verif()">Connexion</button>
			</p>
 
		</form>
	</div> 
<footer class="pied">
	<p> Copyright © s3g - Conception kacinet <p>
</footer>
 
</body>
......

merci

02/02/2012, 12h55	#17
redoran Membre expérimenté Developpeur- Amateur Inscription : juin 2010 Messages : 989 Détails du profil Informations personnelles : Sexe : Âge : 40 Localisation : Algérie Informations professionnelles : Activité : Developpeur- Amateur Secteur : Santé Informations forums : Inscription : juin 2010 Messages : 989 Points : 581 Points : 581	Re ; merci jreaux62 j'ai vu cette section , le tuto utilise les balises <p> par contre j'utilise les balises <div> pour chaque élément du formulaire. je ne c'est pas si je suis dans la bonnes voies !!!! mon formulaire est centré mais une fois je minimise l'affichage de firefox j'ai le formulaire qui ne suit pas l'affichage.
	00

30/01/2012, 08h11	#3
redoran Membre expérimenté Developpeur- Amateur Inscription : juin 2010 Messages : 989 Détails du profil Informations personnelles : Sexe : Âge : 40 Localisation : Algérie Informations professionnelles : Activité : Developpeur- Amateur Secteur : Santé Informations forums : Inscription : juin 2010 Messages : 989 Points : 581 Points : 581	Salam ; merci rotrevrep mais je crois que la mise en forme avec les div et css est indiquée dans le cadre de l'accessibilité, il me semble aussi que le CSS permet de réglé ce problème mais j'arrive pas a tombé sur la bonne pâte.
	00

01/02/2012, 08h13	#12
redoran Membre expérimenté Developpeur- Amateur Inscription : juin 2010 Messages : 989 Détails du profil Informations personnelles : Sexe : Âge : 40 Localisation : Algérie Informations professionnelles : Activité : Developpeur- Amateur Secteur : Santé Informations forums : Inscription : juin 2010 Messages : 989 Points : 581 Points : 581	Salam ; merci a vous deux pour cet éclaircissement. voila un autre problème que j'ai avec mon formulaire , quand je clique sur la case niveau inférieur de la bare du titre de Firefox la fenêtre se rétrécie et le rendu de mon formulaire ( class contenu) se décale de 03 cm un peut prés a droite par rapport au footer est l’entête. comment remédier a ce problème. merci
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email