Membuat header tetap diatas halaman

Membuat header fixed

Banyak variasi tampilan header atau footer yang digunakan untuk menghiasi halaman web dan dapat kita temukan diinternet, mulai dari yang sekedar tulisan judul, gambar logo sampai dengan model otomatis muncul dan hilang. Pada tulisan berikut ini, saya akan berbagi trick cara membuat header dan footer yang tetap diatas dan dibawah bagian halaman.

Seperti contoh bentuk header yang saya gunakan pada desain blog ini. Saya meletakkan logo serta menu yang dapat diakses kapan saja dengan penempatan posisi paling atas.

Untuk membuat header seperti ini, saya menggunakan css yang mengatur penempatan elemen div dengan nama header pada posisi fixed bagian atas / top dan elemen div dengan nama footer pada posisi bawah.

Perintah html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contoh header tetap diatas halaman</title>
</head>
<body>
<div id="body">
<div id="header">
  <h1>Contoh Header Fixed</h1>
</div>
<div id="konten">
<p>Baris Atas</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>Baris bawah</p>
</div>
<div id="footer">Dibuat oleh zainalhakim.web.id</div>
</div>
</body>
</html>

Hasil sementara seperti gambar berikut :

 header diatas halaman

Kemudian kita harus menyisipkan cssnya pada bagian <head>.....</head>

Perintah css

<style type="text/css">
#body {
    margin:auto;
    width:800px;
    border:1px solid #ccc;
}
#header{
    bottom: auto;
    position: fixed;
    top: 0;
    z-index: 100;
    height:80px;
    background-color:#ccc;
    width:780px;
    -webkit-box-shadow: #666 1px 1px 2px;
    -moz-box-shadow: #666 1px 1px 2px;
    box-shadow:     #666 1px 1px 2px;
    padding:10px;
}
#footer {
    background-color: #383838;
    border-top: 1px solid #ccc;
    bottom: 0;
    color: #ffffff;
    height: 20px;
    padding: 10px;
    position: fixed;
    top: auto;
    width: 780px;
    z-index: 101;
    text-align:center;
}
#konten {
    padding:5px;
    margin-top:80px;
    margin-bottom:35px;
}
</style>

Hasil Akhir

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contoh header tetap diatas halaman</title>
<style type="text/css">
#body {
    margin:auto;
    width:800px;
    border:1px solid #ccc;
}
#header{
    bottom: auto;
    position: fixed;
    top: 0;
    z-index: 100;
    height:80px;
    background-color:#ccc;
    width:780px;
    -webkit-box-shadow: #666 1px 1px 2px;
    -moz-box-shadow: #666 1px 1px 2px;
    box-shadow:     #666 1px 1px 2px;
    padding:10px;
}
#footer {
    background-color: #383838;
    border-top: 1px solid #ccc;
    bottom: 0;
    color: #ffffff;
    height: 20px;
    padding: 10px;
    position: fixed;
    top: auto;
    width: 780px;
    z-index: 101;
    text-align:center;
}
#konten {
    padding:5px;
    margin-top:80px;
    margin-bottom:35px;
}
</style>
</head>
<body>
<div id="body">
<div id="header">
  <h1>Contoh Header Fixed</h1>
</div>
<div id="konten">
<p>Baris Atas</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>Baris bawah</p>
</div>
<div id="footer">Dibuat oleh zainalhakim.web.id</div>
</div>
</body>
</html>

Bentuk tampilan akhirnya bisa anda lihat demo header tetap berikut.

Anda bisa kembangkan untuk keperluan menu bar yang selalu tampil dibagian atas atau untuk keperluan lainnya.

Semoga Bermanfaat

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Membuat menu dengan CSS
    Membuat menu unik dengan mengunakan HTML + CSS. CSS menurut saya sebuah teknologi yang powerfull dalam menyusun tampilan sebuah web atau blog. Ini dibuktikan sekarang css terus dikembangkan dan digunakan hampir 99% pengembang web, yang 1% nya mungkin masih dalam tahap belajar.
  • Membuat menu dropdown dengan css
    Membuat dropdown menu dengan css. Banyak sekali variasi menu web/blog yang bisa dibuat dengan css, ada bentuk menu tulisan maupun gambar biasa, dan ada juga bentuk-bentuk menu dropdown/menu bercabang secara horizontal atau vertikal. Pembuatanya juga bervariasi, ada yang menggunakan javascript, ada juga menggunakan jquery, bahkan ada yang membuat menu dari flash. Pada tulisan ini anda akan mengetahui bagaimana cara membuat menu dropdown horizontal murni dibuat dengan css. Silahkan anda simak.
  • Apa css sprite dan bagaimana membuatnya
    CSS sprite adalah sebuah teknik menampilkan gambar di halaman web atau blog dengan cara mengkombinasikan beberapa gambar dalam satu file dan kemudian memanggilnya melalui css dengan cara menuliskan posisi titik x dan titik y
  • Membuat bingkai gambar dengan css
    Kemampuan css dalam memperindah tampilan sudah tidak diragukan lagi, apalagi dengan hadirnya css3 sebagai pengembangan dari versi sebelumnya memang menambah kemampuan serta fleksibilitasnya dalam urusan pengaturan tampilan halaman web. Kali ini saya akan sedikit berbagi tentang bagaimana membuat bingkai gambar dengan css.
  • 6 Cara penulisan warna dalam css
    Cara penulisan warna dalam css untuk keperluan halaman web bisa kita lakukan dengan 6 cara. Semuanya mengarah pada penggunaan warna yang sama tapi ditulis dengan cara berbeda. Berikut ini saya akan berbagi tentang beberapa metode penulisan warna dalam css yang bisa anda gunakan.

Kiriman terbaru