Positionnement checkbox

Bonjour à tous,

Voilà je me prends un petit peu la tête sur un problème tout con de positionnement de checkbox.

J'ai fait un formulaire dans lequel je pose tout un tas de question, et sur certaines questions je propose à la personne de sélectionner des choix en cochant des input type='checkbox'.

Sur certaines questions j'en ai tout un tas, donc ce que je voudrais faire c'est les grouper visuellement en deux collones, c'est à dire des cases à cocher alignées d'un côté avec leurs intitulés, et un autre groupe de cases à cocher alignées de l'autre côté avec également leurs intitulés.

En gros je veux faire exactement comme sur la capture ci-dessous :


Le hic c'est que je n'y arrive pas ! Un coup j'alligne bien les checkbox d'un côté mais pas de l'autre.... Bref je commence à tourner en rond pour quelque chose de si bête !

Pouvez vous m'aider ? Par avance merci pour vos précieux conseils ! ;o)

Bonjour et bienvenue,

d'un point de vue accessibilité cette manière de faire va poser un énorme problème parce que case à cocher et intitulé seront à 12 années-lumière l'un de l'autre dans le code HTML ... Et au moindre souci de mise en page (sur un mobile, une taille de texte plus grande, etc) il en sera de même sur un navigateur graphique: soit les 2 colonnes seront séparées, soit (pire) il y aura un décalage de pile une ligne et tes utilisateurs cliqueront en décalant toutes les réponses d'un cran

Rien ne t'empêche de placer les couples checkbox/label dans un paragraphe (à faire flotter ou autre) ou un item de liste (idem), ça fonctionne très bien La propriété CSS line-height est bien utile pour caler un peu tout ça verticalement.

EDIT: le sport que je pratique n'est pas dans ta liste, tu peux peut-être envisager de rajouter 1 à 3 zones de texte pour les "Autres" Ou au moins une case à cocher "Autre".
Modifié par Felipe (10 Mar 2009 - 14:48)

Merci beaucoup Felipe pour ta réponse.

J'ai suivi tes conseils, j'ai donc fait :

CSS :

fieldset.field{
width:600px;
clear:both;
}

p.left{
float:left;
background-color:orange;
width:250px;
margin-left:50px;
}

p.right{
float:right;
width:250px;
background-color:black;
margin-right:50px;
}

HTML :

<fieldset class="field">
<p class="left"><input type='checkbox'><label>Essai</label></p>
<p class="right"><input type='checkbox'><label>Essai</label></p>
....
</fieldset>

Ca marche très bien, je sais pas pourquoi je n'y avais pas pensé, ça parait tellement évident une fois que tu le dis !

Dernière petite question : Pensez-vous qu'il est utile de préciser l'option clear à mon p.left et p.right ? Si oui que dois je mettre (both, left... ?). Parce que je ne sais jamais. Merci d'avance et promis je vous embête plus après.