Özet Meydan Okuması

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 60 / 76.

Görev

Kolay

CSS'te relative, absolute, fixed ve z-index dahil olmak üzere çeşitli konumlandırma tekniklerini öğrendiğinize göre, artık bilginizi kapsamlı bir meydan okuma ile test etme zamanı geldi. Bu meydan okuma, karmaşık ve dinamik düzenler oluşturmak için bu özellikleri birlikte nasıl kullanacağınız konusundaki anlayışınızı pekiştirmenize yardımcı olacaktır. Belirli bir tasarımı yeniden oluşturmak için her bir konumlandırma şeması hakkında öğrendiklerinizi uygulayacaksınız.

Size bir pizza restoranı web sitesi için bir HTML belgesi verilmiştir. Göreviniz, temiz ve düzenli bir yerleşim oluşturmak amacıyla aşağıdaki öğeleri stillendirmek için CSS konumlandırma özelliklerini kullanmaktır.

Aşağıdaki adımları izleyin:

Üst Bilgi (Header) Stilini Ayarlama:
- <header> öğesini hedefleyin.
- Sayfanın üstünde kalması için position değerini fixed olarak ayarlayın.
- Sayfanın tam genişliğini kaplamasını sağlamak için top değerini 0, left değerini 0 ve width değerini 100% olarak ayarlayın.
- Üst bilginin sayfadaki diğer öğelerin üzerinde olduğundan emin olmak için 10 değerinde bir z-index kullanın.
Menü Bölümü Stilini Ayarlama:
- .menu sınıfını hedefleyin.
- Akış içindeki normal konumuna göre konumlandırılmasına izin vermek için position değerini relative olarak ayarlayın.
Promosyon Kutusu Stilini Ayarlama:
- .promotions sınıfını hedefleyin.
- .menu bölümüne göre yerleştirmek için position değerini absolute olarak ayarlayın.
- Menünün sağ üst tarafına doğru konumlandırmak için top değerini 100px ve right değerini 20px olarak ayarlayın.
- Üst bilginin altında ancak menüdeki diğer içeriğin üzerinde kaldığından emin olmak için 5 değerinde bir z-index kullanın.

Kopya kağıdı

CSS konumlandırma özellikleri, öğe yerleşimini kontrol etmenizi sağlar:

Sabit konumlandırma: Öğe, kaydırma sırasında yerinde kalır

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

Göreceli konumlandırma: Öğe, normal konumuna göre konumlandırılır

.menu {
  position: relative;
}

Mutlak konumlandırma: Öğe, en yakın konumlandırılmış üst öğesine göre konumlandırılır

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

Z-index: Konumlandırılmış öğelerin yığın sırasını kontrol eder (daha yüksek değerler üstte görünür)

Kendin dene

<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>
    <!-- Sabit Başlık -->
    <header>
        Pizza Restaurant
    </header>
    <!-- Menü Bölümü -->
    <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>
    <!-- Promosyonlar Kutusu -->
    <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>