Sekarang sudah bisa diatas dengan external libary javascript yang dibuat oleh dynamicdrive.com.
Mari Kita lihat perbedaannya...
Copy terlebih dahulu syntax dibawah ini...
- Code: Select all
<html>
<head>
<title></title>
</head>
<style>
*{margin:0;padding:0;font-family:tahoma,calibri,myriad pro;}
#Wrapper{width:900px;height:auto;margin:0 auto;}
#Header{width:inherit;height:auto;}
#Header_up{height:150px;width:inherit;background:black;}
#Menubar{width:inherit;height:40px;background:#333;}
#Menubar ul{display:block;margin-left:10px;}
#Menubar ul li{display:inline-block;}
#Menubar ul li a{display:block;line-height:40px;padding:0 5px;text-decoration:none;color:#fff;}
#Menubar ul li a:hover{background:#999;}
#Content{width:inherit;height:auto;}
#Lbar{min-height:600px;width:200px;float:left;background:#999;;}
#Mbar{min-height:400px;width:699px;margin-left:200px;background:#eee;}
#Footer{width:inherit;height:40px;background:#333;clear:both;}
</style>
<body>
<div id="Wrapper">
<div id="Header">
<div id="Header_up">
</div>
<div id="Menubar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
<div id="Content">
<div id="Lbar">
</div>
<div id="Mbar">
</div>
</div>
<div id="Footer">
</div>
</div>
</body>
</html>
simpan dengan nama karangan anda... wehehe...tpi dengan extensi .html
nah sekarang buka melalui browser...
lihat apa yang terjadi... tinggi column kiri dan kanan berbeda bukan?
nah sekarang kita akan menyetarakannya dengan sedikit script...
(sebenernya banyak kalo dilihat dari sisi libari externalnya, tpi kita hanya mengincludekan libarinya so kita gak perlu buat yang panjang panjang karena dinamic sudah mau repot repot membuatnya.)
tambahkan script ini ke dalam file tadi, letakkan setelah <body>.
- Code: Select all
<script type="text/javascript" src="http://www.dynamicdrive.com/csslayouts/equalcolumns.js"></script>
<script type="text/javascript">
ddequalcolumns.columnswatch=["Lbar", "Mbar", "Wrapper"]
</script>
setelah itu save... dan buka kembali melalui browser... lihat apa yang terjadi sama bukan...
cara penggunaannya...
- Code: Select all
ddequalcolumns.columnswatch=["leftcolumn", "rightcolumn", "contentwrapper"]
hehe...
sumber : http://www.dynamicdrive.com/style/blog/ ... ht-script/
salam css...
News
Site map
SitemapIndex
RSS Feed