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();'},
[...]

zocazou...
--
Une Bévue

Une Bévue a écrit :
> 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 ?

form label {
display: block;
float: left;
width: 10em;
padding: 0;
margin: 1em 0 0;
text-align: right;
}

<form action="http://www.example.com/submit.cgi" method="post" name="f">
<fieldset>
<legend>Li Normal</legend>>
<label for="hie" accesskey="h">Hue: </label>
<input type="text" id="hue" name="hue" value="" tabindex="1">
<label for="angle" accesskey="a">Angle: </label>
<input type="text" id="angle" name="angle" tabbindex="2">
<label for="triade" accesskey="e">Triade: </label>
<input type="checkbox" id="triade" name="triade" tabindex="3">
</fieldset>
</form>


--
Léa Gris

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 :

Ayïe ... si en plus y a des labels ...


> [...]
> {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();'},
> [...]
>
> zocazou...

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

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 ?

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 ?

pas évident de faire en sorte que ça ressemble à ce que je souhaite...

<http://thoraval.yvon.free.fr/Table_layout/test_align.xhtml>

(en attente de ftp free...)

--
Une Bévue

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à :

<http://thoraval.yvon.free.fr/Table_layout/test_align.xhtml>

(en attente de ftp free...)
--
Une Bévue

Le 06/04/2008 21:10, Une Bévue a écrit :
> 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 ?
>
> pas évident de faire en sorte que ça ressemble à ce que je souhaite...

Mais si ! La solution de Léa est la bonne, mais il faut faire un clear:
left avant de passer à la ligne suivante.

> <http://thoraval.yvon.free.fr/Table_layout/test_align.xhtml>

<cit.>
<label for="triade" accesskey="e">Triade: </label>
<input type="checkbox" id="triade_lg" name="triade" tabindex="3"/>
</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.
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é !

http://www.la-grange.net/w3c/html4.0...ms.html#h-17.9

Ce serait peut-être le moment de lire une bonne fois la norme HTML 4.01,
tu ne crois pas ?

Olivier Miakinen <om+news@miakinen.net> wrote:

> > pas évident de faire en sorte que ça ressemble à ce que je souhaite...
>
> Mais si ! La solution de Léa est la bonne, mais il faut faire un clear:
> left avant de passer à la ligne suivante.
>
> > <http://thoraval.yvon.free.fr/Table_layout/test_align.xhtml>
>
> <cit.>
> <label for="triade" accesskey="e">Triade: </label>
> <input type="checkbox" id="triade_lg" name="triade" tabindex="3"/>
> </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.
> 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é !
>
> http://www.la-grange.net/w3c/html4.0...ms.html#h-17.9
>
> Ce serait peut-être le moment de lire une bonne fois la norme HTML 4.01,
> tu ne crois pas ?

je me suis bien douté du pb (for versus id/name)...

mais ce n'était pas le problème posé....

--
Une Bévue

Olivier Miakinen a écrit :
> Le 06/04/2008 21:10, Une Bévue a écrit :
>> 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 ?
>> pas évident de faire en sorte que ça ressemble à ce que je souhaite...
>
> 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

label { clear: left; float: left; width: 50% }
input { float: left; width: 30% }

input[type=checkbox] { width: auto }

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

--
sm

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
>
> label { clear: left; float: left; width: 50% }
> input { float: left; width: 30% }
>
> input[type=checkbox] { width: auto }

Voui.

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

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 ?

c'est fait, merci beaucoup, je ne connaissais pas du tout le tabindex,
très pratique...

ma page d'essai avec ton design :

<http://thoraval.yvon.free.fr/Table_layout/test_align.xhtml>

dans le menu, à droite, sous "Actions" il y a la même form qui apparaît
mais créee par JS (but de la manip).
--
Une Bévue

Une Bévue a écrit :
> 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 ?
>
> ma page d'essai avec ton design :
>
> <http://thoraval.yvon.free.fr/Table_layout/test_align.xhtml>
>
> dans le menu, à droite, sous "Actions" il y a la même form qui apparaît
> mais créee par JS (but de la manip).

Je sais bien que Safari s'en moque mais je t'assure qu'il faut
#menu input[type=checkbox] { width: auto }
sinon elle est toute déformée dans Firefox

SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

> #menu input[type=checkbox] { width: auto }

je viens juste de tester avec FF 2.0.0.13 que je mette ça où pas:

form#menu_lg inputinput[type=checkbox], #menu input[type=checkbox] {
width: auto }

, ne change rien...
(Mac OS X 10.4.11) PPC...

toi tu as un Intel non ?
pas exactement les mêmes versions ???


--
Une Bévue

Une Bévue a écrit :
> SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:
>
>> #menu input[type=checkbox] { width: auto }
>
> je viens juste de tester avec FF 2.0.0.13 que je mette ça où pas:
>
> form#menu_lg inputinput[type=checkbox], #menu input[type=checkbox] {
> width: auto }
>
> , ne change rien...
> (Mac OS X 10.4.11) PPC...
>
> toi tu as un Intel non ?
> pas exactement les mêmes versions ???

tu crois ?
c'est Fx pareil, non ?

La règle css :
<http://www.yoyodesign.org/doc/w3c/css2/selector.html#attribute-selectors>

Mais tu as raison ça ne risque pas de changer quoi que ce soit avec :

form#menu_lg inputinput[type=checkbox],
/* ^^^^^^^^^^ */
#menu input[type=checkbox] { width: auto }

où 'inputinput' n'existe pas dans le form 'menu_lg'
et où le div 'menu' n'existe pas non plus

--
sm

SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

> tu crois ?
> c'est Fx pareil, non ?
>
> La règle css :
> <http://www.yoyodesign.org/doc/w3c/css2/selector.html#attribute-selectors>


j'y suis ! je ne connaissais pas cette règle "sélecteurs d'attribut".


je pense qu'il est temps, pour moi, de ré-apprendre les css...

mais je n'ai pas trouvé de tuto pour >faux< débutant...


> Mais tu as raison ça ne risque pas de changer quoi que ce soit avec :
>
> form#menu_lg inputinput[type=checkbox],
> /* ^^^^^^^^^^ */
> #menu input[type=checkbox] { width: auto }
>
> où 'inputinput' n'existe pas dans le form 'menu_lg'
> et où le div 'menu' n'existe pas non plus

oui, merci, ça j'ai vu O:[, ma bévue...

mais je pense l'avoir déja rectifié ?

--
Une Bévue