position et affiche élément formulaire en css

**argon** · 02/07/2006, 09h40

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 :

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

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
 
#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

**JackBeauregard** · 02/07/2006, 10h44

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.

**argon** · 03/07/2006, 09h43

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 :

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
 
<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.

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

**JackBeauregard** · 03/07/2006, 13h02

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.

**ilood** · 03/07/2006, 13h27

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 :

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
 
...
<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.

**<romain/>** · 03/07/2006, 14h01

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 :

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

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 :

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

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

position et affiche élément formulaire en css

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager