Alignement de la Checkbox

**Colaps** · 16/09/2013, 20h55

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.

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

Code :

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

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

Voici le code

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
<!--*** 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

Merci

**Muchos** · 17/09/2013, 01h25

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

**Colaps** · 17/09/2013, 09h02

Voici le CSS :

Code CSS :

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

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

Voilà un petit screen du rendu

Merci

Invité · 17/09/2013, 09h40

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

Code css :

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

Invité · 17/09/2013, 09h45

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

Code css :

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

**rodolphebrd** · 17/09/2013, 10h00

Bonjour,

avec table-cell on économise des lignes de 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
#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

Alignement de la Checkbox [CSS 3]

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager