Wiederholungs-Challenge

Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 60 von 76.

Aufgabe

Einfach

Nachdem du verschiedene Positionierungstechniken in CSS kennengelernt hast, einschließlich relative, absolute, fixed und z-index, ist es an der Zeit, dein Wissen mit einer umfassenden Herausforderung auf die Probe zu stellen. Diese Herausforderung hilft dir, dein Verständnis dafür zu festigen, wie du diese Eigenschaften gemeinsam verwendest, um komplexe und dynamische Layouts zu erstellen. Du wirst das Gelernte über die einzelnen Positionierungsschemata anwenden, um ein bestimmtes Design nachzubilden.

Dir wird ein HTML-Dokument für die Website eines Pizza-Restaurants gegeben. Deine Aufgabe ist es, die CSS-Positionierungseigenschaften zu verwenden, um die folgenden Elemente zu gestalten und ein übersichtliches und gut organisiertes Layout zu erstellen.

Führe die folgenden Schritte aus:

Gestaltung des Headers:
- Wähle das <header>-Element aus.
- Setze die position auf fixed, damit der Header oben auf der Seite bleibt.
- Setze top auf 0, left auf 0 und width auf 100%, um sicherzustellen, dass er sich über die gesamte Breite der Seite erstreckt.
- Verwende einen z-index von 10, um sicherzustellen, dass der Header über anderen Elementen auf der Seite liegt.
Gestaltung des Menüabschnitts:
- Wähle die Klasse .menu aus.
- Setze die position auf relative, damit das Element relativ zu seiner normalen Position im Dokumentenfluss positioniert werden kann.
Gestaltung des Angebotsfelds:
- Wähle die Klasse .promotions aus.
- Setze die position auf absolute, um das Element relativ zum Abschnitt .menu zu platzieren.
- Setze top auf 100px und right auf 20px, um es im oberen rechten Bereich des Menüs zu positionieren.
- Verwende einen z-index von 5, um sicherzustellen, dass es unter dem Header, aber über anderen Inhalten im Menü bleibt.

Probier es selbst

<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>
    <!-- Fixierter Header -->
    <header>
        Pizza Restaurant
    </header>
    <!-- Menü-Bereich -->
    <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>
    <!-- Aktions-Box -->
    <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>