Trucsweb.com

Trucsweb.com

HTML

Mise en forme d’un document et compatibilité

RDFFav

Grandeur des éléments d’un formulaire - Comment limiter les dégâts.

Voilà le clou du spectacle, les formulaires. Ce n’est pas simple ajuster un formulaire sur une page web alors imaginez de le faire pour tous les navigateurs quand la grandeur, l’espace et la typographie sont variables. Oublier ça c’est impossible. La seule chose à faire est de limiter les dégâts. Le principe consiste à se baser sur le plus largmarge, marginheight, marginwidth, leftmargin, topmargin, offset, navigateur, canvas, size, text, texte, tracking, leading, photoshop, espace, écran, résolution, fenêtre, form, compatibilité, pixelGrandeur des éléments d’un formulaire - Comment limiter les dégâts.

  • · Niveau : DÉBUTANT
  • · Compatibilité : Tous les navigateurs

Voilà le clou du spectacle, les formulaires. Ce n’est pas simple ajuster un formulaire sur une page web alors imaginez de le faire pour tous les navigateurs quand la grandeur, l’espace et la typographie sont variables. Oublier ça c’est impossible. La seule chose à faire est de limiter les dégâts.

Le principe consiste à se baser sur le plus large formulaire. C’est à dire sur le navigateur qui prend le plus d’espace pour affiche les formulaires. Ainsi, le formulaire vu sur un autre navigateur ne pourra qu’être plus petit. S’il était plus large, il risquerait de massacrer votre design. Car un formulaire, comme une image, déforme votre page jusqu’à ce qu’il entre au complet.

Une chose à ne pas oublier. Le caractère choisi peut faire un vrai ravage si vous n’y faites pas attention. Par exemple, le simple tiret ""-"", souvent utilisé pour séparer les choix d’un menu déroulant, peut prendre jusqu’à deux fois plus d’espace sous Macintosh que sous Windows.

Note : Les formulaires seront traités sans altération par un style ou une police de caractère. Mais je vous invite à travailler sur ce point très attentivement car c’est une bonne solution. En effet, puisque les Navigateurs Netscape (à l’exception de Netscape 6) ne supportent pas le style (CSS) pour un formulaire et que Internet explorer ne supporte pas la balise <FONT> pour le formulaire. Il est possible de jouer avec ces deux techniques pour modifier l’apparence d’un formulaire selon le navigateur.

Pour vous donner une idée de l’étendu des dégâts, télécharger ce fichier Photoshop avec des exemples de formulaire sous différent navigateur. parts.zip. Noter que l’exemple de Webmonkey ne fait aucunement mention du petit détail du tiret. Petit détail qui peut parfois signifier plus de 200 pixels !!

Sélecteur unique rond ???:) (radio buttons)

Très peu d’impact sur le design de vos pages, en fait le texte en a beaucoup plus. La hauteur et la largeur varie de 11 à 12 pixels. L’espace horizontal entre le texte et le sélecteur varie de 5 à 7 pixels, en supposant que le texte est sur la même ligne que le bouton. (certain navigateur ajoute un espace si le code contient un saut de ligne <BR>). Si ça vous cause un problème je vous conseil Autocad ;-)

Boîte de sélection (checkboxes)

Le summum de la compatibilité. Tous les navigateurs utilisent 12 pixels pour afficher une boîte de sélection à l’exception de IE 3.x sous Macintosh qui prend 14 pixels. L’espace horizontal entre le texte et le sélecteur varie de 5 à 7 pixels, en supposant que le texte est sur la même ligne que le bouton. (certain navigateur ajoute un espace si le code contient un saut de ligne <br />).

saisie de texte (une ligne)

Navigateur


hauteur/height


largeur/width
SIZE=20


IE 5.x (Win)

21

152

NN 4.x (Win)

24

169

NN 4.x (Mac)

16

126

IE 4.x (Win)

21

152

IE 4.x (Mac)

15

123

NN 3.x (Win)

24

154

NN 3.x (Mac)

16

126

IE 3.x (Win)

22

119

IE 3.x (Mac)

15

123

Mesures en pixels
Source : Webmonkey

Les valeurs les plus grandes sont affichées en caractère foncé. Votre design doit tenir compte de ces valeurs maximales.
Tester votre page avec Navigator 4.x (Windows).

Saisie de texte (plusieurs lignes)

Navigateur


hauteur/height
(défaut)


hauteur/height
ROWS=2


hauteur/height
ROWS=3


largeur/width
COLS=20



IE 5.x (Win)

37

37

53

181

NN 4.x (Win)

48

64

80

184

NN 4.x (Mac)

38

50

62

150

IE 4.x (Win)

37

37

53

181

IE 4.x (Mac)

54

28

41

139

NN 3.x (Win)

48

64

80

184

NN 3.x (Mac)

38

50

62

150

IE 3.x (Win)

77

51

64

99

IE 3.x (Mac)

15

28

41

123

Mesures en pixels
Webmonkey

Les valeurs les plus grandes sont affichées en caractère foncé. Votre design doit tenir compte de ces valeurs maximales. ROW indique le nombre de lignes de la boîte de saisie. Pour obtenir les valeurs pour plus de ligne, utiliser le même rapport qu’entre ROWS=2 et ROWS=3.
Tester votre page avec Navigator 4.x (Windows). Et toujours définir le nombre de lignes afin de prévoir la hauteur maximale sous IE 3.x (Windows).

Menu déroulant (pull-down menus)

Navigateur


hauteur/height


Relative
largeur/width



Police, size, tracking


IE 5.x (Win)

21

 

Arial 13/0

NN 4.x (Win)

21

 

Arial 13/0

NN 4.x (Mac)

18

 

Times 11.5/10

IE 4.x (Win)

21

 

Arial 13/0

IE 4.x (Mac)

18

 

Charcoal 12/30

NN 3.x (Win)

23

 

Arial 13/0

NN 3.x (Mac)

18

Selon le texte

Times 11.5/10

IE 3.x (Win)

20

 

Arial 13/0

IE 3.x (Mac)

17

 

Times 11.5/10

Mesures en pixels
Source : Webmonkey

Les valeurs les plus grandes sont affichées en caractère foncé. Votre design doit tenir compte de ces valeurs maximales. La largeur du menu dépend du texte le plus large, il n’est donc pas possible de prévoir cette valeur très instable en raison des différences entre polices de caractère. Note: Charcoal est une police que les vieux Mac OS ne reconnaissent pas.
Tester votre page avec Navigator 3.x (Windows et Mac).

Menu déroulant (sélections multiples)

Navigateur


hauteur/height
SIZE=2


hauteur/height
SIZE=3


Relative
largeur/width


Police, size, tracking


IE 5.x (Win)

38

54

 

Arial 13/0

NN 4.x (Win)

38

54

 

Arial 13/0

NN 4.x (Mac)

26

38

Selon le texte

Courier 10.5/-30

IE 4.x (Win)

38

54

 

Arial 13/0

IE 4.x (Mac)

26

38

 

Times 11.5/10

NN 3.x (Win)

38

54

 

Arial 13/0

NN 3.x (Mac)

26

38

Selon le texte

Courier 10.5/-30

IE 3.x (Win)

32

45

 

Arial 13/0

IE 3.x (Mac)

26

38

 

Times 11.5/10

Mesures en pixels
Source : Webmonkey

Les valeurs les plus grandes sont affichées en caractère foncé. Votre design doit tenir compte de ces valeurs maximales. La largeur du menu dépend du texte le plus large, il n’est donc pas possible de prévoir cette valeur très instable. ROW indique le nombre de lignes de la boîte de saisie. Pour obtenir les valeurs pour plus de ligne, utiliser le même rapport qu’entre ROWS=2 et ROWS=3.
Tester votre page avec IE 5.x (Windows) et Navigator 4.x (Mac).

BOUTON ENVOYÉ (SUBMIT BUTTON)

Navigateur


hauteur/height


largeur/width


Police, size, tracking


IE 5.x (Win)

24

61

Arial 13/0

NN 4.x (Win)

23

61

Arial 13/0

NN 4.x (Mac)

20

50

Times 11.5/10

IE 4.x (Win)

24

61

Arial 13/0

IE 4.x (Mac)

20

54

Charcoal 12/30

NN 3.x (Win)

24

61

Arial 13/0

NN 3.x (Mac)

20

50

Times 11.5/10

IE 3.x (Win)

23

72

Arial 13/0

IE 3.x (Mac)

18

54

Charcoal 12/30

Mesures en pixels
Source : Webmonkey

Les valeurs les plus grandes sont affichées en caractère foncé. Votre design doit tenir compte de ces valeurs maximales. La largeur utilisée est celle pour le bouton avec le texte par défaut en anglais. Si vous utilisez un autre texte, la largeur sera différente.

Note: Charcoal est une police que les vieux Mac OS ne reconnaissent pas.
Tester votre page avec IE 5.x (Windows) et IE 3.x (Windows).

» Suite Que supportent les navigateurs

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

       Visites : 4501 - Pages vues : 35926
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@