Alignement cases à cocher

Bonjour,

Ça va paraître idiot, mais la solution la plus simple à ce problème est encore de placer les cases à cocher à gauche.
Modifié par Lanza (03 Oct 2007 - 15:09)

cide a écrit :
hello,

Il y a une solution mais je ne sais pas si c'est la meilleure:

<label>Vous inscrire personnellement :&nbsp;&nbsp;</label><input type="checkbox" name="Inscription" value="Souhaite s'inscrire personnellement" style="float:right;"><br />

<label>Etre invité par un des sponsors :&nbsp;</label><input type="checkbox" name="Inscription" value="Souhaite etre invite par sponsor" style="float:right;">

Tu codes avec <label> puis tu utilise des espaces inséquable pour mettre en forme " &nbsp; "

Ce n'est pas très propre certes mais surtout cela ne fonctionne pas !

Lanza a écrit :
Bonjour,

Ça va paraître idiot, mais la solution la plus simple à ce problème est encore de placer les cases à cocher à gauche.

Ce n'est pas idiot ! Il faut juste voir si ce sera validé niveau "charte graphique" ! Et disons que ... Ergonomiquement, c'est plus pratique qu'elles soient à droite qu'à gauche ...
Modifié par Energy52 (03 Oct 2007 - 15:15)

a écrit :
Cela ne fonctionne pas et la ligne d'input est syntaxicalement fausse (on ne peut pas mettre le style directement après le input !)

Eh bien, si cela ne fonctionne pas, je me demande ce qu'il y a. J'ai testé ma ligne de code sous FF2 et IE6-7 avant de te les balancer, et ce code fonctionne.

Un screen sous IE:
http://www.cbsch.net/blog/images/ie.gif

et sous Firefox:
http://www.cbsch.net/blog/images/ff.gif

Il doit y avoir quelque chose d'autre dans ton code, j'imagine, qui fait planter le truc. J'ai déjà fait des sites complets avec cette méthode, ça m'étonnerait donc qu'elle ne fonctionne pas

Sinon, sache qu'aucun ordre n'est défini pour les attributs en (x)html. Certaines conventions veulent qu'on écrive un attribut puis un autre. Pour référence: article W3C schools sur <input> et article 4.11 du W3C (norme HTML 4.01).
Modifié par smitty (03 Oct 2007 - 15:26)

smitty a écrit :
Cela ne fonctionne pas et la ligne d'input est syntaxicalement fausse (on ne peut pas mettre le style directement après le input !)

Eh bien, si cela ne fonctionne pas, je me demande ce qu'il y a. J'ai testé ma ligne de code sous FF2 et IE6-7 avant de te les balancer, et ce code fonctionne.

Un screen sous IE:
http://www.cbsch.net/blog/images/ie.gif

et sous Firefox:
http://www.cbsch.net/blog/images/ff.gif

Il doit y avoir quelque chose d'autre dans ton code, j'imagine, qui fait planter le truc. J'ai déjà fait des sites complets avec cette méthode, ça m'étonnerait donc qu'elle ne fonctionne pas

Sinon, sache qu'aucun ordre n'est défini pour les attributs en (x)html. Certaines conventions veulent qu'on écrive un attribut puis un autre. Pour référence: article W3C schools sur <input> et article 4.11 du W3C (norme HTML 4.01).


Ta ligne :

<input style="float: left;" type="checkbox" name="Inscription" value="Souhaite s'inscrire personnellement" style="float:right;" />

est détectée comme incorrecte (en jaune) dans DW et si j'enlève le style="float:left;" du début alors elle passe ...

Et d'ailleurs à juste titre, tu définis 2 fois un style dans la balise ... C'est ça qu'il aime pas !
Modifié par Energy52 (03 Oct 2007 - 15:34)

Lanza a écrit :


Ça se discute

Tout l'intérêt de l'élément 'label' de garder le lien entre la case à cocher et sa légende (en plus en cliquant sur la légende, ça active la case à cocher), et donc justement de palier aux problèmes de légende avant ou après la case à cocher, et d'un élément input en général.

Mais si tu tiens à les garder à droite, pense à un bête text-align: right; , avec une marge à droite si nécessaire. "Ergonomiquement", c'est mieux de ne pas avoir le texte de légende trop loin de la case à cocher, et "charte graphiquement" aussi.

Oui mais le but c'est que les cases soient alignées verticalement même si le label texte qui précède est de taille différente que celui du dessus, et ce, sur les différents navigateurs ! C'est ça que je ne parviens pas à avoir !

Une idée ?! (c'est pareil pour les alignements des input de type texte ceci dit!)
Je suis d'accord sur le fait qu'il ne faut pas que le label soit trop loin de la case et c'est le souci qu'on a quand on met dans un div avec une taille fixe (ou même vaiable !)

Energy52 a écrit :


Oui mais le but c'est que les cases soient alignées verticalement même si le label texte qui précède est de taille différente que celui du dessus, et ce, sur les différents navigateurs ! C'est ça que je ne parviens pas à avoir !

Une idée ?! (c'est pareil pour les alignements des input de type texte ceci dit!)
Je suis d'accord sur le fait qu'il ne faut pas que le label soit trop loin de la case et c'est le souci qu'on a quand on met dans un div avec une taille fixe (ou même vaiable !)

L'avantage du text-align: right; est précisément qu'il va aligner le texte, et donc les checkbox à droite