position et affiche élément formulaire en css

Version imprimable

Bonjour tout le monde

Je voudrais a mettre sur deux colonnes des checkbox.

Exemple des position que je souhaite:

Check1 ....................................................... Check2
Check3....................................................... .Check4
Check5 ....................................................... Check6

Voici le code de page.

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
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
 
<?php
 
$connect= mysql_connect("localhost","root","");
 
 
$lien=mysql_select_db("projetbd", $connect);
 
if($lien==false)
{
 
echo mysql_error();
 
 
exit();
 
}
 
 
 
echo '<html>
 
<link rel="stylesheet" type="text/css" href="position.css">
 
<title>Fiche liaison de base de données de tintin</title>
 
 
<body>
 
<head>
 
<p>
<img src="lelogosdennoir5zqcopie6dw.gif" align="right">
<h2>Fiche liaison</h2>
</p>
 
<p>
<h2>Service instructeur</h2>
<br>
 
<font face color="black" size="4">Personne contacté:</font>
<br>
<form><font color="black" size="4">mm: <input type="checkbox"></font></form>
<form><font color="black" size="4">titi: <input type="checkbox"></font></form>
<font face color="black" size="4">Téléphonne:  03,00,00,00,00</font>
<form>
</p>
 
<hr>
<br>
 
 
<div id="element1">Identité:</div>
 
 
<div id="element2">Période(s) de fréquentation du CPAI:</div>
 
 
<br>
<br>
 
 
<font color="black" size="3">Identifiant:</font> 
<br>
<font color="black" size="3">Nom:</font> 
<div id="element3">Sortie sur:</div>
 
 
<br>
 
<font color="black" size="3">Prénom :</font> 
<br>
<font color="black" size="3">Adresse:</font> 
<br>
<font color="black" size="3">code postal:</font> 
<br>
 
<font color="black" size="3">Ville:</font> 
<br>
 
<font color="black" size="3">N° CAF:</font>  <font color="black" size="3">N° ANPE:</font>
<br>
<br>
 
<div id="element4">Téléphone:</div>
 
<div id="element5">Information service sociaux:</div>
 
 
<br><br>
<font color="black" size="3">Fixe:</font> <font color="black" size="3">Portable:</font> 
<div id="element6">Personne à contacter</div>
<br>
<br>
<br>
<div id="element7">Activité(s):</div> 
<div id="element8">Axe(s) à travailler:</div> 
 
 
 
<br>
<br>
<font color="black" size="3">Assiduité(e):</font> 
<br>
<br>
<div id="element9">Objectifs de travail:</div> 
<br><br>
<input type="checkbox" name="communication">
<font>communication</font>
<br>
<input type="checkbox" name="confiance">
<font>confiance en soi</font>
<br>
<input type="checkbox" name="compentatitude">
<font>Comportement/attitude</font>
<br>
<input type="checkbox" name="autonomie">
<font>autonomie</font>
<br>
<input type="checkbox" name="discipline">
<font>Discipline personelle</font>
 
 
 
 
 
 
 
</form>
 
 
 
<br>
<hr>
<br>
<font face color="black" size="4">Fait à Amiens le:</font>
<SCRIPT LANGUAGE="JavaScript">
Today = new Date;
Jour = Today.getDate();
Mois = (Today.getMonth())+1;
Annee = Today.getFullYear(); 
document.write(Jour + "/" + Mois + "/" + Annee);
</SCRIPT>
</html>
 
 
 
</body>
</head>
 
</html>';
 
 
 
?>

Code CSS

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
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
 
#element1
{
float:left;
background:#00CCFF;
font-weight:bold;
font-size : 110%;
 
}
 
#element2
{
float:right;
background:#00CCFF;
font-weight:bold;
font-size : 110%;
}
#element3
{
float:right;
background;
 
 
}
#element4
{
float:left;
background:#00CCFF;
font-weight:bold;
font-size : 110%;
}
#element5
{
float:right;
background:#00CCFF;
font-weight:bold;
font-size : 110%;
 
}
#element6
{
float:right;
background;
 
}
#element7
{
float:left;
background:#00CCFF;
font-weight:bold;
font-size : 110%;
}
#element8
{
float:right;
background:#00CCFF;
font-weight:bold;
font-size : 110%;
}
#element9
{
float:left;
background:#00CCFF;
font-weight:bold;
font-size : 110%;
}
#element10
{
float:righ;
background:
}

Avez vous compris ce que je souhaite faire?

Merci

Cordialement

A bientôt

02/07/2006, 10h44
JackBeauregard

Le mieux c'est tout simplement de faire un <table> avec 3<tr> de deux <td> chacun. Faut pas faire dans le css chronique non plus.

Bonjour tout le monde

Voici ce que j'ai fait, mon probleme est que je n'arrive pas à éloigner, les deux colonnes.

J'ignore même si c'est possible de le faire.

Voici le code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <table> <tr><td><input type="checkbox" name="communication">communication</td><td></td><td><input type="checkbox" name="Sante">Santé</td></tr> <tr><td><input type="checkbox" name="confiance">confiance en soi</td><td> </td><td><input type="checkbox" name="isertpro">Insertion professionnelle</td></tr> <tr><td><input type="checkbox" name="compentatitude">Comportement/attitude</td><td> </td><td><input type="checkbox" name="Logement">Logement</td></tr> <tr><td><input type="checkbox" name="autonomie">autonomie</td><td> </td><td><input type="checkbox" name="Insertionsociale">Insertion sociale</td></tr> <tr><td><input type="checkbox" name="discipline">Discipline personnelle</td></tr> </table>
Voici ce que je souhaite.

Citation:

communication .......................................... Santé
confiance en soi.........................................Insertion professionnelle
Comportement/attitude................................Logement
autonomie..................................................Insertion sociale
Discipline personelle

Je pense qu'il faut que je face deux tables séparées.

Me le confirmez vous?

Merci

Cordialement

A bientôt

03/07/2006, 13h02
JackBeauregard

Citation:

Voici ce que j'ai fait, mon probleme est que je n'arrive pas à éloigner, les deux colonnes.

Voilà qui ne n'est pas très explicite.

Que vient faire cette case vide <td></td> entre les deux autres cases ?

Tu peux donner une taille à tes tableaux avec width height, tu peux les styliser avec les css c'est très simple.

Salut

Les tableaux c'est pas fait pour faire de la mise en page.
Essaie ceci pour voir si cela correspond à ce que tu cherches à faire :

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
 
...
<style type="text/css">
<!--
ul.axes {
	float: left;
	width: 15%;
	list-style-type: none;
}
ul.axes label {
	float: left;
	width: 11em
}
-->
</style>
</head>
 
<body>
<ul class="axes"><li><label>communication</label><input name="communication" type="checkbox" /></li>
  <li><label>confiance en soi</label><input name="confiance" type="checkbox" /></li>
  <li><label>Comportement/attitude</label><input name="comportement" type="checkbox" /></li>
  <li>autonomie</li>
<li>Discipline personelle</li></ul>
<ul class="axes">
	<li><label>Santé</label><input name="sante" type="checkbox" /></li>
    <li>Insertion professionnelle</li>
    <li>Logement</li>
    <li><label>Insertion sociale</label><input name="sante" type="checkbox" /></li>
</ul>
...

Deux listes que l'on place l'un à coté de l'autre et les label font le reste.

effectivement il faut utiliser les label, ca permet une meilleur utilisation des formulaires notamment pour ceux quine naviguent qu'avec le lavier. L'accessibilité en est renforcé.

Tu n'est pas obligé de faire des listes meme si ca devrait fonctionner.
Tu places tes labels et tes champs texte en float:left;
Ensuite tu crée 2 classes pourtes labels. L'une fera un retour a la ligne et l'autre non. Tu mes la classe de retour a la ligne une fois sur 2...

Tu auras un truc comme ca :

(x)html :
Code:

1 2 3 4 5 6 7 8 9 10 <label class="standard">label1</label><input type="text"/> <label class="retour">label2</label><input type="text"/> <label class="standard">label3</label><input type="text"/> <label class="retour">label4</label><input type="text"/> <label class="standard">label5</label><input type="text"/>
css :
Code:

1 2 3 4 5 6 7 8 9 10 .standard{ float:left; } .retour{ clear:both; float:left; } [/CO

03/07/2006, 15h29
JackBeauregard

Pour l'accessibilité des labels je veux bien mais je vois pas en quoi utiliser un tableau pour disposer 6 checkbox constitue une utilisation abusive des tableaux. Ce n'est pas de la mise en page ça, c'est de la présentation d'information.
A vous lire vous voulez exterminer les tableaux.
04/07/2006, 01h53
ilood

Ce ne sont pas des données tabulaires, donc il n'y pas de raison d'utiliser des tableaux.
Et étant donné que l'on a une liste non ordonnée des "axes à travailler" j'utilise <ul> et <li>.

Présentation d'information et mise en page j'aimerai bien qu'on m'explique la différence.
04/07/2006, 02h23
JackBeauregard

La différence réside principalement dans les points non similaires. De plus tu peux tout à fait tabulariser tes puces, cela permet de conserver l'ordre de l'axe.

Bonjour tout le monde

CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
.standard
{
float:left;
}
.retour
{
clear:both;
float:left;
}
.standard2
{
float:right;
 
}
.retour2
{
clear:both;
float:right;
}

Code html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<form>
 
<label  class="standard">communication</label><input type="checkbox" name="communication"> <label  class="standard2">Santé</label><input type="checkbox" name="Sante">
 
 
 
<br>
 
<label  class="retour">confiance en soi</label><input type="checkbox" name="confiance">    <label  class="retour2">Insertion professionnelle</label><input type="checkbox" name="isertpro">
<br>
 
<label class="standard">Comportement/attitude</label><input type="checkbox" name="compentatitude">    <label  class="standard2">Logement</label><input type="checkbox" name="Logement">
<br>
 
<label  class="retour">autonomie</label><input type="checkbox" name="autonomie">    <label  class="retour2">Insertion sociale</label><input type="checkbox" name="Insertionsociale">
<br>
<label class="standard">Discipline personelle</label><input type="checkbox" name="discipline">
</form>

Je n'arrive pas à positionner les checkbox du coté droit

Merci

Cordialement

A bientôt

04/07/2006, 10h19
ilood
Citation:

Envoyé par argon

Je n'arrive pas à positionner les checkbox du coté droit

Tu dois définir un width pour tes classes
Code:

1 2 3 4 .standard,.retour,.standard2,.retour2 { width: 12em; }
par exemple.
04/07/2006, 14h45
JackBeauregard

quel bazard quand même pour 6 checkbox dans un tableau.
04/07/2006, 23h58
ilood

Mais le jour on l'on souahite changer le design faire de la maintenance, on dira merci aux css.

Et honnetement je trouve ça beaucoup plus clair qu'un tas de table,tr,td...

Sans parler de la maintenance plus aisée et de l'evolutivité du design.

Bonjour tout le monde

J 'y suis presque arrivé, mon probleme, et que je ne sais pas à quoi sert width exactement.

Pour le moment les lablels ne sont pas en deux colonnes.

Code html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<label  class="standard"><input type="checkbox" name="communication">communication</label> <label  class="standard2"><input type="checkbox" name="Sante">Santé</label>
 
<label  class="retour"><input type="checkbox" name="confiance">confiance en soi</label>   <label  class="retour2"><input type="checkbox" name="isertpro">Insertion professionnelle</label>
 
 
<label class="standard"><input type="checkbox" name="compentatitude">Comportement/attitude</label>   <label  class="standard2"><input type="checkbox" name="Logement">Logement</label>
 
 
<label  class="retour"><input type="checkbox" name="autonomie">autonomie</label>   <label  class="retour2"><input type="checkbox" name="Insertionsociale">Insertion sociale</label>
 
<label class="standard"><input type="checkbox" name="discipline">Discipline personelle</label>

Code css, j'ignore ci-c'est juste

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
 
.standard
{
float:left;
 
}
.retour
{
clear:both;
float:left;
 
}
.standard2
{
float:right;
 
}
.retour2
{
clear:both;
float:right;
 
}
.standard,.retour,.standard2,.retour2 {
   width: 11em;
}

Merci

Cordialement

A bientôt

voilà quelque chose qui a l'air de marcher et qui semble plus simple:

L'HTML

Code:

1
2
3
4
5
 
<label ><input type="checkbox" name="communication">communication</label>
<label  class="retour"><input type="checkbox" name="Sante">Santé</label>
<label><input type="checkbox" name="confiance">confiance en soi</label>
<label  class="retour"><input type="checkbox" name="isertpro">Insertion professionnelle</label>

Le CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
 
label {
  float:left;
  clear:left;
  width: 50%;
 
}
label.retour {
  float:right;
  clear:right;
}