ARCHIVÉ - CSS - Solutions de CSS communes

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 Aligner du texte, des images ou des contrôles de formulaires

Voir le document Comment aligner du texte, des images et des contrôles de formulaires.

2.0 Mettre en retrait du texte, des images et des contrôles de formulaires ou mettre du texte dans une boîte sans bordure ayant une couleur de fond sans utiliser un tableau

Voir le document Comment mettre en retrait du texte, des images et des contrôles de formulaires.

3.0 Bouclage de texte autour d'images et de tableaux

Voir le document Bouclage de texte autour d'images et de tableaux.

4.0 Créer une boîte avec une bordure et une couleur de fond sans utiliser un tableau (fonctionne dans tous les navigateurs)

  1. Placez les classes que vous voulez inclure dans un fichier CSS (par exemple, le fichier institution.css du gabarit NSI 2.0 du GC), comme dans l'exemple ci-dessous :

    div.box {background-color: #CC0000; width : 80%; border: 1px solid #000000;}

  2. Votre codage devrait ressembler à l'exemple suivant :

    <div class="box">
    Texte dans une boîte ayant une bordure noire et un fond rouge
    </div>

5.0 Créer un titre avec un lien « Aide » flottant à droite

La classe « CSS floatRight » est déjà définie dans le gabarit NSI 2.0 du GC. Si vous n'utilisez pas le gabarit NSI 2.0 du GC, ca sera nécessaire de définir la classe CSS suivante :

  • .floatRight {float: right;}

Votre codage devrait ressembler à l'exemple suivant :

<p class="floatRight"><a href="...">Aide</a></p><h3>Titre</h3>

6.0 Simuler un tableau à une colonne et à plusieurs lignes avec une couleur de fond et une bordure (fonctionne dans tous les navigateurs)

  1. Placez les classes que vous voulez inclure dans un fichier CSS (par exemple le fichier institution.css du gabarit NSI 2.0 du GC), comme dans l'exemple ci-dessous :

    div.box {background-color: #CC0000; width : 80%; border: 1px solid #000000;}

  2. Votre codage devrait ressembler à l'exemple suivant :

    <div class="box">
    Ligne 1 avec un fond rouge et une bordure noire
    </div>
    <div class="box">
    Ligne 2 avec un fond rouge et une bordure noire
    </div>
    <div class="box">
    Ligne 3 avec un fond rouge et une bordure noire
    </div>

7.0 Simuler un tableau à deux colonnes et à une ligne

  1. Placez les classes que vous voulez inclure dans un fichier CSS (par exemple le fichier institution.css du gabarit NSI 2.0 du GC), comme dans l'exemple ci-dessous :

    div.row {float: left; margin: 0; padding: 0; width: 98.5%;}
    div.cols2 {float: left; width: 49%; margin: 0 3px 0 0; padding: 0;}

  2. Votre codage devrait ressembler à l'exemple suivant :

    <div class="row">
    <div class="cols2">Colonne 1</div>
    <div class="cols2">Colonne 2</div>
    </div>

8.0 Simuler un tableau à deux colonnes et à plusieurs lignes

  1. Placez les classes que vous voulez inclure dans un fichier CSS (par exemple le fichier institution.css du gabarit NSI 2.0 du GC), comme dans l'exemple ci-dessous :

    div.row {float: left; margin: 0; padding: 0; width: 98.5%;}
    div.cols2 {float: left; width: 49%; margin: 0 3px 0 0; padding: 0;}

  2. Votre codage devrait ressembler à l'exemple suivant :

    <div class="row">
    <div class="cols2">Ligne 1 - Colonne 1</div>
    <div class="cols2">Ligne 1 - Colonne 2</div>
    </div>
    <div class="row">
    <div class="cols2">Ligne 2 - Colonne 1</div>
    <div class="cols2">Ligne 2 - Colonne 2</div>
    </div>
    <div class="row">
    <div class="cols2">Ligne 3 - Colonne 1</div>
    <div class="cols2">Ligne 3 - Colonne 2</div>
    </div>

9.0 Simuler un tableau à trois colonnes et à une ligne

  1. Placez les classes que vous voulez inclure dans un fichier CSS (par exemple le fichier institution.css du gabarit NSI 2.0 du GC), comme dans l'exemple ci-dessous :

    div.row {float: left; margin: 0; padding: 0; width: 98.5%;}
    div.cols3 {float: left; width: 32%; margin: 0 3px 0 0; padding: 0;}

  2. Votre codage devrait ressembler à l'exemple suivant :

    <div class="row">
    <div class="cols3">Colonne 1</div>
    <div class="cols3">Colonne 2</div>
    <div class="cols3">Colonne 3</div>
    </div>

10.0 Simuler un tableau à trois colonnes et à plusieurs lignes

  1. Placez les classes que vous voulez inclure dans un fichier CSS (par exemple le fichier institution.css du gabarit NSI 2.0 du GC), comme dans l'exemple ci-dessous :

    div.row {float: left; margin: 0; padding: 0; width: 98.5%;}
    div.cols3 {float: left; width: 32%; margin: 0 3px 0 0; padding: 0;}

  2. Votre codage devrait ressembler à l'exemple suivant :

    <div class="row">
    <div class="cols3">Ligne 1 - Colonne 1</div>
    <div class="cols3">Ligne 1 - Colonne 2</div>
    <div class="cols3">Ligne 1 - Colonne 3</div>
    </div>
    <div class="row">
    <div class="cols3">Ligne 2 - Colonne 1</div>
    <div class="cols3">Ligne 2 - Colonne 2</div>
    <div class="cols3">Ligne 2 - Colonne 3</div>
    </div>
    <div class="row">
    <div class="cols3">Ligne 3 - Colonne 1</div>
    <div class="cols3">Ligne 3 - Colonne 2</div>
    <div class="cols3">Ligne 3 - Colonne 3</div>
    </div>