Discussion :

[algerino77]

Salut! Salut!

Bon, ma question est super débile mais je ne trouve pas la réponse...

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
<tr>
	<td><label>Civilité: </label></td>
	<td>
		<input id="Mme" type="radio" name="Civilite" value="Mme" required/>
		<label for="Mme">Mme</label>
		<input id="Mlle" type="radio" name="Civilite" value="Mlle" required/>
		<label for="Mlle">Mlle</label>
		<input id="Mr" type="radio" name="Civilite" value="Mr" required/>
		<label for="Mr">Mr</label>
	</td>
</tr>

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
/* Boutons RADIO */
input[type="radio"] + label /* Bouton de base */
{
  display:block;
  background-image:url(Boutons/Box.png);
  background-repeat:no-repeat;
  min-width:19px;
  padding-left:25px;
  min-height:19px;
}
 
input[type="radio"] + label:hover /* Souris sur le bouton */
{
  background-image:url(Boutons/BoxHover.png);
}
 
input[type="radio"]:checked + label /* Bouton coché */
{
  background-image:url(Boutons/BoxChecked.png);
}
 
input[type="radio"]:disabled + label /* Bouton désactivé */
{
  background-image:url(Boutons/BoxDisabled.png);
}
/* FIN ---> Boutons RADIO */

Voila ce que ca donne:


J'aimerai faire en sorte que ce soit sur une seule ligne, est ce possible?

Merci d'avance!!

[ryan]

Yop!

Les INPUT sont en "display: block", donc cela semble logique d'aller à la ligne pour chaque bloc.

Edit: ha oui, comment les mettre sur une seule ligne, c'était la question....Peut-être essayer de la mettre tous en "float: left;", mais faut voir comment ça va se comporter à l'intérieur d'un TD

[algerino77]

Salut!

Merci de ton aide!

J'ai viré le display: block,
et j'ai mis float: left, voilà ce que ca donne:




Voilà les modifications:

Code CSS :

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

1
2
3
4
5
6
7
8
9
input[type="radio"] + label  /*Bouton de base*/ 
{
  background-image:url(Boutons/Box.png);
  background-repeat:no-repeat;
  min-width:19px;
  padding-left:25px;
  min-height:19px;
  float: left;
}

[ryan]

Yop!


A tester:
- enlever le "float:left" du INPUT
- laisser le INPUT en "display:block" pour ne casser le travail de mise en forme
- inclure chaque groupe INPUT + LABEL dans un conteneur de type bloc, comme une DIV, et donner à cette DIV un "float: left;"

[Invité]

Bonjour,
display:inline-block; :

Code :

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

1
2
3
4
5
6
7
8
9
input[type="radio"] + label /* Bouton de base */
{
  display:inline-block;
  background-image:url(Boutons/Box.png);
  background-repeat:no-repeat;
  min-width:19px;
  padding-right:15px;
  min-height:19px;
}

[algerino77]

Hey!

Merci pour votre aide, le display: display:inline-block; marche presque!

Voilà ce que ca donne:

Code CSS :

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

1
2
3
4
5
6
7
8
9
input[type="radio"] + label  /*Bouton de base*/ 
{
  display:inline-block;
  background-image:url(Boutons/Box.png);
  background-repeat:no-repeat;
  padding-left:25px;
  min-width:19px;
  min-height:19px;
}

Il ne manque plus qu'a superposer les backgrounds au bouton radio...

Je recherche la solution en parallèle, j'ai fais plusieurs test mais rien de concluant...


EDIT: 13/11/2014 17:56

J'ai trouvé!! La solution consite à rajouter un margin-left négatif!

Pour moi le code donne:

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
input[type="radio"] + label  /*Bouton de base*/ 
{
  display:inline-block;
  background-image:url(Boutons/Box.png);
  background-repeat:no-repeat;
  padding-left:25px;
  margin-left: -10%;
  min-width:19px;
  min-height:19px;
}

Le résultat:


Merci à tous!