probleme Bouton radio

**cuddy** · 16/09/2012, 19h45

Bonjour,
Toujours dans mon formulaire je souhaite avoir trois boutons radio pour avoir le choix entre trois choix. Je souhaite que tous soit sur la même ligne avec un espace égale entre chaque. comment je peux faire pour les avoirs alignés?

Image :

Mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<p>
   <label><span class="text19">La séance est pour :</span></label>
   </p>
  <center><p>
   <label for="Adulte" class="text9">Adulte</label>
   <input name="Gender" type="radio" value="Adulte" />
   <label for="Adolescent" class="text9"> Adolescent</label> 
   <input name="Gender " type="radio" value="Adolescent" />
   <label for="Enfant" class="text9"> Enfant</label>
   <input name="Gender " type="radio" value="Enfant" />
  </p></center>
  <p>

**cuddy** · 16/09/2012, 21h05

Bon ben j'ai virer le label et j'ai mis span a la place et opur agrandir l'espace entre j'ai mis           

**NoSmoking** · 16/09/2012, 21h46

Bonsoir,

Envoyé par cuddy

Bon ben j'ai virer le label et j'ai mis span a la place et opur agrandir l'espace entre j'ai mis           

la méthode n'est pas très élégante

.

pour la partie HTML

Code html :

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

1
2
3
4
5
6
7
8
<p>
  <label for="Adulte" class="text9">Adulte</label>
  <input name="Gender" type="radio" value="Adulte" />
  <label for="Adolescent" class="text9"> Adolescent</label>
  <input name="Gender " type="radio" value="Adolescent" />
  <label for="Enfant" class="text9"> Enfant</label>
  <input name="Gender " type="radio" value="Enfant" />
<p>

pour la partie CSS

Code css :

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

1
2
3
4
5
6
label{
  display:inline-block;
  width:5em;
  text-align:right;
  background-color:#e0e0e0;
}

la couleur de fond n'est la que pour la visualisation.

**cuddy** · 17/09/2012, 07h54

Merci, mon souci c'est que j'ai d'autre balise label auquel je ne veux pas toucher
est ce que je peux par exemple mette

label1 / label2 ect ?

**NoSmoking** · 17/09/2012, 18h27

dans ce cas il te suffit de mettre une ID sur la balise P

Code html :

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

1
2
3
4
5
6
7
8
<p id="info">
  <label for="Adulte" class="text9">Adulte</label>
  <input name="Gender" type="radio" value="Adulte" />
  <label for="Adolescent" class="text9"> Adolescent</label>
  <input name="Gender " type="radio" value="Adolescent" />
  <label for="Enfant" class="text9"> Enfant</label>
  <input name="Gender " type="radio" value="Enfant" />
<p>

en rajoutant la référence dans le CSS

Code css :

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

1
2
3
4
5
6
#info label{
  display:inline-block;
  width:5em;
  text-align:right;
  background-color:#e0e0e0;
}

pour cibler ces LABELs.

**cuddy** · 17/09/2012, 18h59

super merci j'avais un id partout, mais pas au bon endroit lol

**cuddy** · 17/09/2012, 20h09

Alors là je rage
j'ai finit par reussi mon code et voila ce Que cela donne sur dreamweaver (c'est exactement ce que je veux)

sauf que quand je vias sur IE ou Mozila j'ai c'est horreur !!!

AU SECOURRRRRRR !!!!!!

**NoSmoking** · 17/09/2012, 22h10

La première chose est d'avoir un doctype valide en première ligne du fichier, <!doctype html> par exemple, simple et efficace.

A ce stade il faut que tu nous fournisses le code HTML et CSS de ton formulaire sinon difficile de dire si ce n'est qu'il y à un problème sur le conteneur et de positionnement à priori!

**cuddy** · 18/09/2012, 09h39

Mon truc public :

Code :

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Mon code css :

Code :

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
#label{
	background:#D8F8A1;
}
 
#info label{
  display:inline-block;
  width:5em;
  text-align:right;
    }
 
#info input{
	margin-right:60px;
	}
 
#town label{
  display:inline-block;
  }
#town input{
   background:#D8F8A1;
   margin-right:18px;
 }
 
 input[type=radio]{
color:#D8F8A1;
 
} 
#nvx input{
	background:#D8F8A1;
}

Mon formulaire :

Code :

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
<form action="/HDWForm2Mail/Form2Mail.php" method="post" id="form1" onsubmit="return validate(this)" accept-charset="iso-8859-1">
 <p id="nvx">
    <label for="Nom"><span class="text9">Nom / prénom :</span></label>
    <input name="Nom" type="text" value="" width="260px"/>
  </p> 
 
 <p id="town">
  <label for="Adresse"><span class="text9">Adresse :</span></label>
  <input name="Adresse" type="text" value="" /> 
 
  <label for="Code"><span class="text9">Code postal :</span></label>
  <input name="Code" type="text" value="" width="80" />
 
  <label for="Ville"><span class="text9">Ville :</span></label>
  <input name="Ville" type="text" value="" />
 </p>
 
  <p id="nvx">
    <label for="Email"><span class="text9">Email :</span></label>
    <input name="Email" type="email" value="" width="260px" />
  </p>
  <p>
   <label><span class="text9">La séance est pour un:</span></label>
   </p>
<p id="info"><center>
  <label for="Adulte" class="text9">Adulte</label>
  <input name="Genre" type="radio" value="Adulte" />
  <label for="Adolescent" class="text9"> Adolescent</label>
  <input name="Genre" type="radio" value="Adolescent" />
  <label for="Enfant" class="text9"> Enfant</label>
  <input name="Genre" type="radio" value="Enfant" /></center>
  </p>
  <label for="Sujet"><span class="text9">Veuillez décrire en quelques lignes votre problème</span></label>
  <p>
    <textarea name="Problème" class="textarea"></textarea>
</p>
 
 
  <p>
    <label for="calendrier"><span class="text9">Choisissez une date de rendez-vous </span></label>
  </p>
  <div style="z-index:1000;">
    <div id="cal2Container" align="right"></div>
 
 
<br />
 <div style="text-align:right;">
 <div style="margin-left:auto;margin-right:auto;width:210px">
    <input name="selDaycal2" type="hidden" id="selDaycal2" />
    <input name="selMonthcal2" type="hidden" id="selMonthcal2" />
    <input name="selYearcal2" type="hidden" id="selYearcal2" />
    <input name="selHourcal2" type="hidden" id="selHourcal2" />
    <input name="selMinutecal2" type="hidden" id="selMinutecal2" />
 </div></div>
 
    <p>
     <center> <input type="submit" value="Envoyer" name="submit" class="text19"/></center>
    </p>
 
 
 
  <input type="hidden" name="hdwemail" id="hdwemail" value="hypnosepithiviers+yahoo.fr" />
  <input type="hidden" name="hdwok" id="hdwok" value="merci.html" />
  <input type="hidden" name="hdwnook" id="hdwnook" value="erreur.html" />
</div>
</form>

**Torgar** · 18/09/2012, 12h25

Aucun problème avec ton code, sous Firefox 15 les boutons radios sont bien côte à côte, comme te l'affiche Dreamweaver. Il en est de même pour IE des versions 7 à 9.

Tu n'aurais pas un problème de cache par hasard ?

À part ça quelques remarques d'ordre général :

<center> c'est terminé, préfère un centrage par CSS (text-align: center; ou width: X; margin: 0 auto ;
<input name="Nom" type="text" value="" width="260px"/> : passe par du CSS pour le dimensionnement de ta zone de saisie ;
<p id="nvx"> est répété !!! Un identifiant doit être unique et utilisé qu'une seule fois par page. Préfère l'usage des classes si tuas besoin de répéter un style sur plusieurs éléments dans ta page ;
indente ton code de façon à ce qu'il soit plus clair à la lecture.

Code :

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!doctype html>
<head>
    <title>Ma page de test DVP</title>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="./main/js/jquery-ui/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="./main/js/jquery-ui/jquery-ui-1.8.16.custom.min.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    #label{
        background:#D8F8A1;
    }
 
    #info label{
        display:inline-block;
        width:5em;
        text-align:right;
    }
 
    #info input{
        margin-right:60px;
    }
 
    #town label{
        display:inline-block;
    }
 
    #town input{
        background:#D8F8A1;
        margin-right:18px;
    }
 
    input[type=radio]{
        color:#D8F8A1;
    } 
 
    #nvx input{
        background:#D8F8A1;
    }
    </style>
 
    <script type='text/javascript'>
        
    </script>
</head>
<body>
    <header>
    </header>
 
    <article>
        <form action="/HDWForm2Mail/Form2Mail.php" method="post" id="form1" onsubmit="return validate(this)" accept-charset="iso-8859-1">
            <p id="nvx">
                <label for="Nom"><span class="text9">Nom / prénom :</span></label>
                <input name="Nom" type="text" value="" width="260px"/>
            </p> 
 
            <p id="town">
                <label for="Adresse"><span class="text9">Adresse :</span></label>
                <input name="Adresse" type="text" value="" /> 
 
                <label for="Code"><span class="text9">Code postal :</span></label>
                <input name="Code" type="text" value="" width="80" />
 
                <label for="Ville"><span class="text9">Ville :</span></label>
                <input name="Ville" type="text" value="" />
            </p>
 
            <p id="nvx">
                <label for="Email"><span class="text9">Email :</span></label>
                <input name="Email" type="email" value="" width="260px" />
            </p>
 
            <p>
                <label><span class="text9">La séance est pour un:</span></label>
            </p>
 
            <p id="info"><center>
                <label for="Adulte" class="text9">Adulte</label>
                <input name="Genre" type="radio" value="Adulte" />
                <label for="Adolescent" class="text9"> Adolescent</label>
                <input name="Genre" type="radio" value="Adolescent" />
                <label for="Enfant" class="text9"> Enfant</label>
                <input name="Genre" type="radio" value="Enfant" /></center>
            </p>
            <p>
                <label for="Sujet"><span class="text9">Veuillez décrire en quelques lignes votre problème</span></label>
            </p>
            <p>
                <textarea name="Problème" class="textarea"></textarea>
            </p>
 
            <p>
                <label for="calendrier"><span class="text9">Choisissez une date de rendez-vous </span></label>
            </p>
            <div style="z-index:1000;">
                <div id="cal2Container" align="right"></div>
                <br />
                <div style="text-align:right;">
                    <div style="margin-left:auto;margin-right:auto;width:210px">
                        <input name="selDaycal2" type="hidden" id="selDaycal2" />
                        <input name="selMonthcal2" type="hidden" id="selMonthcal2" />
                        <input name="selYearcal2" type="hidden" id="selYearcal2" />
                        <input name="selHourcal2" type="hidden" id="selHourcal2" />
                        <input name="selMinutecal2" type="hidden" id="selMinutecal2" />
                    </div>
                </div>
 
                <p>
                    <center> <input type="submit" value="Envoyer" name="submit" class="text19"/></center>
                </p>
 
                <input type="hidden" name="hdwemail" id="hdwemail" value="hypnosepithiviers+yahoo.fr" />
                <input type="hidden" name="hdwok" id="hdwok" value="merci.html" />
                <input type="hidden" name="hdwnook" id="hdwnook" value="erreur.html" />
            </div>
        </form>
    </article>
 
    <footer>
    </footer>
</body>
</html>

**cuddy** · 18/09/2012, 13h36

OK merci mais a l'affichage j'ai toujours la même merde donc sa doit être de mon coté
Merci pour ta patience

**Torgar** · 18/09/2012, 14h09

Quel navigateur, version comprise, utilises-tu ?

**cuddy** · 18/09/2012, 18h16

firefox 15.0.1

**NoSmoking** · 18/09/2012, 22h47

je viens d'essayer le code de torgar sous IE7, Safari 5.1.7, FireFox 3.5, Opéra 11.64 et chrome 21 et je n'ai rencontré aucun problème d'affichage.

Tu nous caches quelque chose

- encapsulation du formulaire dans un conteneur
- CSS qui prend le pas sur celui déclaré, spécificité des sélecteurs
...

une page en ligne serait la bienvenue.

**cuddy** · 19/09/2012, 09h28

J'avais du css dans ma page principale et la même balise dans ma feuille css du coup je l'ai virer de ma page, mais sa na rien changé

**Torgar** · 19/09/2012, 09h40

J'avoue ne pas comprendre...

Je suis sous Firefox 15.0.1 (sous Windows 7) également et même en réduisant la dimension de la fenêtre je ne reproduis pas ton problème.

Je rajouterais aussi ceci comme remarque à mes précédentes :

<script>initAppCalendar("cal2",1,2,"FR",{m1:"Choisissez votre horaire"});</script> : on précise le type de script par <script type="text/javascript></script> ;
<script language='JavaScript' type='text/javascript' src='JScript/formValidator.js'></script> : pour le coup, language='JavaScript' est en trop.

Même IE7 l'affiche correctement, c'est dire si ce code devrait fonctionner !

**vermine** · 19/09/2012, 09h49

Salut,

Envoyé par Torgar

<script>initAppCalendar("cal2",1,2,"FR",{m1:"Choisissez votre horaire"});</script> : on précise le type de script par <script type="text/javascript></script> ;

Notons toutefois qu'en HTML5, il n'y a plus besoin de préciser l'attribut type :

Code :

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

<script>...</script>

Mais je vous invite à lire l'article de Bovino au sujet de la balise <script>.

**Candygirl** · 19/09/2012, 10h01

Envoyé par Torgar

J'avoue ne pas comprendre...

Je suis sous Firefox 15.0.1 (sous Windows 7) également et même en réduisant la dimension de la fenêtre je ne reproduis pas ton problème.

Euh... soit je n'ai rien compris au problème, soit ton screen montre justement le problème dont il parle ? C'est à dire le passage de l'input de la ville sur la ligne inférieure ?

Attribuer un width approprié à ces input devrait régler le problème il me semble ?

EDIT: ah ouais, les boutons radios par contre sont effectivement l'un en dessous de l'autre

**cuddy** · 19/09/2012, 10h15

Voila ce que mon code donne sur dreamveawer et ce que je veux. (margin entre les boutons radios et width du code postal )

et voila ce que l'on voit a l'ecran ( le width du code opstal pas pris en compte et le margin des boutons radios non plus)

**Torgar** · 19/09/2012, 10h23

@vermine : ma remarque se basait en fonction du doctype définit

@Candygirl : on c'est attardé sur une incompréhension on dirait

Comme l'a dit Candygirl, dimensionne ton input du code postal avec un size="6" ça devrait passer : <input type="text" width="80" value="" name="Code" size="6">
Et pour l'espacement entre tes boutons radios, rajoute une marge à droite : <input type="radio" value="Adulte" name="Genre" style="margin-right: 40px;">

probleme Bouton radio

HTML

Discussions similaires

Partager

Partager