Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

alignement dans un li

14 réponses
Avatar
unbewusst.sein
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

10 réponses

1 2
Avatar
Lea GRIS
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&quot; 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
Avatar
SAM
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
Avatar
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
Avatar
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à :

<http://thoraval.yvon.free.fr/Table_layout/test_align.xhtml&gt;

(en attente de ftp free...)
--
Une Bévue
Avatar
unbewusst.sein
Lea GRIS 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&gt;

(en attente de ftp free...)

--
Une Bévue
Avatar
Olivier Miakinen
Le 06/04/2008 21:10, Une Bévue a écrit :
Lea GRIS 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&gt;



<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.01/interact/forms.html#h-17.9

Ce serait peut-être le moment de lire une bonne fois la norme HTML 4.01,
tu ne crois pas ?
Avatar
unbewusst.sein
Olivier Miakinen <om+ 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&gt;

<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.01/interact/forms.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
Avatar
SAM
Olivier Miakinen a écrit :
Le 06/04/2008 21:10, Une Bévue a écrit :
Lea GRIS 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
Avatar
Olivier Miakinen
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.>
Avatar
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...

ma page d'essai avec ton design :

<http://thoraval.yvon.free.fr/Table_layout/test_align.xhtml&gt;

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
1 2