Wiederholungs-Challenge

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

Aufgabe

Einfach

Nachdem Sie nun verschiedene Positionierungstechniken in CSS gelernt haben, einschließlich relative, absolute, fixed und z-index, ist es an der Zeit, Ihr Wissen mit einer umfassenden Herausforderung auf die Probe zu stellen. Diese Herausforderung wird Ihnen helfen, Ihr Verständnis dafür zu festigen, wie Sie diese Eigenschaften zusammen verwenden, um komplexe und dynamische Layouts zu erstellen. Sie werden das Gelernte über jedes Positionierungsschema anwenden, um ein bestimmtes Design nachzubauen.

Sie erhalten ein HTML-Dokument für die Website eines Pizza-Restaurants. Ihre Aufgabe ist es, die CSS-Positionierungseigenschaften zu verwenden, um die folgenden Elemente zu stylen und ein sauberes und organisiertes Layout zu erstellen.

Folgen Sie den unten stehenden Schritten:

Header-Styling:
- Targeten Sie das <header>-Element.
- Setzen Sie die position auf fixed, damit es am oberen Rand der Seite bleibt.
- Setzen Sie top auf 0, left auf 0 und width auf 100%, um sicherzustellen, dass es die volle Breite der Seite einnimmt.
- Verwenden Sie einen z-index von 10, um sicherzustellen, dass der Header über anderen Elementen auf der Seite liegt.
Styling des Menü-Bereichs:
- Targeten Sie die Klasse .menu.
- Setzen Sie die position auf relative, um eine Positionierung im Verhältnis zu seiner normalen Position im Fluss zu ermöglichen.
Styling der Promotions-Box:
- Targeten Sie die Klasse .promotions.
- Setzen Sie die position auf absolute, um sie relativ zum .menu-Bereich zu platzieren.
- Setzen Sie top auf 100px und right auf 20px, um sie oben rechts im Menü zu positionieren.
- Verwenden Sie einen z-index von 5, um sicherzustellen, dass sie unter dem Header, aber über anderen Inhalten im Menü bleibt.

Spickzettel

CSS-Positionierungseigenschaften ermöglichen es Ihnen, die Platzierung von Elementen zu steuern:

Fixierte Positionierung (Fixed): Das Element bleibt beim Scrollen an seiner Position

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

Relative Positionierung: Das Element wird relativ zu seiner normalen Position positioniert

.menu {
  position: relative;
}

Absolute Positionierung: Das Element wird relativ zu seinem nächsten positionierten Elternelement positioniert

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

Z-Index: Steuert die Stapelreihenfolge positionierter Elemente (höhere Werte erscheinen weiter oben)

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>