j'ai des li où je mets des input ou des checkbox.
pour ces li-là j'ai mis une class 'right' avec, dans le css :
text-align:right;
bon c'est pas mal pour les inputs car je m'arrange pour avoir tjs la
même largeur d'input.
mais quand j'ai une checkbox c'est pas jojo:
+----------------------+
| Li Normal |
+----------------------+
| Hue: [input] |
+----------------------+
| Angle: [input] |
+----------------------+
| Triade: X | <!-- X c'est la checkbox -->
+----------------------+
Alors que je préférerais obtenir :
+----------------------+
| Li Normal |
+----------------------+
| Hue: [input] |
+----------------------+
| Angle: [input] |
+----------------------+
| Triade: X | <!-- X c'est la checkbox -->
+----------------------+
càd l'alignement aux ":"...
c'est possible sans faire les pieds au mur ? ;-)
une donnée, non négligeable, est que je batis ce menu en js à partir
d'un fichier "actions.js" du genre :
[...]
{label:'Color: '},
{label:'', object:{tag:'input',attributes:
{type:'text',id:'color',size:'14',
name:'color',value:'','class':'menu',
'onkeypress':'return autocomplete(this, event);',
'onkeyup':'return autocomplete(this, event);',
'onclick':'return autocomplete(this, event);'}}},
{label:'Triade: ', object:{tag:'input',attributes:
{type:'checkbox',id:'tri',
name:'tri',checked:'true','class':'menu'}}},
{label:'Set Page Colors',
link:'javascript:setPageColors();'},
[...]
j'ai des li où je mets des input ou des checkbox. pour ces li-là j'ai mis une class 'right' avec, dans le css : text-align:right;
bon c'est pas mal pour les inputs car je m'arrange pour avoir tjs la même largeur d'input.
mais quand j'ai une checkbox c'est pas jojo: +----------------------+ | Li Normal | +----------------------+ | Hue: [input] | +----------------------+ | Angle: [input] | +----------------------+ | Triade: X | <!-- X c'est la checkbox --> +----------------------+
Alors que je préférerais obtenir : +----------------------+ | Li Normal | +----------------------+ | Hue: [input] | +----------------------+ | Angle: [input] | +----------------------+ | Triade: X | <!-- X c'est la checkbox --> +----------------------+
Et si tu utilisais des regroupements sémantiques dédiés aux formulaires pour pouvoir mieux les styler ?
j'ai des li où je mets des input ou des checkbox.
pour ces li-là j'ai mis une class 'right' avec, dans le css :
text-align:right;
bon c'est pas mal pour les inputs car je m'arrange pour avoir tjs la
même largeur d'input.
mais quand j'ai une checkbox c'est pas jojo:
+----------------------+
| Li Normal |
+----------------------+
| Hue: [input] |
+----------------------+
| Angle: [input] |
+----------------------+
| Triade: X | <!-- X c'est la checkbox -->
+----------------------+
Alors que je préférerais obtenir :
+----------------------+
| Li Normal |
+----------------------+
| Hue: [input] |
+----------------------+
| Angle: [input] |
+----------------------+
| Triade: X | <!-- X c'est la checkbox -->
+----------------------+
Et si tu utilisais des regroupements sémantiques dédiés aux formulaires
pour pouvoir mieux les styler ?
j'ai des li où je mets des input ou des checkbox. pour ces li-là j'ai mis une class 'right' avec, dans le css : text-align:right;
bon c'est pas mal pour les inputs car je m'arrange pour avoir tjs la même largeur d'input.
mais quand j'ai une checkbox c'est pas jojo: +----------------------+ | Li Normal | +----------------------+ | Hue: [input] | +----------------------+ | Angle: [input] | +----------------------+ | Triade: X | <!-- X c'est la checkbox --> +----------------------+
Alors que je préférerais obtenir : +----------------------+ | Li Normal | +----------------------+ | Hue: [input] | +----------------------+ | Angle: [input] | +----------------------+ | Triade: X | <!-- X c'est la checkbox --> +----------------------+
Et si tu utilisais des regroupements sémantiques dédiés aux formulaires pour pouvoir mieux les styler ?
<ul id="menu"> <li>normal</li> <li><span>texte:</span><input type=text></li> <li><span>texte:</span><input type=checkbox></li> <li><!-- li vide de fin de float--></li> </ul>
#menu { position: relative; width: 125px; list-style: none; margin: auto; padding: 0; border: 1px solid; background: #ffc } #menu li {clear:left; width: 100%; text-align: center;} #menu li span { float:left; width: 49%; text-align: right } #menu li input { float: left; width: 45%; text-align: left; margin-left: 2%; } #menu li input[type=checkbox] { width: auto }
une donnée, non négligeable, est que je batis ce menu en js à partir d'un fichier "actions.js" du genre :
zocazou, vaudrait mieux sérier les groupes d'éléments (tel que le menu) et ne pas distribuer des class en veux-tu en voilà zunpeupartout (enfin ... c'est mon point de vue que je partage avec moi-même et dont auquel je suis bien d'accord)
-- sm
Une Bévue a écrit :
c'est possible sans faire les pieds au mur ? ;-)
les doigts dans l'nez c'est bon ?
<ul id="menu">
<li>normal</li>
<li><span>texte:</span><input type=text></li>
<li><span>texte:</span><input type=checkbox></li>
<li><!-- li vide de fin de float--></li>
</ul>
#menu { position: relative; width: 125px;
list-style: none; margin: auto; padding: 0;
border: 1px solid; background: #ffc }
#menu li {clear:left; width: 100%; text-align: center;}
#menu li span { float:left; width: 49%; text-align: right }
#menu li input { float: left; width: 45%;
text-align: left; margin-left: 2%; }
#menu li input[type=checkbox] { width: auto }
une donnée, non négligeable, est que je batis ce menu en js à partir
d'un fichier "actions.js" du genre :
zocazou, vaudrait mieux sérier les groupes d'éléments (tel que le menu)
et ne pas distribuer des class en veux-tu en voilà zunpeupartout
(enfin ... c'est mon point de vue que je partage avec moi-même et dont
auquel je suis bien d'accord)
<ul id="menu"> <li>normal</li> <li><span>texte:</span><input type=text></li> <li><span>texte:</span><input type=checkbox></li> <li><!-- li vide de fin de float--></li> </ul>
#menu { position: relative; width: 125px; list-style: none; margin: auto; padding: 0; border: 1px solid; background: #ffc } #menu li {clear:left; width: 100%; text-align: center;} #menu li span { float:left; width: 49%; text-align: right } #menu li input { float: left; width: 45%; text-align: left; margin-left: 2%; } #menu li input[type=checkbox] { width: auto }
une donnée, non négligeable, est que je batis ce menu en js à partir d'un fichier "actions.js" du genre :
zocazou, vaudrait mieux sérier les groupes d'éléments (tel que le menu) et ne pas distribuer des class en veux-tu en voilà zunpeupartout (enfin ... c'est mon point de vue que je partage avec moi-même et dont auquel je suis bien d'accord)
-- sm
unbewusst.sein
Lea GRIS wrote:
Et si tu utilisais des regroupements sémantiques dédiés aux formulaires pour pouvoir mieux les styler ?
je vais tester ça derechef...
merci !
-- Une Bévue
Lea GRIS <lea.gris@nomail.invalid> wrote:
Et si tu utilisais des regroupements sémantiques dédiés aux formulaires
pour pouvoir mieux les styler ?
Et si tu utilisais des regroupements sémantiques dédiés aux formulaires pour pouvoir mieux les styler ?
je vais tester ça derechef...
merci !
-- Une Bévue
unbewusst.sein
SAM wrote:
<ul id="menu"> <li>normal</li> <li><span>texte:</span><input type=text></li> <li><span>texte:</span><input type=checkbox></li> <li><!-- li vide de fin de float--></li> </ul>
OK, j'avais bien pensé aux <span /> mais je m'y étais mal pris...
#menu { position: relative; width: 125px; list-style: none; margin: auto; padding: 0; border: 1px solid; background: #ffc } #menu li {clear:left; width: 100%; text-align: center;} #menu li span { float:left; width: 49%; text-align: right } #menu li input { float: left; width: 45%; text-align: left; margin-left: 2%; } #menu li input[type=checkbox] { width: auto }
> une donnée, non négligeable, est que je batis ce menu en js à partir > d'un fichier "actions.js" du genre :
Ayïe ... si en plus y a des labels ...
non, c'est le texte pour ton exemple...
zocazou, vaudrait mieux sérier les groupes d'éléments (tel que le menu) et ne pas distribuer des class en veux-tu en voilà zunpeupartout (enfin ... c'est mon point de vue que je partage avec moi-même et dont auquel je suis bien d'accord)
je suis d'accord, d'ailleurs là la classe 'menu' n'était pas utilisée...
mais bon je sais que je dois faire le ménage dans mes classes.
j'ai mis mes essais, pas vraiment concluants, là :
SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:
<ul id="menu">
<li>normal</li>
<li><span>texte:</span><input type=text></li>
<li><span>texte:</span><input type=checkbox></li>
<li><!-- li vide de fin de float--></li>
</ul>
OK, j'avais bien pensé aux <span /> mais je m'y étais mal pris...
#menu { position: relative; width: 125px;
list-style: none; margin: auto; padding: 0;
border: 1px solid; background: #ffc }
#menu li {clear:left; width: 100%; text-align: center;}
#menu li span { float:left; width: 49%; text-align: right }
#menu li input { float: left; width: 45%;
text-align: left; margin-left: 2%; }
#menu li input[type=checkbox] { width: auto }
> une donnée, non négligeable, est que je batis ce menu en js à partir
> d'un fichier "actions.js" du genre :
Ayïe ... si en plus y a des labels ...
non, c'est le texte pour ton exemple...
zocazou, vaudrait mieux sérier les groupes d'éléments (tel que le menu)
et ne pas distribuer des class en veux-tu en voilà zunpeupartout
(enfin ... c'est mon point de vue que je partage avec moi-même et dont
auquel je suis bien d'accord)
je suis d'accord, d'ailleurs là la classe 'menu' n'était pas utilisée...
mais bon je sais que je dois faire le ménage dans mes classes.
j'ai mis mes essais, pas vraiment concluants, là :
<ul id="menu"> <li>normal</li> <li><span>texte:</span><input type=text></li> <li><span>texte:</span><input type=checkbox></li> <li><!-- li vide de fin de float--></li> </ul>
OK, j'avais bien pensé aux <span /> mais je m'y étais mal pris...
#menu { position: relative; width: 125px; list-style: none; margin: auto; padding: 0; border: 1px solid; background: #ffc } #menu li {clear:left; width: 100%; text-align: center;} #menu li span { float:left; width: 49%; text-align: right } #menu li input { float: left; width: 45%; text-align: left; margin-left: 2%; } #menu li input[type=checkbox] { width: auto }
> une donnée, non négligeable, est que je batis ce menu en js à partir > d'un fichier "actions.js" du genre :
Ayïe ... si en plus y a des labels ...
non, c'est le texte pour ton exemple...
zocazou, vaudrait mieux sérier les groupes d'éléments (tel que le menu) et ne pas distribuer des class en veux-tu en voilà zunpeupartout (enfin ... c'est mon point de vue que je partage avec moi-même et dont auquel je suis bien d'accord)
je suis d'accord, d'ailleurs là la classe 'menu' n'était pas utilisée...
mais bon je sais que je dois faire le ménage dans mes classes.
j'ai mis mes essais, pas vraiment concluants, là :
C'est bien la peine de mettre un label si son attribut « for » ne correspond pas à l'attribut « id » du champ de saisie correspondant. Au cas où tu ne le saurais pas, mettre « for="triade_lg" » permettrait de sélectionner ou déselectionner le choix en cliquant sur le label au lieu d'avoir besoin de viser très précisément sur la checkbox. Cela fait aussi partie de l'accessibilité !
C'est bien la peine de mettre un label si son attribut « for » ne
correspond pas à l'attribut « id » du champ de saisie correspondant.
Au cas où tu ne le saurais pas, mettre « for="triade_lg" » permettrait
de sélectionner ou déselectionner le choix en cliquant sur le label
au lieu d'avoir besoin de viser très précisément sur la checkbox.
Cela fait aussi partie de l'accessibilité !
C'est bien la peine de mettre un label si son attribut « for » ne correspond pas à l'attribut « id » du champ de saisie correspondant. Au cas où tu ne le saurais pas, mettre « for="triade_lg" » permettrait de sélectionner ou déselectionner le choix en cliquant sur le label au lieu d'avoir besoin de viser très précisément sur la checkbox. Cela fait aussi partie de l'accessibilité !
C'est bien la peine de mettre un label si son attribut « for » ne correspond pas à l'attribut « id » du champ de saisie correspondant. Au cas où tu ne le saurais pas, mettre « for="triade_lg" » permettrait de sélectionner ou déselectionner le choix en cliquant sur le label au lieu d'avoir besoin de viser très précisément sur la checkbox. Cela fait aussi partie de l'accessibilité !
C'est bien la peine de mettre un label si son attribut « for » ne
correspond pas à l'attribut « id » du champ de saisie correspondant.
Au cas où tu ne le saurais pas, mettre « for="triade_lg" » permettrait
de sélectionner ou déselectionner le choix en cliquant sur le label
au lieu d'avoir besoin de viser très précisément sur la checkbox.
Cela fait aussi partie de l'accessibilité !
C'est bien la peine de mettre un label si son attribut « for » ne correspond pas à l'attribut « id » du champ de saisie correspondant. Au cas où tu ne le saurais pas, mettre « for="triade_lg" » permettrait de sélectionner ou déselectionner le choix en cliquant sur le label au lieu d'avoir besoin de viser très précisément sur la checkbox. Cela fait aussi partie de l'accessibilité !
C'est bien la peine de mettre un label si son attribut « for » ne correspond pas à l'attribut « id » du champ de saisie correspondant.
de ttes façons si c'est pour fonctionner avec Safari, en version 2 il s'en moque complètement de cette accessibilité là.
Oh, c'est dommage. Mais bon, ce sera pour les autres, en attendant que Safari en fasse quelque chose aussi !
<cit.> Quand un élément LABEL reçoit l'attention, celui-ci communique cette attention à la commande qui lui est associée. Voir la section ci-dessous sur les clés d'accès pour des exemples. </cit.>
Le 07/04/2008 03:43, SAM a écrit :
Mais si ! La solution de Léa est la bonne, mais il faut faire un clear:
left avant de passer à la ligne suivante.
Non : il faut faire un clear:left; *pour* passer à la ligne
C'est bien la peine de mettre un label si son attribut « for » ne
correspond pas à l'attribut « id » du champ de saisie correspondant.
de ttes façons si c'est pour fonctionner avec Safari, en version 2 il
s'en moque complètement de cette accessibilité là.
Oh, c'est dommage. Mais bon, ce sera pour les autres, en attendant que
Safari en fasse quelque chose aussi !
<cit.>
Quand un élément LABEL reçoit l'attention, celui-ci communique cette
attention à la commande qui lui est associée. Voir la section ci-dessous
sur les clés d'accès pour des exemples.
</cit.>
C'est bien la peine de mettre un label si son attribut « for » ne correspond pas à l'attribut « id » du champ de saisie correspondant.
de ttes façons si c'est pour fonctionner avec Safari, en version 2 il s'en moque complètement de cette accessibilité là.
Oh, c'est dommage. Mais bon, ce sera pour les autres, en attendant que Safari en fasse quelque chose aussi !
<cit.> Quand un élément LABEL reçoit l'attention, celui-ci communique cette attention à la commande qui lui est associée. Voir la section ci-dessous sur les clés d'accès pour des exemples. </cit.>
unbewusst.sein
Lea GRIS wrote:
Et si tu utilisais des regroupements sémantiques dédiés aux formulaires pour pouvoir mieux les styler ?
c'est fait, merci beaucoup, je ne connaissais pas du tout le tabindex, très pratique...