Ah, je craignais un peu cela.
<div id="option_1">
<a href="#">Climamatisation Manuel</a><br />
Climatisation automatique<br />
Sellerie cuir<br />
...
</div>
<div id="checkbox_1">
<label title="Si oui ,cochez !!">
<input type="checkbox" class="chek_option" /><br />
<input type="checkbox" class="chek_option" /><br />
<input type="checkbox" class="chek_option" /><br />
</label>
</div>
Cette manière de procéder pour gérer tes paires "label" et "input" est à la fois non accessible (label n'a pas de sens utilisé de cette manière), inutilement lourde et te complique les choses pour la présentation, en t'amenant à gérer un alignement horizontal entre deux listes qui n'ont pas lieu d'être séparées.
Pour obtenir un code à la fois accessible, fonctionnel et facile à styler, modifie pour obtenir :
<div><label for="option_10">Climamatisation Manuel</label> <input type="checkbox" id="option_10" ... /></div>
<div><label for="option_11">Climatisation automatique</label> <input type="checkbox" id="option_11" ... /></div>
...
- peu importe le conteneur des lignes : <div>, <p>, <span> en display:block...
- en revanche, la valeur de chaque
for de chaque label doit être celle de l'
id du champ de formulaire qui lui est associé (voir la FAQ du forum sur les <label>)
- en jouant par exemple sur la position
float, ou plus simplement sur les largeurs en flux, tu peux obtenir l'alignement vertical et les fond de couleurs que tu as actuellement sur ta page.
Tu y gagne un code nettement meilleur à tous points de vue, à commencer par la disparition de ce problème d'espace vertical
Modifié par Laurent Denis (29 Jul 2006 - 20:47)