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