ARCHIVÉ - Comment aligner du texte, des images et des contrôles de formulaires

Avertissement Cette information est archivée parce qu'elle est désuete et n'est plus pertinente.

Contenu archivé

Information archivée dans le Web à des fins de consultation, de recherche ou de tenue de documents. Cette dernière n’a aucunement été modifiée ni mise à jour depuis sa date de mise en archive. Les pages archivées dans le Web ne sont pas assujetties aux normes qui s’appliquent aux sites Web du gouvernement du Canada. Conformément à la Politique de communication du gouvernement du Canada, vous pouvez obtenir cette information dans un autre format en communiquant avec nous.

Table des matières

1.0 Introduction

Il est important d'utiliser les styles imbriqués pour l'alignement étant donné que l'élément « center » et l'attribut « align » sont dépréciés (sauf s'ils sont utilisés dans les éléments « td » et « th »).

2.0 Alignement du texte et des images

Le texte et les images peuvent être alignés à gauche, à droite ou au centre.

2.1 Comment aligner du texte et des images à l'aide de styles imbriqués

Les classes « CSS alignCenter », « alignLeft » et « alignRight » sont déjà définies dans le modèle de page NSI 2.0 du GC. Si vous n'utilisez pas le modèle de page NSI 2.0 du GC, il sera nécessaire de définir les classes CSS suivantes :

  • .alignCenter{text-align: center;}
  • .alignLeft{text-align: left;}
  • .alignRight{text-align: right;}

Placez l'un des huit codes ci-dessous avant et après le texte ou les images :

  • <p class="alignCenter"></p>
    (N'utilisez pas ce code entre les balises <form> et </form>)
  • <div class="alignCenter"></div>
  • <h1 class="alignCenter"></h1>
  • <h2 class="alignCenter"></h2>
  • <h3 class="alignCenter"></h3>
  • <h4 class="alignCenter"></h4>
  • <h5 class="alignCenter"></h5>
  • <h6 class="alignCenter"></h6>

Pour aligner le contenu à gauche ou à droite, utilisez « alignLeft » ou « alignRight » au lieu de « alignCenter ».

Veuillez ne pas utiliser la balise <p> ou </p> entre les balises <form> et </form>. Il y a un bogue dans Netscape 4.x qui cause l'arrêt du moteur de formulaires.

2.2 Des exemples de comment aligner du texte et des images

  1. <p class="alignCenter">Ce texte est centré.</p>

    Ce texte est centré.

  2. <div class="alignRight">Ce texte est aligné à droite.</div>

    Ce texte est aligné à droite.

  3. <p class="alignCenter"><img src="images/wmms.gif" height="20" width="83" alt="Symbole du gouvernement du Canada" /></p>

    Symbole du gouvernement du Canada

  4. <div class="alignRight"><img src="images/wmms.gif" height="20" width="83" alt="Symbole du gouvernement du Canada" /></div>
    Symbole du gouvernement du Canada

3.0 Alignement des contrôles de formulaires

L'alignement des contrôles est presque identique à celui du texte et des images, sauf que :

  • les contrôles de formulaires doivent être alignés à l'aide de l'élément « div » (l'élément « p » cause des problèmes dans Netscape 4.x);
  • les libellés associés aux contrôles de formulaires doivent être alignés à gauche lorsqu'ils se trouvent dans un élément « div » qui utilise un style pour l'alignement (pour contourner un bogue dans Netscape 6.0).

3.1 Comment aligner des contrôles de formulaires à l'aide de styles imbriqués

Veuillez ne pas utiliser la balise <p> ou </p> entre les balises <form> et </form>. Il y a un bogue dans Netscape 4.x qui cause l'arrêt du moteur de formulaires.

3.2 Des exemples de comment aligner des contrôles de formulaires

3.2.1 Comment aligner verticalement le libellé avec le contrôle de formulaires

Pour aligner verticalement le libellé avec le contrôle de formulaires, utilisez « alignTop » ou « alignBottom » avec le libellé. Si le contrôle de formulaires sera aligné horizontalement, utilisez la classe « CSS alignTopLeft » ou « alignBottomLeft » avec le libellé.

Les classes CSS « alignTop », « alignBottom », « alignTopLeft » et « alignBottomLeft » sont déjà définies dans le modèle de page NSI 2.0 du GC. Si vous n'utilisez pas le modèle de page NSI 2.0 du GC, il sera nécessaire de définir les classes CSS suivantes :

  • .alignTop{vertical-align: top;}
  • .alignBottom{vertical-align: bottom;}
  • .alignTopLeft{text-align: left; vertical-align: top;}
  • .alignBottomLeft{text-align: left; vertical-align: bottom;}

Nota : Les classes « CSS alignTop » et « alignTopLeft » aligneront verticalement le libellé avec le sommet du contrôle de formulaires. Les classes « CSS alignBottom » et « alignBottomLeft » aligneront le libellé avec le fond (par défaut) du contrôle de formulaires.

<div>
<label class="alignTopLeft" for="comments4">
<strong>Commentaires</strong></label>&#160;
<textarea name="comments4" id="comments4" rows="5" cols="30">
</textarea>
</div>

 
Haut de la page

3.2.2 Comment aligner horizontalement des contrôles de formulaires

Les classes « CSS alignCenter », « alignLeft », « alignRight », « alignTopLeft » et « alignBottomLeft » sont déjà définies dans le modèle de page NSI 2.0 du GC. Si vous n'utilisez pas le modèle de page NSI 2.0 du GC, il sera nécessaire de définir les classes CSS suivantes :

  • .alignCenter{text-align: center;}
  • .alignLeft{text-align: left;}
  • .alignRight{text-align: right;}
  • .alignTopLeft{text-align: left; vertical-align: top;}
  • .alignBottomLeft{text-align: left; vertical-align: bottom;}

Placez <div class="alignCenter"></div> avant et après les contrôles.

Pour aligner un contrôle à gauche ou à droite, utilisez « alignLeft » ou « alignRight » au lieu de « alignCenter ».

Le libellé associé à ce contrôle doit utiliser la classe « alignLeft », comme dans l'exemple ci-dessous :

<div class="alignCenter"><label class="alignLeft" for="email3">
<strong>Adresse de courriel</strong></label>&#160;
<input name="email3" id="email2" size="30" maxlength="30" /></div>

Nota : La classe « CSS alignTopLeft » alignera verticalement le libellé avec le sommet du contrôle de formulaires. La classe « CSS alignBottomLeft » alignera verticalement le libellé avec le fond (par défaut) du contrôle de formulaires.

3.2.2.1 Zone de texte (lignes différentes)

<div class="alignCenter"><label class="alignTopLeft" for="email">
<strong>Adresse de courriel</strong></label></div>
<div class="alignCenter"><input name="email" id="email" size="30" maxlength="30" /></div>

3.2.2.2 Zone de texte (même ligne)

<div class="alignCenter"><label class="alignTopLeft" for="email2"><strong>Adresse de courriel</strong></label>&#160;
<input name="email2" id="email2" size="30" maxlength="30" /></div>

 
3.2.2.3 Cases à cocher et boutons radio

Il ya des problèmes d'accessibilité avec les boutons de radio. Utilisez plutôt le contrôle de formulaire « select ». Pour en apprendre davantage à ce sujet, lisez Remplacement des boutons radio par des sélections.

<div class="alignCenter">
<fieldset>
<legend>Couleur préférée</legend>
<input type="checkbox" name="check1" id="check1" value="Red" />
<label class="alignTopLeft" for="check1">Rouge</label><br />
<label class="alignTopLeft" for="check2">Blanc</label>
<input type="checkbox" name="check2" id="check2" value="White" />
</fieldset>
</div>

Couleur préférée
3.2.2.4 Surface de saisie (lignes différentes)

<div class="alignCenter">
<label class="alignTopLeft" for="comments">
<strong>Commentaires</strong></label></div>
<div class="alignCenter">
<textarea name="comments" id="comments" rows="5" cols="30"></textarea></div>

3.2.2.5 Surface de saisie (même ligne)

<div class="alignCenter">
<label class="alignTopLeft" for="comments2">
<strong>Commentaires</strong></label>&#160;
<textarea name="comments2" id="comments2" rows="5" cols="30"></textarea></div>

 
3.2.2.6 Liste de sélection (lignes différentes)

<div class="alignCenter">
<label class="alignTopLeft" for="prov">
<strong>Vous habitez en</strong></label></div>
<div class="alignCenter"><select name="prov" id="prov">
<option value="" selected="selected"></option>
<option value="AB">Alberta</option>
<option value="BC">Colombie-Britannique</option>
<option value="MB">Manitoba</option>
<option value="Other">Autre</option>
</select></div>

3.2.2.7 Liste de sélection (même ligne)

<div class="alignCenter">
<label class="alignTopLeft" for="prov2">
<strong>Vous habitez en</strong></label>
<select name="prov2" id="prov2">
<option value="" selected="selected"></option>
<option value="AB">Alberta</option>
<option value="BC">Colombie-Britannique</option>
<option value="MB">Manitoba</option>
<option value="Other">Autre</option>
</select></div>

3.2.2.8 Boutons Soumettre et Reprendre

<div class="alignCenter">
<input type="submit" value="Soumettre" />
&#160;&#160;&#160;&#160;
<input type="reset" value="Reprendre" /></div>