OK!!! langsung pada intinya aja nich quw kasih scriptnya.,.,., :
Ketiklah Script berikut dengan notepad kemudian simpan dengan nama style.css jangan lupa ganti Save As Type menjadi All Files
body{margin:0;padding:0;line-height: 1.5em;}
b{font-size: 110%;}em{color: red;}
#maincontainer{width: 840px; /*Width of main container*/margin: 0 auto; /*Center container on page*/border:1px solid #000000; /*Bordered the main container*/}
#topsection{background: #EAEAEA;height: 90px; /*Height of top section*/}
#topsection h1{margin: 0;padding-top: 15px;}
#contentwrapper{float: left;width: 100%;}
#contentcolumn{margin-left: 200px; /*Set left margin to LeftColumnWidth*/}
#leftcolumn{float: left;width: 200px; /*Width of left column*/margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/background: #C8FC98;}
#footer{clear: left;width: 100%;background: black;color: #FFF;text-align: center;padding: 4px 0;}
#footer a{color: #FFFF80;}
.innertube{margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/margin-top: 0;}
.mattblacktabs{width: 100%;overflow: hidden;border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/}
.mattblacktabs ul{margin: 0;padding: 0;padding-left: 10px; /*offset of tabs relative to browser left edge*/font: bold 12px Verdana;list-style-type: none;}
.mattblacktabs li{display: inline;margin: 0;}
.mattblacktabs li a{float: left;display: block;text-decoration: none;margin: 0;padding: 7px 8px; /*padding inside each tab*/border-right: 1px solid white; /*right divider between tabs*/color: white;background: #414141; /*background of tabs (default state)*/}
.mattblacktabs li a:visited{color: white;}
.mattblacktabs li a:hover, .mattblacktabs li.selected a{background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */}#ddblueblockmenu{border: 1px solid black;border-bottom-width: 0;width: 185px;}
#ddblueblockmenu ul{margin: 0;padding: 0;list-style-type: none;font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;}
#ddblueblockmenu li a{display: block;padding: 3px 0;padding-left: 9px;width: 169px; /*185px minus all left/right paddings and margins*/text-decoration: none;color: white;background-color: #2175bc;border-bottom: 1px solid #90bade;border-left: 7px solid #1958b7;}
* html #ddblueblockmenu li a{ /*IE only */width: 187px; /*IE 5*/w\idth: 169px; /*185px minus all left/right paddings and margins*/}
#ddblueblockmenu li a:hover {background-color: #2586d7;border-left-color: #1c64d1;}
#ddblueblockmenu div.menutitle{color: white;border-bottom: 1px solid black;padding: 1px 0;padding-left: 5px;background-color: black;font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;}
Jika style.css selesai maka sekarang bukalah notepad baru dengan lembar kosong ketikan kode di bawah ini dan simpan dengan nama index.html
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layout Dengan CSS</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="maincontainer">
<div id="topsection"><div class="innertube"><h1>Disini Adalah Header</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><div class="mattblacktabs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">DHTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Gif Optimizer</a></li>
</ul>
</div><br ><br >
<h2>Disini Adalah Isi Dari Website</h2>
<p>disini anda dapat menulisakan isi dari website anda, jika anda ingin mendajadi seorang webmaster maka berlatihlah dengan giat, <i>seseoarang yang ditemani dengan ilmu pengetahuannya tidak akan pernah bosan</i></p>
</div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Ini Menu Kiri</b><div id="ddblueblockmenu">
<div class="menutitle">Dynamic Drive</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">What's New</a></li>
<li><a href="#">What's Revised</a></li>
<li><a href="#">Help Forums</a></li>
</ul>
<div class="menutitle">CSS Library</div>
<ul>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Image Effects</a></li>
<li><a href="#">Form Effects</a></li>
<li><a href="#">Boxes & containers</a></li>
<li><a href="#" style="border-bottom-color: black">Links & Buttons</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">Disini Adalah Footer Yang Biasanya Berisi Lisensi Hak Atas Kepemilikan WebSite</div>
</div>
</body>
</html>
Jika Berhasil Maka Tampilannya Adalah Seperti Berikut!
Ok Selamat Mencoba Semoga Berhasil!!!
0 comments:
Post a Comment