ARCHIVÉ - Comment mettre en retrait du texte, des images et des contrôles de formulaires
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 des styles pour faire la mise en retrait parce que l'élément « blockquote » a été proscrit pour la mise en retrait.
2.0 Mise en retrait du texte et des images
2.1 Comment faire la mise en retrait du texte et des images
Voici comment utiliser les styles imbriqués pour faire la mise en retrait de 18 pixels (« indent1 »), de 36 pixels (« indent2 »), de 54 pixels (« indent3 »), de 72 pixels (« indent4 ») ou de 90 pixels (« indent5 ») du texte et des images.
Les classes CSS « indent1 », « indent2 », « indent3 », « indent4 » et « indent5 » 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 :
.indent1{padding-left: 18px;}.indent2{padding-left: 36px;}.indent3{padding-left: 54px;}.indent4{padding-left: 72px;}.indent5{padding-left: 90px;}
Entourez le texte ou les images de l'un des éléments suivants :
<p class="indent1"></p>
(Ne pas utiliser ceci entre les balises<form>et</form>)<div class="indent1"></div>
Vous pouvez utiliser les éléments <h1>, <h2>, <h3>, <h4>, <h5> et <h6> au lieu des éléments <p> et <div>. N'utilisez pas la balise <p> ou </p> entre les balises <form> et </form>. Il y a un bogue dans Netscape 4.x qui cause alors l'arrêt du moteur de formulaires.
2.2 Exemples qui illustrent la façon d'utiliser les styles imbriqués pour la mise en retrait du texte et des images
<p class="indent1">Ce texte a été mis en retrait de 18 pixels en utilisant la balise « p » et le style imbriqué « indent1 ».</p>Ce texte a été mis en retrait de 18 pixels en utilisant la balise
« p »et le style imbriqué «indent1».<p class="indent1"><img src="images/wmms.gif" height="20" width="83" alt="Symbole du gouvernement du Canada" /></p>
<p class="indent2">Ce texte a été mis en retrait de 36 pixels en utilisant la balise « p » et le style imbriqué « indent2 ».</p>Ce texte a été mis en retrait de 36 pixels en utilisant la balise
« p »et le style imbriqué «indent2».<p class="indent2"><img src="images/wmms.gif" height="20" width="83" alt="Symbole du gouvernement du Canada" /></p><div class="indent3">Ce texte a été mis en retrait de 54 pixels en utilisant la balise « div » et le style imbriqué « indent3 ».</div>
Ce texte a été mis en retrait de 54 pixels en utilisant la balise « div » et le style imbriqué «indent3».<div class="indent3"><img src="images/sig_f.gif" height="20" alt="Symbole du gouvernement du Canada" /></div>
2.3 Exemples d'autres styles qui peuvent être utilisés pour la mise en retrait
- Cette classe CSS produit une mise en retrait de 30 pixels à gauche et de 150 pixels à droite.
.leftRightIndent{padding-left: 30px; padding-right: 150px;}Ce texte a été mis en forme à l'aide de la classe «
leftRightIndent». Le texte est mis en retrait de 30 pixels à gauche et de 150 pixels à droite. - Ce style crée une zone avec fond gris qui est mise en retrait de 30 pixels à gauche et avec 5 pixels de remplissage de chaque côté.
.greyBox{width: 80%; margin-left: 30px; padding:5px 5px 5px 5px; background-color: #CCCCCC;}Ce texte a été mis en forme à l'aide de la classe « greyBox ». Il a aussi été mis en retrait de 30 pixels à gauche. La couleur de fond est le gris et il y a 5 pixels de remplissage de chaque côté
3.0 Mise en retrait des contrôles de formulaires
3.1 Comment faire la mise en retrait des contrôles de formulaires
Voici comment utiliser les styles imbriqués pour faire la mise en retrait de 18 pixels (« indent1 »), de 36 pixels (« indent2 »), de 54 pixels (« indent3 »), de 72 pixels (« indent4 ») ou de 90 pixels (« indent5 ») des contrôles de formulaires.
Les classes CSS « indent1 », « indent2 », « indent3 », « indent4 » et « indent5 » 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 :
.indent1{padding-left: 18px;}.indent2{padding-left: 36px;}.indent3{padding-left: 54px;}.indent4{padding-left: 72px;}.indent5{padding-left: 90px;}
Placez ce qui suit avant et après les contrôles de formulaires que vous voulez mettre en retrait <div class="indent1"></div>.
N'utilisez pas la balise <p> ou </p> entre les balises <form> et </form>. Il y a un bogue dans Netscape 4.x qui cause alors l'arrêt du moteur de formulaires.
3.2 Exemples qui illustrent la façon d'utiliser les styles imbriqués pour la mise en retrait des contrôles de formulaires
3.2.1 Zone de texte
<div class="indent1"><label for="email"><strong>Adresse de courriel</strong></label> 
<input name="email" id="email" size="30" maxlength="30" /></div>
3.2.2 Cases à cocher et boutons radio
Il ya des problèmes d'accessibilité avec les boutons de radio. Utilisez plutôt le contrôle de formulaires « select ». Pour en apprendre davantage à ce sujet, lisez Remplacement des boutons radio par des sélections.
<div class="indent1">
<fieldset>
<legend>Couleur préférée</legend>
<input type="checkbox" name="check1" id="check1" value="Red" /><label for="check1">Rouge</label><br />
<label for="check2">Blanc</label><input type="checkbox" name="check2" id="check2" value="White" />
</fieldset>
</div>
3.2.3 Surface de saisie
<div class="indent1"><label for="comments"><strong>Commentaires</strong></label></div>
<textarea name="comments" id="comments" rows="5" cols="30"></textarea></div>
3.2.4 Liste de sélection
<div class="indent1"><label for="prov"><strong>Vous habitez en</strong></label><br />
<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.5 Boutons Soumettre et Reprendre
<div class="indent1"><input type="submit" value="Soumettre" />    <input type="reset" value="Reprendre" /></div>