Discussion: Aligner des radio box

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Lycéen
    Inscrit en
    novembre 2017
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 16
    Localisation : France, Vosges (Lorraine)

    Informations professionnelles :
    Activité : Lycéen
    Secteur : Finance

    Informations forums :
    Inscription : novembre 2017
    Messages : 1
    Points : 1
    Points
    1

    Par défaut Aligner des radio box

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

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 953
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 953
    Points : 25 544
    Points
    25 544

    Par défaut

    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.

Discussions similaires

  1. [Toutes versions] Comment aligner des groupes de boutons radio sur des cellules
    Par flexx dans le forum Macros et VBA Excel
    Réponses: 5
    Dernier message: 03/04/2012, 15h35
  2. Alignement des boutons Radio
    Par safadkhi dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 27/08/2009, 16h07
  3. [Tableaux] Alignement des champs d'un formulaire
    Par jack554 dans le forum Fonctions
    Réponses: 7
    Dernier message: 15/09/2005, 16h30
  4. Comment aligner des éléments d'un TEdit à droite ?
    Par bertrand_declerck dans le forum Composants VCL
    Réponses: 18
    Dernier message: 15/06/2005, 18h46
  5. Réponses: 3
    Dernier message: 26/01/2005, 16h21

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo