hisman.org » buat layout http://hisman.org webdesign source and tutorial Thu, 11 Feb 2010 14:35:35 +0000 http://wordpress.org/?v=abc en hourly 1 Membuat layout yang ada menunya http://hisman.org/membuat-layout-yang-ada-menunya.html http://hisman.org/membuat-layout-yang-ada-menunya.html#comments Sat, 18 Oct 2008 00:40:18 +0000 hisman http://hisman.org/?p=78 Kemaren saya dah posting tentang cara ngebuat layout tanpa tabel, dan juga cara ngebuat menu horizontal. Nah, sekarang kita coba gabungin menu yang dah kita buat dengan layout yang udah kita buat juga.

Coba buka ke dua file HTML menu sama layout yang dah di buat. Klo belum punya bisa di download disini dan disini.

Trus copy paste tag div yang idnya nav di file HTMLnya horizontal menu beserta isinya ke file HTMLnya layout, sehingga hasilnya seperti ini :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout+menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Product</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="sidebar">
</div>
<div id="posting">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Dalam hal ini menunya kita taruh di header.

Trus copy paste juga CSS yang ada di file CSSnya horizontal menu ke file CSSnya layout sehingga ntar CSSnya layout jadi kayak gini :


body{
   background:#000000;
}
#wrapper {
   width:800px;
   margin:auto;
}
#header{
   background:#000099;
   height:200px;
}
#sidebar{
   background:#00CC66;
   float:left;
   width:250px;
   height:800px;
}
#posting{
   background:#FFFFFF;
   float:right;
   width:550px;
   height:800px;
}
#footer{
   background:#666666;
   height:300px;
   clear:both;
}
#nav ul{
   display:block;
   margin: 0px;
   padding: 0px;
}
#nav li{
   float:left;
   list-style-type:none;
   padding:3px 5px 3px 5px;
   margin:1px;
   border:#CCCCCC 1px solid;
}
#nav li a{
   text-decoration:none;
   color:#999999;
}
#nav li:hover{
   background:#00FFFF;
}

Simpen, dan jadi dech… Klo kamu bingung tentang kode-kode di atas, kamu bisa baca postingan sebelumnya tentang ngebuat layout dan juga horizontal menu.

File layout yang dah digabungin bisa di download di sini…

]]> http://hisman.org/membuat-layout-yang-ada-menunya.html/feed 1