Alignement de la Checkbox

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

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, 02h25

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

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

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, 10h40

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, 10h45

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, 11h00

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

**Colaps** · 17/09/2013, 13h31

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

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

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.

Peut-être avez vous encore une petite solution?

Merci encore

Invité · 17/09/2013, 13h34

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

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

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

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

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.

**rodolphebrd** · 17/09/2013, 13h37

Peu-être en plaçant :

Code :

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

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

**Colaps** · 17/09/2013, 15h21

Super ça marche à merveille.

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

Alignement de la Checkbox [CSS 3]

Positionnement en CSS

Discussions similaires

Partager

Partager