OVH Cloud OVH Cloud

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

4 réponses

1 2
Avatar
SAM
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 ?



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
Avatar
unbewusst.sein
SAM 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
Avatar
SAM
Une Bévue a écrit :
SAM 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
Avatar
unbewusst.sein
SAM 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
1 2