KoDemi

Proje Detayları

Bu projede, position özelliğini kullanarak bir web sayfası için sabit başlık ve alt bilgi oluşturacaksınız. Bu alıştırma, fixed konumlandırmanın pratik bir uygulamasını gösterecektir.

Proje Adımları:

Bir HTML dosyası oluşturun ve temel yapıyı hazırlayın (başlık, içerik ve alt bilgi bölümleri).
Bir CSS dosyası oluşturun ve HTML dosyasına bağlayın.
Başlık için position: fixed; ve top: 0; değerlerini kullanarak sayfanın üstüne sabitleyin.
Başlığa genişlik, yükseklik, arkaplan rengi ve diğer stilleri ekleyin.
Alt bilgi için position: fixed; ve bottom: 0; değerlerini kullanarak sayfanın altına sabitleyin.
Alt bilgiye genişlik, yükseklik, arkaplan rengi ve diğer stilleri ekleyin.
İçerik bölümüne, başlık ve alt bilginin üzerine binmemesi için üstten ve alttan padding ekleyin.
İçerik bölümüne yeterince içerik ekleyerek sayfanın kaydırılabilir olmasını sağlayın.
Başlık ve alt bilgiye z-index değeri vererek içeriğin üzerinde görünmesini sağlayın.

Başlangıç HTML Kodu:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sabit Başlık ve Alt Bilgi</title>
    <link rel="stylesheet" href="fixed-header-footer.css">
</head>
<body>
    <header class="fixed-header">
        <h1>Sabit Başlık</h1>
        <nav>
            <ul>
                <li><a href="#">Ana Sayfa</a></li>
                <li><a href="#">Hakkımızda</a></li>
                <li><a href="#">Hizmetler</a></li>
                <li><a href="#">İletişim</a></li>
            </ul>
        </nav>
    </header>

    <main class="content">
        <section>
            <h2>Bölüm 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget aliquam nisl nisl eget nisl.</p>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
        
        <section>
            <h2>Bölüm 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget aliquam nisl nisl eget nisl.</p>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
        
        <!-- Daha fazla içerik ekleyin (kaydırma için) -->
        <section>
            <h2>Bölüm 3</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget aliquam nisl nisl eget nisl.</p>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
        
        <section>
            <h2>Bölüm 4</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget aliquam nisl nisl eget nisl.</p>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
    </main>

    <footer class="fixed-footer">
        <p>© 2025 Sabit Başlık ve Alt Bilgi Projesi</p>
    </footer>
</body>
</html>

Bu HTML dosyasını ve boş bir fixed-header-footer.css dosyasını oluşturun, ardından CSS dosyasını yukarıdaki adımlara göre doldurun.