
Page.html
| <!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> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="jquery-1.4.js"></script> <script type="text/javascript" src="jquery.equalizecols.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#leftcontent, #middlecontent, #rightcontent").equalizeCols(); }); </script> </head> <body> <!--sebagai pengikat, bagian paling luar halaman web yang melingkupi semua page div--> <div id="wrapper"> <!--berisi tampilan header--> <div id="container"> <!--header berisi menu--> <div id="header"> bagian header <!--tampilan menu--> <div id="menu"> <ul> <li><a href="#">menu 1</a> <ul> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 3</a></li> <li><a href="#">menu 4</a></li> <li><a href="#">menu 5</a></li> </ul> </li> <li><a href="#">menu 2</a> <ul> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> <li><a href="#">menu 3</a></li> <li><a href="#">menu 4</a></li> <li><a href="#">menu 5</a></li> </ul> </li> <li><a href="#">menu 3</a></li> <li><a href="#">menu 4</a></li> <li><a href="#">menu 5</a></li> </ul> </div> </div> </div> <!--Tampilan untuk bagian kiri page--> <div id="leftcontent"> <p> bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman bagian kiri halaman </p> </div> <!--tampilan untukbagian tengah page--> <div id="middlecontent"> <p> bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman bagian tengah halaman </p> </div> <!--tampilan untuk bagian kanan page--> <div id="rightcontent"> <p> bagian kanan </p> </div> <!--menggabungkan ketiga tampilan bagian kiri, tengah, dan kanan page menjadi satu baris--> <div id="clearer"></div> <!--tampilan footer--> <div id="footer">Copyright © 2011 by islah production All Rights Reserved.</div> </div> </body> </html> |
Style.css
| /*tampilan Body, Berlaku untuk semua yang berada di dalam body secara default*/ body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #6b733c; margin: 0px; background-color: #FFFFFF; } #wrapper { background:#c2c3bb url(images/background.jpg); background-repeat: repeat-y; width: 900px; margin-right: auto; margin-left: auto; } /*Top Menu*/ #wrapper #container #menu { width: 900px; position: relative; top: 140px; left: 0px; margin: 0; padding: 0; background:url(images/bgmenu.png) repeat-x; clear: both; margin: 0px; } #container #menu ul { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; padding: 0; border: 0; height: 40px; } #container #menu ul li { list-style-type: none; position: relative; float: left; } #container #menu ul li a{ display: block; float: left; height: 22px; width: auto; padding-top: 10px; padding-right: 10px; padding-left: 10px; font-weight: bold; color: #000; text-decoration: none; padding-bottom: 0px; border-right: 1px solid #1F1010; border-left: 1px solid #fcfcf4; } #container #menu ul li a:hover { color: #fff; background-color: #000; } #container #menu ul li ul { display: none; } #container #menu ul li:hover ul { display: block; position: absolute; left: 0px; top: 32px; z-index: 1; } #container #menu ul li:hover ul li a { display: block; left: 0px; color: #000; background-color: #ededea; width: 200px; height: 14px; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; border: 1px solid #ededea; padding: 7px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } #container #menu ul li:hover ul li a:hover { left: 0px; color: #FFFFFF; border: 1px solid #000; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.9; -khtml-opacity: 0.9; opacity: 0.9; } /*Header*/ #wrapper #header { background:#000 url(images/header.jpg); height: 183px; width: 900px; } #wrapper #leftcontent { float: left; width: 190px; padding-right: 5px; padding-left: 5px; line-height: 155%; } #wrapper #middlecontent { background-color: #680102; float: left; width: 490px; padding-right: 5px; padding-left: 5px; color: #FFFFFF; text-align: justify; } #wrapper #rightcontent { float: left; width: 190px; padding-right: 5px; padding-left: 5px; } #wrapper #clearer { clear: both; } #wrapper #footer { font-size: 10px; color: #FFFFFF; background:#000; text-align: center; height: 50px; width: 900px; line-height: 275%; } #wrapper #leftcontent a:link { color: #EE1C24; text-decoration: none; } #wrapper #leftcontent a:visited { color: #EE1C24; text-decoration: none; } #wrapper #leftcontent a:hover { color: #6600CC; text-decoration: underline; } #wrapper #middlecontent a:link { color: #FF0; text-decoration: none; } #wrapper #middlecontent a:visited { color: #FF0; text-decoration: none; } #wrapper #middlecontent a:hover { color: #FFFFFF; text-decoration: underline; } #wrapper #rightcontent a:link { color: #0000FF; font-weight:bold; text-decoration: none; } #wrapper #rightcontent a:visited { color: #0000FF; font-weight:bold; text-decoration: none; } #wrapper #rightcontent a:hover { color: #EE1C24; font-weight:bold; text-decoration: underline; } #menuheader { width:100%; height:30px; background-color:#999; } |
membuat halaman (pdf)
source code (rar)


