Alignement cases à cocher

Bonjour !
Je voudrais aligner les cases à cocher, selon la longueur du texte qui se trouve avant et les navigateurs je n'ai pas le même résultat ! Comment faire ça simplement avec CSS ?

Exemple :

Petite phrase : case ici
Grande prhase qui décale : case ici

Les 2 cases ici devant être alignées au pixel près ! Je n'y parviens pas !

Salut,

Tu peux peut être essayer de les faire flotter à droite.

Mikachu a écrit :
Salut,

Tu peux peut être essayer de les faire flotter à droite.

Hello, un float right ça donne ça :



Les cases sont placées en dessous des textes

Avec ça comme code :
<tr>
<td >Vous inscrire personnellement :<input type="checkbox" name="Inscription" value="Souhaite s'inscrire personnellement" style="float:right;"></td>
</tr>
<tr>
<td >Etre invité par un des sponsors :<input type="checkbox" name="Inscription" value="Souhaite etre invite par sponsor" style="float:right;"></td>
</tr>

Je voudrais que les cases soient sur la même ligne que le texte !
Modifié par Energy52 (03 Oct 2007 - 13:32)

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; "

Alors, tu peux essayer un truc du genre en rendant les deux éléments float (un peu comme dans les <ul> qu'on balance inline ou qu'on concatène avec du float tout partout):

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

Le seul souci, c'est que tu dois définir une largeur par défaut pour ton élément. A ta place, j'emploierais des em pour rendre le tout relatif aux autres éléments.
Modifié par smitty (03 Oct 2007 - 14:59)

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)

smitty a écrit :
Alors, tu peux essayer un truc du genre en rendant les deux éléments float (un peu comme dans les <ul> qu'on balance inline ou qu'on concatène avec du float tout partout):

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

Le seul souci, c'est que tu dois définir une largeur par défaut pour ton élément. A ta place, j'emploierais des em pour rendre le tout relatif aux autres éléments.

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

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)

Huhuhu, ok, je viens de voir J'avais mal copié-collé ton code, et il reste un float:right et un float:left dans la même balise... Toutes mes confuses, donc. Le code correct serait donc:

<label style="float: left; width: 20em;">Vous inscrire personnellement:</label>
<input style="float: left;" type="checkbox" name="Inscription" value="Souhaite s'inscrire personnellement" />

Dieu merci, tu avais copié le code dans ton dernier message sans la balise [ code], et là, ça saute aux yeux.
Modifié par smitty (03 Oct 2007 - 15:35)

Energy52 a écrit :


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 ...

Ç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.

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 !)

hum... c'est ça que tu veux http://bb.public.free.fr/css/formulaire.html ?

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