Exercices de la semaine 4

Exercice 1

1. Créer une page HTML qui contient :

   • 3 blocs div
   • 3 liens cliquables
   • Une liste à puce de 3 items

2. Créer une feuille de styles et appliquer les étapes suivantes :

   1. Appliquer une couleur de fond différente pour chaque type de balise

   2. Visualiser le résultat

      Question : Pourquoi les balises <a> sont les seules qui n'appliquent pas la couleur sur toute la largeure du navigateur ?

   3. Appliquer une largeur de 20% sur chaque type de balise

   4. Visualiser le résultat

      Question : Pourquoi les balises <a> n'ont pas changé de taille ?

   5. Appliquer des marges intérieures (padding) de 4rem à chaque type de balise

   6. Visualiser le résultat

      Question : Pourquoi les balises <a> débordent sur les autres balises ?

   7. Modifier l'affichage (display) des balises <a> et des balises <ul> pour la valeur inline-block

   8. Visualiser le résultat

      Question : Qu'est-ce qui change avec un affichage de type inline-block ?

Solution

HTML

    <div>Sous-titre 1</div>
    <div>Sous-titre 2</div>
    <div>Sous-titre 3</div>

    <a href="#">Lien 1</a>
    <a href="#">Lien 2</a>
    <a href="#">Lien 3</a

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

CSS

div {
    /*Étape 1*/
    background-color: lightgoldenrodyellow;
    /*Étape 2*/
    width: 20%;
    /*Étape 3*/
    padding: 4rem;
}

a {
    /*Étape 1*/
    background-color: aqua;
    /*Étape 2*/
    width: 20%;
    /*Étape 3*/
    padding: 4rem;
    /*Étape 4*/
    display: inline-block;
}

li {
    /*Étape 1*/
    background-color: lightpink;
    /*Étape 2*/
    width: 20%;
    /*Étape 3*/
    padding: 4rem;
}

Questions

1. Car leur type d'affiche par défaut est inline (balise de flux) et ne prend que la largeur nécessaire pour afficher son contenu.
2. Car les balises de type inlinen'ont pas de notion de largeur.
3. Car la taille reconnue d'une balise inlineest la teille nécessaire pour afficher son contenu. L'espace autours n'est pas reconnu comme faisant partie de la balise.
4. Le type inline-block offre les capacité des balises block avec largeurs et marges, tout en permettant l'affichage d'autre contenu côte à côte.

Exercice 2

1. Sur une page HTML, une div

2. Dans la div, créer une div enfant qui contient un titre et un paragraphe

3. À l'aide du CSS, SANS FLEXBOX, faire en sorte que :

   • La div parent ait une image de fond
   • La div parent ait des marges intérieures
   • La div enfant ne prenne que 75% de la div parent
   • La div enfant ait des marges intérieures
   • La div enfant soit centrée en hauteur et largeur
   • La div enfant ait du texte avec un alignement centré
   • La div enfant a une couleur de fond semi transparente

   Exemple :

Solution

<div id="fond">
    <div id="enfant">
        <h2>Exercice 2</h2>
        <p>Positionner une div enfant dans un bloc parent.</p>
    </div>
</div>

#fond {
    background-image: url(../images/banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 5rem;
    align-content: center;
}

#enfant {
    padding: 5rem;
    background-color: rgba(0,0,0,0.8);
    color: white;
    width: 75%;
    margin:auto;
    text-align: center;
}

Exercice 3

1. Sur une page HTML, créer un bloc div

2. Dans le bloc div, créer 3 bloc div enfants

3. Dans chaque bloc enfant, ajouter :

   • une image de petite taille
   • un titre

4. Copier-coller le tout pour avoir 3 fois un bloc parent de 3 blocs enfants.

5. À l'aide du Flexbox, positionner les blocs pour obtenir le résultat suivant :

   

Solution

HTML

<div id="parent1">
    <div>
        <img src="images/ecureuil.png" alt="ecureuil">
        <h2>M. Squirrel</h2>
    </div>
    <div>
        <img src="images/fille.png" alt="fille">
        <h2>Mademoiselle Sourire </h2>
    </div>
    <div>
        <img src="images/monstre.png" alt="monstre">
        <h2>La chose</h2>
    </div>
</div>

<div id="parent2">
    <div>
        <img src="images/ecureuil.png" alt="ecureuil">
        <h2>M. Squirrel</h2>
    </div>
    <div>
        <img src="images/fille.png" alt="fille">
        <h2>Mademoiselle Sourire </h2>
    </div>
    <div>
        <img src="images/monstre.png" alt="monstre">
        <h2>La chose</h2>
    </div>
</div>

<div id="parent3">
    <div>
        <img src="images/ecureuil.png" alt="ecureuil">
        <h2>M. Squirrel</h2>
    </div>
    <div>
        <img src="images/fille.png" alt="fille">
        <h2>Mademoiselle Sourire </h2>
    </div>
    <div>
        <img src="images/monstre.png" alt="monstre">
        <h2>La chose</h2>
    </div>
</div>

CSS

#parent1{
    border: 0.1rem solid blue;
    margin-bottom: 1rem;
    text-align: center;
    display: flex;
    justify-content: center;
}

#parent2 {
    border: 0.1rem solid green;
    margin-bottom: 1rem;
    text-align: center;
    display: flex;
    justify-content: space-between;
}

#parent3 {
    border: 0.1rem solid grey;
    margin-bottom: 1rem;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
}