Défi récapitulatif

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 60 sur 76.

Défi

Facile

Maintenant que vous avez appris diverses techniques de positionnement en CSS, notamment relative, absolute, fixed, et z-index, il est temps de mettre vos connaissances à l'épreuve avec un défi complet. Ce défi vous aidera à consolider votre compréhension de la manière d'utiliser ces propriétés ensemble pour créer des mises en page complexes et dynamiques. Vous appliquerez ce que vous avez appris sur chaque schéma de positionnement pour recréer un design spécifique.

On vous donne un document HTML pour le site Web d'une pizzeria. Votre tâche consiste à utiliser les propriétés de positionnement CSS pour styliser les éléments suivants afin de créer une mise en page propre et organisée.

Suivez les étapes ci-dessous :

Stylisation de l'en-tête (Header) :
- Ciblez l'élément <header>.
- Définissez la position sur fixed pour qu'il reste en haut de la page.
- Définissez top sur 0, left sur 0, et width sur 100% pour vous assurer qu'il occupe toute la largeur de la page.
- Utilisez un z-index de 10 pour vous assurer que l'en-tête se trouve au-dessus des autres éléments de la page.
Stylisation de la section Menu :
- Ciblez la classe .menu.
- Définissez la position sur relative pour lui permettre d'être positionnée par rapport à sa position normale dans le flux.
Stylisation de la boîte de promotions :
- Ciblez la classe .promotions.
- Définissez la position sur absolute pour la placer par rapport à la section .menu.
- Définissez top sur 100px et right sur 20px pour la positionner vers le haut à droite du menu.
- Utilisez un z-index de 5 pour vous assurer qu'elle reste en dessous de l'en-tête mais au-dessus des autres contenus du menu.

Aide-mémoire

Les propriétés de positionnement CSS vous permettent de contrôler le placement des éléments :

Positionnement fixe (fixed) : L'élément reste en place lors du défilement

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

Positionnement relatif (relative) : L'élément est positionné par rapport à sa position normale

.menu {
  position: relative;
}

Positionnement absolu (absolute) : L'élément est positionné par rapport à son parent positionné le plus proche

.promotions {
  position: absolute;
  top: 100px;
  right: 20px;
  z-index: 5;
}

Z-index : Contrôle l'ordre d'empilement des éléments positionnés (les valeurs les plus élevées apparaissent au-dessus)

Essayez vous-même

<html>
<head>
    <title>Pizza Restaurant</title>
    <style>
        /* Fixed Header */
        header {
            background-color: #ff6f61;
            padding: 20px;
            text-align: center;
            font-size: 24px;
            color: white;
        }
        /* Menu Section (Relative) */
        .menu {
            margin-top: 70px; /* Space for fixed header */
            padding: 20px;
            background-color: #f8f8f8;
            font-size: 18px;
        }
        /* Promotions Box (Absolute) */
        .promotions {
            background-color: #ffdf00;
            padding: 10px;
            font-size: 20px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <!-- En-tête fixe -->
    <header>
        Pizza Restaurant
    </header>
    <!-- Section Menu -->
    <div class="menu">
        <h2>Our Menu</h2>
        <ul>
            <li>Margherita</li>
            <li>Pepperoni</li>
            <li>Veggie</li>
            <li>Hawaiian</li>
        </ul>       
        <p>Order now and enjoy!</p>
    </div>
    <!-- Encadré Promotions -->
    <div class="promotions">
        <p>Get 20% off your first order!</p>
    </div>
    <div class="pizza-info">
        <h2>About Pizza</h2>
        <p>Pizza, a dish with origins in Italy, is one of the world's most beloved foods. It was first made in Naples during the 18th century, with the classic Margherita pizza being named after Queen Margherita of Savoy. The traditional pizza is known for its simple ingredients: a thin crust, tomato sauce, mozzarella cheese, and fresh basil.</p>
        <p>Over the years, pizza has evolved into a variety of regional styles, from thin-crust New York-style pizza to deep-dish Chicago pizza. While the toppings have diversified, the tradition of sharing a pizza with family and friends remains an essential part of the pizza experience.</p>
        <p>In Italy, pizza is often enjoyed casually, typically paired with a glass of wine or soda. It is a symbol of Italian culture, and many believe that a good pizza is a representation of the country's culinary expertise and passion for food.</p>
        <p>Pizza's global reach has led to many variations and adaptations in different countries. In Japan, for example, toppings like teriyaki chicken and squid are popular, while in Brazil, green peas and corn are commonly found on pizzas. In the United States, pizza has become a staple of fast food, with different regions offering their unique twists, such as the deep-dish pizza from Chicago and the thin crust of New York City.</p>
    </div>
</body>
</html>