Pengikut

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.

3 komentar:

  1. Ini terjadi karena kesalahan edit template ato gimana mas Agus. Soalnya biasanya kita kan ambil template dari layanan template gratis atau dari temen. Makasih atas penjelasannya

    BalasHapus
  2. kemungkinan yang biasanya terjadi adalah template yang diluar template yang disediakan blogger hanya berbasis utk kepentingan salah satu browser, maka tak banyak tag CSS yang disertakan.

    BalasHapus
  3. wedeh,,,gara2 postingan begene,,,bex jadi masuk top rating neh ..
    cieeehh even cuma masuk urutan 5,bebex cukup bangga om!
    thanx yeee (piz)

    BalasHapus

Kamu bisa dapetin ilustrasi wajah yang sesuai dengan wajah kamu di moselo.com/Bikingemeys. Jangan lupa ada promo jika pesan dari aplikasinya langsung.

Postingan Populer