Membuat layout header dan footer statis dengan TAG DIV dan CSS

Seringkali kita melihat tampilan layout halaman website dimana posisi Header tetap terlihat pada bagian atas browser, begitu juga bagian footernya yang menampilkan iklan - iklan juga tetap terlihat pada bagian bawah browser meskipun kita sudah scroll mouse ke atas dan ke bawah. Pada tutotial kali ini kita akan coba membuat contoh sederhana bagaimana cara membuat layout header dan footer statis pada halaman web.

 

Layout yang akan dibuat adalah sebagai berikut :

Header Statis
Baris Menu Bagian Isi
Footer Statis


Dalam proses pembuatan layout ini, yang kita butuhkan hanyalah bekerja dengan TAG DIV dan juga CSS. Langkah - langkah yang harus di lakukan adalah sebagai berikut :

1. Buat layout dengan TAG DIV

<!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=iso-8859-1" />
<title>Tutorial Static Header dan Footer</title>
<link rel="stylesheet" href="static-header.css" type="text/css"/>
</head>

<body>
<div id="header"></div>
<div id="footer">Bagian footer</div>
<div id="content">
	<div id="leftbar">
		<h3>Baris Menu</h3>
		
	</div>
	<div id="rightbar">
		Bagian Isi
	</div>
	<div id="clear" style="display:block;height:1px;clear:both;"> </div>
</div>
<!-- DIV sebagai pengatur jarak -->
<div id="clear" style="display:block;height:160px;clear:both;"> </div>
</body>
</html>


Layout diatas masih belum berbentuk apa-apa sebelum kita membuat bagian CSSnya. Karena memang sifat dasar dari TAG DIV hanya berbentuk kotak memanjang kemudian tingginya akan mengikuti seberapa besar isinya.

2. Membuat bagian CSS - static-header.css

html,body{
	/*Hilangkan white space pada browser*/
	margin:0 0 0 0; 
	padding:0 0 0 0;
}
#header{
	width:100td_persen; /* Lebar header full pada browser */
	height:100px;
	border-bottom:silver 1px solid;
	position:fixed; /* Membuat posisi header statis */
	background-color:#ff9900;
	z-index:2; /* Header berada 2 tingkat diatas TAG DIV lainnya */
}
#content{
	display:block;
	width:800px;
	min-height:900px;
	border:silver 1px solid;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	top:105px; /* Content punya jarak 105px dari bagian atas browser*/
			   /* Sehingga tidak tertutup oleh header yg 2 tingkat diatasnya */
	background-color:#339900;
}
#content #leftbar{ /*Bagian barisan menu */
	width:200px;
	min-height:300px;
	border-right:silver 1px solid;
	float:left; /*Memposisikan TAG DIV di sebelah kiri */
}
#content #rightbar{ /* Bagian kolom isi web */
	width:580px;
	min-height:300px;
	border-left:silver 1px solid;
	float:right; /*Memposisikan TAG DIV di sebelah kanan */
}
#footer{ /* Keterangan footer sama dengan header */
	width:100td_persen;
	height:50px;
	border-bottom:silver 1px solid;
	position:fixed;
	bottom:0px;
	background-color:#cccccc;
	z-index:2;
}

Untuk mencoba tutorial diatas, langkah yang benar adalah dengan membuat layout html terlebih dahulu. Kemudian buat CSSnya perbagian kemudian langsung melihat perubahan tampilannya pada browser. Dengan mencoba step by step seperti yang kami sampaikan, anda akan dapat memahami fungsi dari masing - masing bagian pada CSS.

Selamat mencoba dan Salam Kreatif


Komentar pembaca

Pen Quranmantap ni gan, makasih atas ilmunyaposting pada :2014-12-05 09:51:10
audio sholatokelah kalau begitu, mantap ganposting pada :2015-01-13 10:01:12
restukenapa error gan hehehehposting pada :2015-03-19 21:59:38
Zona Outbound IndonesiaMasih bingung euy kalau pakai CSS. Harus belajar lebih giat lagi nih.posting pada :2017-02-19 22:38:48
         
     
         
 
         
   
         
   
 

Tulis komentar