CSS Site Düzeni
Display ve Position kutuların nasıl oturup yığıldığını öğretti. Site düzeni daha büyük soruyu sorar: sayfa bölgeleri — üst bilgi, gezinme, ana hikâye, kenar çubuğu, alt bilgi — bir ekranı nasıl sakin paylaşır? Önce kabuğu çizin; Flexbox ve Grid yakında sütun ustalığını derinleştirecek.
Düzen bölgeleri araç seti
📊 Sayfa bölgeleri bir bakışta
| Bölge | Günlük iş |
|---|---|
| Header | Site kimliği, birincil eylemler, bazen arama |
| Navigation | Önemli bölümlere bağlantılar (çoğunlukla üst bilginin içinde veya altında) |
| Main | Sayfanın konusu olan birincil içerik |
| Aside / sidebar | İlgili bağlantılar, ipuçları, ikincil kartlar |
| Footer | Yasal notlar, ikincil gezinme, iletişim izleri |
| Container | Okunabilir içeriği ortalayan max-width sarmalayıcı |
İyi düzen HTML landmark’larıyla başlar, sonra CSS boşluk ve sütunlar. Her kutuyu position: absolute ile boyamak nadiren ölçeklenir.
Anlamsal sayfa kabuğu
Bölgeleri gerçek öğelerle adlandırın. Sınıflar görünümü inceler; landmark’lar yapıyı okuyucular ve yardımcı teknoloji için dürüst tutar.
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
color: #222;
}
header,
nav,
main,
aside,
footer {
display: block;
}
Ortalanmış max-width kapsayıcı
Uzun satırlar gözü yorar. Okunabilir sütunu max-width ve yatay margin: auto olan bir kapsayıcıya sarın.
.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
Üst bilgi çubuğu temelleri
Üst bilgi çoğu zaman kapsayıcıyı veya tam genişliği kaplar. Boşluğu tutarlı tutun; derin gezinme stilini sonraki derse bırakın.
.site-header {
padding: 1rem 0;
border-bottom: 1px solid #e5e5e5;
background: #fff;
}
.site-header .brand {
font-weight: 700;
font-size: 1.25rem;
}
Basit iki sütun eskizi
Flexbox/Grid derslerine kadar sakin bir float eskizi main + aside gösterebilir. Gerçek sayfa sütunları için sırada Flex/Grid öğrenin — bu bir köprü, sonsuz plan değil.
.layout {
display: flow-root;
}
.layout__main {
float: left;
width: 68%;
}
.layout__aside {
float: right;
width: 28%;
}
Hikâyenin altında alt bilgi
Float sütunlarından sonra alt bilgiyi clear edin ki her iki sütunun altına düşsün. Sonra Flex/Grid düzenleri float clearfix alışkanlığı olmadan sütunları tutacak.
.site-footer {
clear: both;
margin-top: 2rem;
padding: 1.5rem 0;
border-top: 1px solid #eee;
font-size: 0.9rem;
color: #555;
}
Sakin bir düzen alışkanlığı
Önce landmark, sonra kapsayıcı, sonra boşluk. Float’ı yalnızca geçici sütun eskizi olarak kullanın. Gelecek modüllerde dayanıklı sayfa yapısı için Flexbox ve Grid’e gidin — absolute yığınları veya sonsuz float ızgaraları değil.
.page {
min-height: 100vh;
}
.page__header { /* identity + nav hook */ }
.page__main { /* primary story */ }
.page__aside { /* secondary column */ }
.page__footer { /* closing chrome */ }
Kendiniz deneyin
- Landmark kabuğu kurun: header, nav, main, aside, footer.
- İçeriği max-width ve ortalanmış kenar boşluklu
.containerile sarın. - Padding ve alt kenarlıklı basit bir üst bilgi çubuğu stillendirin.
- Float genişlikleriyle main + aside eskizleyin, sonra footer’ı clear edin.
- Bir cümle yazın: Flex/Grid bu float eskizinin yerini neden alacak?
Yaygın hatalar
- Sayfanın her sütununu absolute konumlandırmak
- max-width olmadan metni tüm viewport genişliğinde bırakmak
- Adsız div yığınları için anlamsal landmark’ları atlamak
- Bu dersi object-fit gibi görmek (medya çerçeveleri, sayfa bölgeleri değil)
- Sıradaki Flex/Grid’i öğrenmek yerine sonsuz float sayfa ızgaraları göndermek
Özet
- Site düzeni, bir ekranı paylaşan sayfa bölgeleri hakkındadır
- Anlamsal landmark’lar artı ortalanmış max-width kapsayıcı kullanın
- Float main/aside eskizi sütunları kısaca gösterebilir
- Float’ların altında footer’ı clear edin; yapı için yakında Flex/Grid tercih edin
- Layout ≠ object-fit — bölgeler karşısında kutuda medya sığdırma
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek