28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous !

Je n'arrive pas à aligner deux labels dans mon formulaire. upload/13349-img1.JPG

En fait l'utlisation est la suivante :

Ce formulaire s'affiche dans deux modes de lecture : en modification ou en lecture seule. Lorsque il est en modification, j'affiche un label avec un input a côté. Ici l'alignement s'effectue correctement. Cependant, lorsque le formulaire s'ouvre en mode Lecture seule, un label prend la place de l'input et affiche la valeur. Et là s'introduit le petit bug d'affichage.

voici le code
form .lib {float: left; width : 200px; padding: 0;margin: 5px 5px 0; text-align:left; }
form .libRO {text-align : left; width : 150px;font-size: 9pt; text-align:left; background-color : #cccccc;}


la classe lib pour l'étiquette de l'input et la classe libRO pour le label qui affiche la valeur en lecture seule.

Je pense que ça ne doit pas être très compliqué.... mais jtrouve pas ! et en plus je me pose la question si je devrais faire un label, n'étant pas son vrai rôle dans un formulaire, peut-etre vaut il mieux utiliser une balise <p> ??? et dans ce cas là l'affichage s'adapterait mieux ??

Qu'en pensez vous ?

Merci d'avance
Arnaud
Modifié par arno83 (07 Aug 2007 - 16:57)
Bonjour,

arno83 a écrit :
Ce formulaire s'affiche dans deux modes de lecture : en modification ou en lecture seule.

En mode lecture seule, ça reste un formulaire (élément interactif de la page, que l'utilisateur peut valider pour envoyer des informations à un script qui traitera les dites informations), ou bien c'est juste de l'affichage d'information? Si c'est juste de l'affichage d'information, on n'utilise pas de form, pas de label, pas de input, ni aucun autre élément de formulaire (vu qu'il ne s'agit alors pas d'un formulaire).

arno83 a écrit :
Lorsque il est en modification, j'affiche un label avec un input a côté.

Très bien. Penser à utiliser des labels explicites (avec attribut for), pour faire les choses bien. Smiley smile

arno83 a écrit :
Cependant, lorsque le formulaire s'ouvre en mode Lecture seule, un label prend la place de l'input et affiche la valeur.

Tiens, c'est la première fois que je croise cette bêtise de codage là. +10 points pour l'originalité de la trouvaille. Smiley lol

Plus sérieusement, on va procéder comme avec toutes les bêtises: on efface et on oublie. Smiley smile

Pour afficher de l'information avec un intitulé et une valeur, on peut faire ceci:
<p>Intitulé: valeur</p>

Si besoin de mise en page, on peut même pousser le vice jusqu'à faire ceci:
<p><span class="intitule">Intitulé:</span> <span class="valeur">valeur</span></p>

Et si on en a toute une série, un petit tableau à deux colonnes peut être sympathique (mais une successsion de paragraphes sur le modèle ci-dessus va très bien aussi).

Au passage, un peu d'information sur l'élément label si gentiment malmené. Smiley cligne
http://www.la-grange.net/w3c/html4.01/interact/forms.html#edef-LABEL
Salut,

Merci pour ton aide, je pensais pas malmené à ce point là ce pauvre label... Smiley smile

Pour me justifier un peu quand même... j'utilisais le label car je développe en java une librairie de tag client, et j'avais déjà implémenter le tag label. Dans mon programme je n'avais plus qu'a creer une instance de ma classe label lorsque j'étais en lecture seule pour afficher ma valeur. J'ai autour de cette classe label, quelques facilités de mise en form de mon tag (ajout d'un style css, taille, etc etc...). Voilà pourquoi mon idée certes un peu tordu, mais plus facile pour moi, de mettre un label pour simplement afficher une valeur

Bon je vais essayer d'implémenter autre chose, surement une balise <p> et je vous tiens au courant

Merci !!

Arnaud
Voilà c'est fait !

j'ai donc remplacé les incohérences, utilisé des <p> et des <span> et bien evidement tout est rentré dans l'ordre !

Merci a tous
Arnaud