Pengikut

13 Juli 2006

CSS : Footer should be on Foot

Makanya aneh bila menemukan footer yang bukan pada tempatnya.Kenapa dinamakan bagian footer karena memang dia akan menjadi catatan kaki, bukan catatan samping kan?.Jadi posisinya wajib berada di bagian bawah.Beda template sekalipun pasti menempatkan bagian header dan footer di tempat yang serupa.Berada diatas dan dibawah.

Untuk itu bila menemukan bagian footer yang nempel dibagian sidebar mesti cepat-cepat dilihat bagian CSSnya.Lalu cek silang dengan menggunakan browser yang berbeda.Bisa jadi hasilnya pun berbeda.Bila ini terjadi dipastikan bagian CSSnya perlu dilakukan pembenahan, karena browser memiliki kemampuan yang berbeda dalam memberlakukan CSS yang dibacanya.

Berikut contoh tampilan footer yang nempel pada bagian Sidebar (milik Bebex) bila diakses menggunakan Mozilla Firefox :

CSS :

#footer {
margin: 0 auto;
padding: 0;
width: 780px;
text-align: center;
background: transparent;
font-size: 11px;
color: #FFFFFF;
}

Sedang berikut tampilan normal yang ada di IE :

CSS :

#footer {
clear:both;
margin: 0 auto;
padding:15px 30px 0 50px;
width: 780px;
text-align: center;
background: transparent;
font-size: 11px;
color: #FFFFFF;
}


artinya perlu penambahan tag CSS clear:both; agar turun kebawah dan memberikan space yang lebih lapang untuk bagian footernya.Dengan cara ini, baik di IE maupun Mozilla tampilan footer akan berada pada tempat yang semestinya.Sedangkan perubahan nilai pada padding hanya untuk memberikan sedikit ruang pada footer agar tidak menempel dengan bagian postingan.