159
Mise en forme des formulaires et des tableaux de données
il.faut.cependant.que.la.balise.em.et.le.champ.de.saisie.qui.la.précède.soient.flottants..Cela.
a.un.effet.sur.le.comportement.du.paragraphe.enclos,.qui.à.son.tour.a.un.effet.sur.la.mise.
en.forme.globale..En.outre,.bien.des.lecteurs.d’écran.ignorent.le.texte.entre.les.éléments.de.
formulaire,.à.moins.qu’il.ne.soit.englobé.dans.une.étiquette..Pour.éviter.ces.problèmes,.la.
meilleure.solution.consiste.à.inclure.le.texte.du.message.d’erreur.dans.l’étiquette.de.formulaire,.puis.à.le.positionner.à.l’aide.des.CSS :

Pour.positionner.l’élément.em.du.message.informatif,.vous.devez.attribuer.la.valeur.relative. à. la. propriété. position. de. tous. les. paragraphes. dans. le. formulaire,. afin. de. fournir. un. nouveau. contexte. de. positionnement..Vous. pouvez. ensuite. positionner. le. message.
de.manière.absolue,.afin.qu’il.apparaisse.à.la.droite.du.champ.de.saisie..Comme.les.étiquettes.font.10 cadratins.de.large.et.que.les.champs.de.saisie.en.font 20,.la.position.gauche.
de. . l’élément.de.message.informatif.peut.être.fixée.à.30 cadratins..
form div {
position: relative;
}
form .feedback {
position: absolute;
left: 30em;
right :0;
top: 0.5em;
}
Malheureusement,.Internet.Explorer.6.et.ses.versions.antérieures.ne.définissent.pas.correctement.la.largeur.du.message.(classe.feedback).en.la.rendant.aussi.petite.que.possible..Pour.
résoudre.ce.problème,.vous.devez.définir.une.largeur.explicite.pour.ce.navigateur..L’une.des.
solutions.consiste.à.utiliser.des.commentaires.conditionnels,.comme.indiqué.au.Chapitre 8 :
form .feedback{
width: 10em;
}
Vous.pouvez.ensuite.appliquer.la.mise.en.forme.de.votre.choix.pour.vos.messages..Ici,.j’ai.
passé.le.texte.en.rouge.et.en.gras,.avec.une.image.d’avertissement.à.gauche.du.message :
form div {
position: relative;
}
.feedback {
position: absolute;
left: 30em;