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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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 **

Artikel Lainnya

  • Membuat efek kotak tulisan dengan css
    CSS memilki kemampuan sangat luas dan dapat diterapkan untuk banyak kasus. Berikut ini adalah contoh sederhana untuk membuat sebuah kotak yang fleksibel bisa diletakkan dimana saja pada halaman web anda.
  • Membuat efek gambar di blog dengan css
    CSS sangat felxibel bisa digunakan untuk banyak keperluan, berbagai media, semua platform dan semua sistem pengelola konten (wordpress, blogger, joomla dll). Penggunaanya juga sangat mudah sehingga kita bisa brekreasi dengan tulisan maupun gambar. Kali ini saya akan berbagi cara bagaimana menyisipkan efek gambar dengan css pada blogger.
  • 147 Nama warna dalam css
    Sebelumnya saya menulis tentang 6 cara penulisan warna dalam css. Pada tulisan ini saya berbagi tentang 147 nama warna yang bisa anda gunakan dalam css. Nama-nama warna ini sering dikatakan sebagai keyword yang merujuk pada warna tertentu yang hampir didukung oleh semua browser yang ada sekarang.
  • Menyusun tampilan form tanpa perintah table
    Tabel dalam html biasanya digunakan untuk menyusun laporan atau membuat layout/tampilan elemen html agar terlihat lebih rapi. Pada tutorial kali ini saya akan berbagi tentang bagaimana Menyusun tampilan form input tanpa perintah table, tetapi menggunakan css. Teknik menyusun tampilan elamen html tanpa perintah tabel ini sering disebut dengan tableless (sedikit tabel).
  • Template halaman admin gratis
    Setiap kali kita membuat sebuah aplikasi web tentunya pasti menginginkan hasil yang baik, enak dilihat, tampilan yang cepat, fleksibel dan gampang untuk dikembangkan. Dan satu lagi tentunya lagi hemat waktu dalam membuatnya.

Kiriman terbaru