IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Alignement centrage bouton radio et label correspondant


Sujet :

HTML

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    retraité
    Inscrit en
    novembre 2012
    Messages
    53
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 76
    Localisation : France, Ardèche (Rhône Alpes)

    Informations professionnelles :
    Activité : retraité
    Secteur : Industrie

    Informations forums :
    Inscription : novembre 2012
    Messages : 53
    Points : 37
    Points
    37
    Par défaut Alignement centrage bouton radio et label correspondant
    Bonjour,
    Lorsque je fais un formulaire avec une liste de boutons radio, le bouton est aligné en bas du texte du label correspondant.
    Lorsque la liste est longue, c'est un peu difficile à lire, je souhaiterai remonter le bouton au centre du texte du label.

    J'ai essayé d'utiliser un vertical-align sur le style des labels style ="vertical-align:middle;" ça ne marche pas.

    Y a-t'il une solution ,
    D'avance merci.

  2. #2
    Membre averti Avatar de jreaux62
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    226
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 226
    Points : 433
    Points
    433
    Par défaut
    Bonjour,


    labels et boutons sont alignés.

    2 façons d'écrire :
    1- avec attributs id et for :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
      <input type="radio" id="dewey" name="drone" value="dewey"><label for="dewey">Dewey</label>
    2- label englobant l'input ;
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
      <label><input type="radio" name="drone" value="louie"> Louie</label>


    Merci de montrer un exemple.

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    retraité
    Inscrit en
    novembre 2012
    Messages
    53
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 76
    Localisation : France, Ardèche (Rhône Alpes)

    Informations professionnelles :
    Activité : retraité
    Secteur : Industrie

    Informations forums :
    Inscription : novembre 2012
    Messages : 53
    Points : 37
    Points
    37
    Par défaut
    Voici mon input :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type = "radio" class ="actions" style = "color:yellow;font-size: 12px;background: #955914;cursor: pointer;" name = "choix" id = "choix" value = "9" onclick="mc.submit()" /><label class = "texte" for="choix">Gérer les volontaires</label>
    J'aurai bien voulu essayer l'exemple 2 , mais je n'y arrive pas. Les labels appartiennent à une class.

  4. #4
    Membre averti Avatar de jreaux62
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    226
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 226
    Points : 433
    Points
    433
    Par défaut
    OK.
    Tel quel, c'est aligné.

    Il faudrait donner le CSS des classes utilisées : "actions" et "texte".

    Mais aussi,... pourquoi rajouter du CSS en ligne : style = "color:yellow;font-size: 12px;background: #955914;cursor: pointer;" ?
    Il suffirait de rajouter une autre classe.

    N.B. Il est inutile de mettre des espaces autours des = : type = "radio" -> type="radio".

  5. #5
    Nouveau membre du Club
    Homme Profil pro
    retraité
    Inscrit en
    novembre 2012
    Messages
    53
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 76
    Localisation : France, Ardèche (Rhône Alpes)

    Informations professionnelles :
    Activité : retraité
    Secteur : Industrie

    Informations forums :
    Inscription : novembre 2012
    Messages : 53
    Points : 37
    Points
    37
    Par défaut
    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
    <u>Tu peux</u> :<br><br>
     
    	<form name = "mc" method ="post" action = "">
    		<input type = "radio" class ="actions" name = "choix" id = "choix" value = "1" onclick="mc.submit()" /><label class = "texte" for="choix">Gérer les volontaires</label><br>
    		<input type = "radio" class ="actions" name = "choix" id = "choix" value = "2" onclick="mc.submit()" /><label class = "texte" for="choix">Gérer les volontaires</label><br>
    		<input type = "radio" class ="actions" name = "choix" id = "choix" value = "3" onclick="mc.submit()" /><label class = "texte" for="choix">Gérer les volontaires</label><br>
    		<input type = "radio" class ="actions" name = "choix" id = "choix" value = "4" onclick="mc.submit()" /><label class = "texte" for="choix">Gérer les volontaires</label><br>
    		<input type = "radio" class ="actions" name = "choix" id = "choix" value = "5" onclick="mc.submit()" /><label class = "texte" for="choix">Gérer les volontaires</label><br>
    		<br>
    		<u>Actions du club</u><br><br>
    		<input type = "radio" class ="actions" name = "choix" id = "choix" value = "7" onclick="mc.submit()" /><label class = "texte" for="choix">Gérer les volontaires</label><br>
    		<input type = "radio" class ="actions" name = "choix" id = "choix" value = "8" onclick="mc.submit()" /><label class = "texte" for="choix"> Gérer les volontaires</label><br>
    		<br>
    		<u>Divers</u><br><br>
    		<label><input type = "radio" class ="actions" name = "choix" id = "choix" value = "9" onclick="mc.submit()" /> <label class = "texte" for="choix">Gérer le trombinoscope</label><br><br>
     
    	</form>

    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
    label:hover {
      cursor: pointer;
    }
     
    .actions
    {
        left: 20px;
        color:yellow;
        font-size: 12px;
        background: #955914;
    }
     
    .texte 
    {
        left: 45px;
    }

    RESULTAT
    Nom : capture.jpg
Affichages : 43
Taille : 67,8 Ko

    Les textes (label) mériteraient d'être 1 ou 2 px plus bas pour être alignés sur le centre du bouton radio.

  6. #6
    Membre averti Avatar de jreaux62
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    226
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 226
    Points : 433
    Points
    433
    Par défaut
    Bonjour,

    les codes fournis ne permettent pas de reproduire le décalage.

    Il faudrait voir une page en ligne.

  7. #7
    Nouveau membre du Club
    Homme Profil pro
    retraité
    Inscrit en
    novembre 2012
    Messages
    53
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 76
    Localisation : France, Ardèche (Rhône Alpes)

    Informations professionnelles :
    Activité : retraité
    Secteur : Industrie

    Informations forums :
    Inscription : novembre 2012
    Messages : 53
    Points : 37
    Points
    37
    Par défaut
    envisageons les choses d'une autre manière :
    Est-il possible de monter ou descendre un texte de quelques pixels par rapport à sa ligne normale (une instruction CSS par exemple ?

  8. #8
    Membre averti Avatar de jreaux62
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    226
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 226
    Points : 433
    Points
    433
    Par défaut
    OUI !
    Mais, en occurrence, il existe du code CSS qui en MODIFIE le comportement "normal" !

Discussions similaires

  1. Alignement des boutons Radio
    Par safadkhi dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 27/08/2009, 15h07
  2. Bouton radio et label pas sur la même ligne
    Par mourbare dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 06/07/2009, 11h25
  3. [PEAR][HTML_QuickForm] Boutons radio alignés horizontalement
    Par brissou dans le forum Bibliothèques et frameworks
    Réponses: 6
    Dernier message: 21/06/2007, 16h32
  4. Alignement boutons radio dans un formulaire en CSS
    Par totijax dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 06/09/2006, 10h02
  5. aligner texte et boutons radio /checkbox
    Par Tr@nkill dans le forum Balisage (X)HTML et validation W3C
    Réponses: 11
    Dernier message: 19/04/2006, 13h23

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