Alignement de la Checkbox

Version imprimable

Bonjour à toutes et à tous,

J'ai crée à titre d'entrainement car je débute, un formulaire de base et il se trouve que je bloque sur le positionnement de la checkbox.:calim2:

J'aimerai que ma checkbox ressemble un peu à ceci :

Code:

1
2
3
4
5
6
Sélectionner votre........ 
                                            label1  [ ]            label6  [ ]
                                            label2  [ ]            label7  [ ]
                                            label3  [ ]            label8  [ ]
                                            label4  [ ]            label9  [ ]
                                            label5  [ ]

Voici le code

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
<!--*** CHECKBOX ***-->
		 <div id="container_checkbox"> 
		  <label class="checkbox_label">Sélectionner votre ou vos planètes favorites</label>
		    <p class="field_left">
			<label for="mercure" class="checkbox_left">Mercure</label>
			  <input type="checkbox" name="case[]" id="mercure" value="mercure" class="checkbox_left"/><br/>
			<label for="venus" class="checkbox_left">Venus</label>
			  <input type="checkbox" name="case[]" id="venus" value="venus" class="checkbox_left"/><br/>
			<label for="terre" class="checkbox_left">Terre</label>
			  <input type="checkbox" name="case[]" id="terre" value="terre" class="checkbox_left"/><br/>
			<label for="mars" class="checkbox_left">Mars</label>
			  <input type="checkbox" name="case[]" id="mars" value="mars" class="checkbox_left"/><br/>
			<label for="jupiter" class="checkbox_left">Jupiter</label>
			  <input type="checkbox" name="case[]" id="jupiter" value="jupiter" class="checkbox_left"/><br/>
		    </p>
		    <p class="field_right">	
			<label for="saturne" class="checkbox_right">Saturne</label>
			  <input type="checkbox" name="case[]" id="saturne" value="saturne"class="checkbox_right"/><br/>
			<label for="uranus" class="checkbox_right">Uranus</label>
			  <input type="checkbox" name="case[]" id="uranus" value="uranus"class="checkbox_right"/><br/>
			<label for="neptune" class="checkbox_right">Neptune</label>
			  <input type="checkbox" name="case[]" id="neptune" value="neptune" class="checkbox_right"/><br/>
			<label for="autre" class="checkbox_right">Autre</label>
			  <input type="checkbox" name="case[]" id="autre" value="autre" class="checkbox_right"/><br/>
		    </p>
		 </div>

J'ose vous montrer le code CSS de peur de devoir aller me cacher en courant :oops:

Merci :)

17/09/2013, 01h25
Muchos

Bonjour,
Il nous faut quand même le code CSS. On ne vous jugera pas ;)

Voici le CSS : :koi:
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 #container_checkbox { position:relative; margin-left:500px; width:500px; height:120px; } .checkbox_label { display:inline-block; position:absolute; text-align: left; clear:both; float:none; margin-right: 150px; overflow: visible; } /* CHECKBOX GAUCHE */ p.field_left label { clear: left; display: block; float: left; text-align:right; width: 100px; } p.field_left input { clear: right; float: left; margin-left: 10px; width: 10px; } /* CHECKBOX DROITE */ p.field_right { float: right; margin-left:120px; height:90px; position:relative; left:-30px; bottom:260px; margin-top:150px; margin-right:80px; } p.field_right label { display:block; width: 80px; text-align: right; padding-left:40px; } p.field_right input { clear: right; float: left; margin-left: 10px; width: 10px; }
Je pense avoir fait un peut tout et n'importe quoi dans le code css mais cela me donne à peut prêt ce que je souhaitais avoir comme rendu.8O

Peut être y aurait il une solution plus simple ou dois je tout refaire avec un code plus clair et mieux adapté ?? :roll:

Voilà un petit screen du rendu :moinsser:

http://img15.hostingpics.net/thumbs/...0917085407.png

Merci

Bonjour,
on peut simplifier tout ça.
On va en profiter pour "nettoyer" le code : http://codepen.io/jreaux62/pen/EzDey

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#container_checkbox {
	margin:0 auto; /* centrage horizontal */
	width:500px;
}
.checkbox_titre {
	font-weight:normal;
}
.checkbox_box {
	float: left;
	width:50%; /* 2 colonnes */
}
.checkbox_box p {
	clear:both;
}
.checkbox_box p label {
	float: left;
	text-align:right;
	width: 100px;
}
.checkbox_box p input {
	float: left;
	margin-left: 10px;
}

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
<!--*** CHECKBOX ***-->
<div id="container_checkbox"> 
	<div class="checkbox_titre">
		Sélectionner votre ou vos planètes favorites :
	</div>
	<div class="checkbox_box">
		<p>
			<label for="idmercure">Mercure</label>
			<input id="idmercure" type="checkbox" name="case[]" value="mercure"/>
		</p>
		<p>
			<label for="idvenus">Venus</label>
			<input id="idvenus" type="checkbox" name="case[]" value="venus"/>
		</p>
		<p>
			<label for="idterre">Terre</label>
			<input id="idterre" type="checkbox" name="case[]" value="terre"/>
		</p>
		<p>
			<label for="idmars">Mars</label>
			<input id="idmars" type="checkbox" name="case[]" value="mars"/>
		</p>
		<p>
			<label for="idjupiter">Jupiter</label>
			<input id="idjupiter" type="checkbox" name="case[]" value="jupiter"/>
		</p>
	</div>
	<div class="checkbox_box">	
		<p>
			<label for="idsaturne">Saturne</label>
			<input id="idsaturne" type="checkbox" name="case[]" value="saturne"/>
		</p>
		<p>
			<label for="iduranus">Uranus</label>
			<input id="iduranus" type="checkbox" name="case[]" value="uranus"/>
		</p>
		<p>
			<label for="idneptune">Neptune</label>
			<input id="idneptune" type="checkbox" name="case[]" value="neptune"/>
		</p>
		<p>
			<label for="idautre">Autre</label>
			<input id="idautre" type="checkbox" name="case[]" value="autre"/>
		</p>
	</div>
</div>

Et pour les répartir sur 3 colonnes : http://codepen.io/jreaux62/pen/yEFwC

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#container_checkbox {
	margin:0 auto; /* centrage horizontal */
	width:500px;
}
.checkbox_titre {
	font-weight:normal;
}
.checkbox_box {
	float: left;
	width:33%; /* 3 colonnes */
}
.checkbox_box p {
	clear:both;
}
.checkbox_box p label {
	float: left;
	text-align:right;
	width: 100px;
}
.checkbox_box p input {
	float: left;
	margin-left: 10px;
}

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
<!--*** CHECKBOX ***-->
<div id="container_checkbox"> 
	<div class="checkbox_titre">
		Sélectionner votre ou vos planètes favorites :
	</div>
	<div class="checkbox_box">
		<p>
			<label for="idmercure">Mercure</label>
			<input id="idmercure" type="checkbox" name="case[]" value="mercure"/>
		</p>
		<p>
			<label for="idvenus">Venus</label>
			<input id="idvenus" type="checkbox" name="case[]" value="venus"/>
		</p>
		<p>
			<label for="idterre">Terre</label>
			<input id="idterre" type="checkbox" name="case[]" value="terre"/>
		</p>
	</div>
	<div class="checkbox_box">
		<p>
			<label for="idmars">Mars</label>
			<input id="idmars" type="checkbox" name="case[]" value="mars"/>
		</p>
		<p>
			<label for="idjupiter">Jupiter</label>
			<input id="idjupiter" type="checkbox" name="case[]" value="jupiter"/>
		</p>
		<p>
			<label for="idsaturne">Saturne</label>
			<input id="idsaturne" type="checkbox" name="case[]" value="saturne"/>
		</p>
	</div>
	<div class="checkbox_box">	
		<p>
			<label for="iduranus">Uranus</label>
			<input id="iduranus" type="checkbox" name="case[]" value="uranus"/>
		</p>
		<p>
			<label for="idneptune">Neptune</label>
			<input id="idneptune" type="checkbox" name="case[]" value="neptune"/>
		</p>
		<p>
			<label for="idautre">Autre</label>
			<input id="idautre" type="checkbox" name="case[]" value="autre"/>
		</p>
	</div>
</div>

Bonjour,

avec table-cell on économise des lignes de code ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#container_checkbox {
	margin:0 auto; /* centrage horizontal */
	width:500px;
        display:table;
 
}
.checkbox_box p {
       display:table-cell;
       width:120px; 
       text-align:right;
}
.checkbox_box p input {
	margin-left: 10px;  
}

http://codepen.io/anon/pen/piHFA

17/09/2013, 12h31
Colaps

Merci à vous jreaux62 et rodolphebrd de m'avoir éclairé.:zoubi:

Les colonnes se placent parfaitement, exactement ce que je voulais.:ccool:

Par contre le titre de la classe .checkbox_titre ne ce positionne pas à gauche mais reste dans le flux du bloc #container_checkbox, même après lui avoir mis une position:absolute; et un float:left ou un margin-right il reste dans le bloc.:calim2:

Peut-être avez vous encore une petite solution?8O

Merci encore
17/09/2013, 12h34
Invité
~~A toi de nous dire où il est supposé se positionner.~~
[EDIT] Vu ton image, en effet, il aurait été bien de nous donner le contexte : il faut voir l'ensemble de ton code.

Il est en effet possible de le sortir du <div>, et de lui mettre un <label>.
Code:

1 2 3 4 5 <label class="checkbox_titre"> Sélectionner votre ou vos planètes favorites : </label> <div id="container_checkbox"> ...
Et modifier le CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 .checkbox_titre { font-weight:normal; width:500px; float:left; } #container_checkbox { width:500px; float:left;} .checkbox_box { float: left; width:50%; /* 2 colonnes */ } ...
N.B. position:absolute; est à utiliser en dernier recours.
17/09/2013, 12h37
rodolphebrd
Peu-être en plaçant :
Code:

1 2 3 <div class="checkbox_titre"> Sélectionner votre ou vos planètes favorites : </div>
En dehors :#container_checkbox

Si j'ai bien compris :?
17/09/2013, 14h21
Colaps

Super ça marche à merveille.:ccool:

Je vous remercie d'avoir pris du temps pour m'aider :zoubi: