Fixed ve Sticky Footer Nasıl Yapılır?

Adı : Fixed ve Sticky Footer Nasıl Yapılır?

Web tasarımının en önemli bölümlerinden birisi olan footer (alt bilgi) sayfanın alt kısmındaki bölümüdür. Footer, ziyaretçilere daha fazla bilgi sağlamak, önemli sayfaları kısa bir şekilde özetlemek ve marka imajını pekiştirmek için kullanılır. Bugün sizlere web sitelerinde boyutunun ve görüntüsünün sabit kalmış bir alt bilgisi olan fixed ve sticky footer’lar hakkında bilgi vereceğim.

Fixed Footer Nedir?

Fixed footer, web sayfasının en altında sabit tutulabilecek şekilde tasarlanır. Sayfa içerisinde aşağıya kaydırdıkça footer da kaymaz ve sabit kalır. Bu sayede ziyaretçiler her zaman alt kısımdaki bilgilere erişebilirler. Fixed footer’ın kullanımı sitenin durumuna bağlıdır. Eğer sitede sayfanın en altında çok sayıda bilgi, link ve logo var ise fixed footer tercih edilir.

Sticky Footer Nedir?

Sticky footer, web sayfasının en altında sabit tutulabilen, sayfayı aşağıya kaydırdıkça hareket edebilen bir tasarımdır. Ziyaretçi sayfayı aşağıya kaydırdıkça footer da takip eder. Bu sayede ziyaretçiler her zaman alt bilgiye erişebilir. Sticky footer’ın kullanımı, sitenin durumuna bağlıdır. Eğer sitede sayfanın en altında biraz daha az bilgi, link ve logo var ise sticky footer kullanılabilir.

Fixed ve Sticky Footer Nasıl Yapılır?

Fixed footer yapılırken HTML/CSS kullanılır. Aşağıdaki kodları kullanarak kolayca bir fixed footer yapabilirsiniz.

HTML Kodu :

```

```

CSS Kodu :

```
.fixed-footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #333333;
color: #ffffff;
text-align: center;
padding: 10px;
}
```

Sticky footer yapmak için öncelikle 2 div kullanılması gerekiyor. İlk div içerisinde sitenizin ana içeriği yer alırken, ikinci div fixed footer bölümünü temsil eder. Bu sayede sayfayı aşağıya kaydırarak footer’ı hareketli hale getirebilirsiniz. Aşağıdaki kodları kullanarak kolayca bir sticky footer yapabilirsiniz.

HTML Kodu :

```



```

CSS Kodu :

```
.content {
min-height: 100%;
/* Uzun yüksekliğe sahip olacak şekilde genişletin */
margin-bottom: -100px;
/* Footer yüksekliğinden çıkarın */
}

.footer {
height: 100px;
/* Footer’ın yüksekliğini tam olarak belirleyin */
clear:both;
position:relative;
/* Pozisyonu ayarlayın */
margin-top: -100px;
/* Header yüksekliğinden çıkarın */
background-color: #333333;
color: #ffffff;
padding: 10px;
}
```

Sık Sorulan Sorular

1. Fixed ve sticky footer arasındaki fark nedir?
Fixed footer web sayfasının en altında sabit tutulurken, sticky footer sayfayı aşağıya kaydırdıkça hareket eder.

2. Fixed ve sticky footer hangi durumlarda kullanılır?
Fixed footer tercih edilmesinin nedeni sayfanın en altında birçok bilginin yer almasıdır. Sticky footer ise sayfanın en altında çok az bilginin yer alması durumunda daha kullanışlıdır.

3. Footer nasıl tasarlanır?
Footer tasarımının yapılması, sitenin renk düzenine, tasarımına ve ziyaretçilerin ihtiyaçlarına göre belirlenir. Footer’da temel olarak iki bölüm yer alır: bilgi ve linklerle dolu olan kısım ve markanın logolarının yer aldığı kısım."