Aligner des checkboxes ou boutons radio

Bonjour à tous,

Je souhaite aligner à la vertical des checkboxes et des radio buttons. J'ai trouvé un excellent tutorial pour ça que je vous livre parce que ça peut en interesser plus d'un :
http://alexking.org/blog/2005/07/18/css-checkbox-label-positioning

Cependant cela ne correspond pas du tout à ce que je veux faire car je dois utiliser le <label> pour poser ma question - et non pas le <legend> comme dans l'exemple de ce tuto (je créée une application d'enquête et en BDD toutes les questions vont en front dans un <label>.

J'ai tenté d'utiliser un tableau mais le positionnement ne se fait pas correctement sous Firefox.

Voici mon code :

<fieldset>
<legend>R&ocirc;les des &eacute;tudes</legend>
<p>
<label class="oblig">* EN GENERAL, les &eacute;tudes influencent-elles, dans votre entreprise, la d&eacute;cision de r&eacute;f&eacute;rencer ou pas un produit ? :</label>
<input name="Input0" type="radio" value="" />
<span class="choix">Pas du tout  </span><br />
<input name="Input" type="radio" value="" />
<span class="choix">Parfois  </span> <br />
<input name="Input" type="radio" value="" />
<span class="choix">Souvent </span></td>
</p>
<p>
<label class="oblig">* Pour les PRODUITS INNOVANTS: </label>
<input name="Input0" type="radio" value="" />
<span class="choix">Pas du tout  </span><br />
<input name="Input" type="radio" value="" />
<span class="choix">Parfois  </span> <br />
<input name="Input" type="radio" value="" />
<span class="choix">Souvent </span></td>
</p>
</fieldset>

et maintenenant ma CSS :

label {	
float: left;	
width: 35%;	
text-align: right;	
margin: 0;
padding: 0 .5em 0 0;
}
input.choix {
color: #666;
margin-left: 35%;
}
p {	
padding: .2em 0;
margin: 2em 0 2em 0;
}

Quelqu'un a-t-il déjà rencontré ce problème (et résolu !) ?
Merci par avance.

caroder a écrit :
Cependant cela ne correspond pas du tout à ce que je veux faire car je dois utiliser le <label> pour poser ma question - et non pas le <legend> comme dans l'exemple de ce tuto

Je n'ai pas vu la moindre trace de <legend> dans le tutoriel cité. Au contraire, il utilise uniquement des <label>. Qu'il utilise d'ailleurs correctement, c'est à dire comme des labels explicites, avec attribut for qui pointer vers l'id de l'élément de formulaire correspondant. Ça serait pas mal de suivre cet exemple.

Ah oui, et sa structure en paragraphes n'est pas mal non plus.

caroder a écrit :
J'ai tenté d'utiliser un tableau mais le positionnement ne se fait pas correctement sous Firefox.

C'est à dire, plus concrètement ?

En fait sous IE, le tableau dans lequel j'insère mes radio boutons ou mes cases à cocher s'aligne correctement comme ceci (je matérialise le tableau par des signes typographiques) :

.................... _________________
Ici mon label : l[] 1re case à cocher l
.................... l[] 2e case à cocher l
.................... l[] 3e case à cocher l
.................... l________________l

Mais sous FF ca donne cela :

Ici mon label :
_________________
l[] 1re case à cocher l
l[] 2e case à cocher l
l[] 3e case à cocher l
l________________l
Modifié par caroder (18 Jun 2007 - 14:12)

Tiens, je n'avais pas fait attention mais en fait tu fais une utilisation semble-t-il abusive de label.

Normalement, ce sont tes span (avec le texte relatif à chaque case à cocher) qui devraient être un label, et non pas la question.

Pour la question, tu fais un paragraphe, tu le fais flotter à gauche en width: 30%, puis tu mets les label et input dans un seul bloc (div par exemple, ou pourquoi pas p) non flottant, en margin-left: 30%.

C'est bien là mon problème : lorsque j'ai un champ texte, la question est bien mon label. Exemple :

Votre nom : [____________] (champ input)

Mais lorsque je pose la question :

Votre couleur préférée : [] rose [] bleu [] jaune

Le label est déjà occupé par la question, puisque je le rappelle, mon questionnaire est généré dynamiquement via une base de données.

Il semble qu'il y ait donc un manque dans les intitulés des balises HTML permettant de gérer ces cas de case à cocher /radio boutons... Le label devrait servir uniformément à traiter l'explicitation des informations demandées à l'utilisateur tandis qu'une autre balise devrait traiter les intitulés des cases à cocher/radio bouton (ou vice versa !).

Quelqu'un aurait-il une idée pour résoudre ce problème ?

fieldset et legend sont précisément faits pour cela: distribuer une information (la légende) sur plusieurs champs en complément de leurs labels respectifs.

<edit>ici: question = legend, couleur= label</>
Modifié par Laurent Denis (19 Jun 2007 - 14:44)

Je dois certainement mal m'exprimer parce que les réponses que vous prenez obligeamment la peine de me donner ne sont pas en adéquation avec ma problématique...

J'ai déjà expliqué que mes formulaires étaient générés dynamiquement via une base de données. Je ne peut donc pas gérer des cas particuliers en fonction du type de réponses (ouverte, fermée choix unique, fermée choix multiple, etc).

Par ailleurs je fais remarquer que la balise <legend> ne peut pas servir par principe à poser des questions puisque cette balise ignore le retour ligne (à ma connaissance) et donc en cas de question longue "casse" complètement le design de formulaire... Pour moi <legend> sert à donner un intitulé au formulaire...

Non. legend sert à fournir une information commune aux différents champs regroupés dans le fieldset, nécessaire à leur compréhension, lorsqu'elle ne peut pas être répétée dans chaque label; C'est précisément la raison pour laquelle a lieu ce regroupement.

Sinon, un formulaire n'a pas "d'intitulé" et n'a pas à avoir. C'est une erreur courante.

Pour le "retour ligne", je suppose que tu veux parler du rendu CSS inline ou block: cela se règle avec la propriété display.

Mais le premier problème à régler n'est pas celui de la présentation: c'est celui de la structure, pour l'instant défectueuse.

Par retour ligne, j'entends que :

<legend>Ici la question que je pose à mes utilisateurs et qui est vraiment très très très très très très très très très très très très très très très très très très très très très très très très très très très très très très très très longue</legend>

Ce <legend> s'affichera sur une seule ligne quelque soit la largeur définie pour le <fieldset> ou le <form>.

Donc imaginons que mon fieldset fasse 300px de large et que la typo soit définie à bold 12px verdana pour le legend : je sors complètement des "cordes" et ça me casse toute ma mise en page...

Bon après, évidemment, je peux poser des questions moins longues mais ce n'est pas la réponse que je cherche...

Enfin j'ai toujours le problème de ma table questions en Base de données qui contient les colonnes suivantes :

- ID_quest (clé primaire)
- ID_chap (clé étrangère : correspond à l'ID de la table contenant les <legend>)
- libellé
- ID_type (clé étrangère : question ouverte / fermée etc)

Je ne peux donc pas choisir comment je vais gérer les <label> (avant ou après l'input) suivant que ce sont des champs texte ou bouton radio ...
Modifié par caroder (20 Jun 2007 - 15:10)

caroder a écrit :
Je ne peux donc pas choisir comment je vais gérer les <label> (avant ou après l'input) suivant que ce sont des champs texte ou bouton radio ...

Même en testant la valeur d'ID_type et en basculant sur telle ou telle structure suivant la valeur trouvée ? Certes, c'est plus lourds, mais c'est pas impossible il me semble.

Pour la mise en forme de legend... effectivement, ça semble pas mal limité (du moins avec Firefox, les autres s'en tirent peut-être mieux).

Le style par défaut de <legend> dans Firefox semble être le suivant :

legend {
  padding-left: 2px;
  padding-right: 2px;
  border: none;
  position: static ! important;
  float: none ! important;
}

Je ne vois pas trop ce qui bloque...

Pour firefox, lui expliquer gentiment en stylant un span dans le legend, et non legend lui-même. ça ne fait pas tout, mais ça aide