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