alignement dans un li

Le
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
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Lea GRIS
Le #22078191
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;
}

<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
SAM
Le #22078181
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
unbewusst.sein
Le #22078171
Lea GRIS

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
Le #22078151
SAM

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


(en attente de ftp free...)
--
Une Bévue
unbewusst.sein
Le #22078161
Lea GRIS

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


(en attente de ftp free...)

--
Une Bévue
Olivier Miakinen
Le #22078141
Le 06/04/2008 21:10, Une Bévue a écrit :
Lea GRIS

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.




<label for="triade" accesskey="e">Triade: </label>
<input type="checkbox" id="triade_lg" name="triade" tabindex="3"/>

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 ?
unbewusst.sein
Le #22078131
Olivier Miakinen
> 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.

>
<label for="triade" accesskey="e">Triade: </label>
<input type="checkbox" id="triade_lg" name="triade" tabindex="3"/>

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
SAM
Le #22078121
Olivier Miakinen a écrit :
Le 06/04/2008 21:10, Une Bévue a écrit :
Lea GRIS
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
Olivier Miakinen
Le #22078111
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 !

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.
unbewusst.sein
Le #22078011
Lea GRIS

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 :


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
Publicité
Poster une réponse
Anonyme