Aligner des radio box

**DarK_K_One** · 03/11/2017, 13h18

Bonjour, bonjour !

Cela fait deux jours que je bosse des heures et des heures sur la confection de mon site web dans le cadre d'un TPE sur les jeux-vidéo ! Je ne suis qu'au début de sa création, et j'ai décidé de soumettre un formulaire à mes lecteurs afin d'obtenir des chiffres par rapport à leur âge, et leur conception des jeux-vidéo. Cependant, il se trouve que mes radio box ne sont pas alignées : elles sont décalées de un ou deux pixel les unes des autres... Et moi qui suis un peu maniaque sur les bords, ça me gonfle un peu... ^^ Je sais en plus que je ne serai pas le dernier à le remarquer !
Je bosse sous Dreamweaver, surtout pour sa fonction "split", qui me permet de voir en temps réel ce que je code, mais aussi pour toutes ses fonctionnalités qui me simplifient amplement la vie ! Ci-joint mon code CSS et HTML, ainsi qu'un image de ma page web pour illustrer mon problème ! Merci de votre attention.

Nom : iamvoldemort.png
Affichages : 250
Taille : 72,6 Ko

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
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
html
{
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"
}
 
h1 {
	position : top; 
	text-align:center;
	margin:0px;
	color:red; 
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-weight: 100px;
	font-size: 30px; 
	margin-top:0px; 
 
 
 
}
 /*Tablet View*/
@media (max-width:768px)  {
	h1 {
		color:#FF0308; 
 
	}	
 
}
 
/*Mobile View*/
 
@media only screen and (max-width:400px) {
	h1 {
		color:#00FF2C; 
 
	}	
}
 
#banniere
{
 
    display:block;
    margin:auto;
    height: 50px;
	width: 1000px;
	vertical-align: center;
 
 
}
 
header {
 
	display:block;
	background-position: center;
	margin:auto;
	line-height: 60px;
}
 
#ligne {
 
	border : outset;
	color:none;
 
}
p   {
    text-align:center;
 
 
 
}
 
h2 {
	font-size: 20px;
	text-align:center;
}
 
 
 
legend {
	text-align:center;
}
 
input {
 margin:0;
 vertical-align:middle;
}

HTML :

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Vous et les Jeux-Vidéo</title>
</head>
<header>
 
<img src="Images site/bannière.png" width="100" height="" alt="banniere" id="banniere">
 
<hr id="ligne">
 
</header>
<body>
<h1>Vous et les Jeux-vidéo</h1>
<form method="post" action="traitement.php">
 <fieldset>
 <legend>Quel âge avez-vous ?</legend>
 
 
	<p>
 
    <br><input type="radio" name="age" value="Entre 10 et 13 ans" id="Entre 10 et 13 ans"/> <label for="Entre 10 et 13 ans">&nbsp;Entre 10 et 13 ans</label>
    <br><input type="radio" name="age" value="Entre 13 et 16 ans" id="Entre 13 et 16 ans"/> <label for="Entre 13 et 16 ans">Entre 13 et 16 ans</label>
	<br><input type="radio" name="age" value="Entre 16 et 25 ans" id="Entre 16 et 25 ans"/> <label for="Entre 16 et 23 ans">&nbsp;Entre 16 et 25 ans</label>
    <br><input type="radio" name="age" value="Entre 25 et 35 ans" id="Entre 25 et 35 ans"/> <label for="Entre 25 et 35 ans">Entre 25 et 35 ans</label>
 
 
	</p>
	</fieldset>
</form>
</body>
</html>

**NoSmoking** · 03/11/2017, 19h04

Bonjour,
pour commencer je changerais la structure de ton formulaire, comme suit par exemple

Code html :

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

1
2
3
4
5
6
7
8
9
<form method="POST" action="traitement.php">
  <fieldset>
    <legend>Quel âge avez-vous ?</legend>
    <p><input type="radio" name="age" value="Entre 10 et 13 ans" id="Entre 10 et 13 ans"><label for="Entre 10 et 13 ans">Entre 10 et 13 ans</label></p>
    <p><input type="radio" name="age" value="Entre 13 et 16 ans" id="Entre 13 et 16 ans"><label for="Entre 13 et 16 ans">Entre 13 et 16 ans</label></p>
    <p><input type="radio" name="age" value="Entre 16 et 25 ans" id="Entre 16 et 25 ans"><label for="Entre 16 et 25 ans">Entre 16 et 25 ans</label></p>
    <p><input type="radio" name="age" value="Entre 25 et 35 ans" id="Entre 25 et 35 ans"><label for="Entre 25 et 35 ans">Entre 25 et 35 ans</label></p>
  </fieldset>
</form>

je te laisse maitre des identifiant

Ensuite j'appliquerais le style suivant sur les <label> :

Code :

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

1
2
3
4
label {
  display: inline-block; /* pour autoriser le dimensionnement */
  width: 10em;           /* à ajuster éventuellement */
}

et cela devrait le faire.

Aligner des radio box

Positionnement en CSS

Discussions similaires

Partager

Partager