body {
margin:5px auto;
padding:0;
font:0.72em/150% Calibri;
}
#wrapper {
margin:auto;
width:980px;
}
#header {
height:80px;
margin:0px auto;
background:#0000;
}
#header-content{
height:70px;
margin:auto;
background-image:url(../pratikum4/image/header.jpg)
}
#menu-top {
font-size:small;
height:20px;
float:right;
padding:0px 50px;
font-weight:bold;
}
#site-title h2{
float:left;
padding:0px 10px;
height:30px;
margin:20px 0px;
font:2.1em/100% 'ravie';
font-weight: bold;
}
#search {
clear:right;
float:right;
margin:20px 50px 0px auto;
height:30px;
font-weight:bold;
}
#inner {
float:left;
margin:0px;
}
#footer {
clear:both;
height:60px;
background:#FF3300;
}
#footer p {
text-align:center;
}
#sidebar {
float:left;
width:200px;
height:400px;
background-color:#FF9900;
}
#content {
float:right;
width:780px;
height:400px;
background:#FFFF00;
}
#content-top {
clear:both;
margin:auto;
width:780px;
height:140px;
background-image:url(TopBg.jpg)
}
#content-main {
float:left;
margin:auto;
width:480px;
height:240px;
}
#content-main p, h3{
padding: 10px 20px 0px 20px;
text-align:justify;
}
.style1 {
font-size:x-small;
}
#content-main hr{
width:440px;
color:#FF9900;
margin: 10px 20px 0px 20px;
}
#content-right {
float:right;
margin:10px auto;
width:260px;
border: 2px solid black;
background:#CCCC00;
}
#content-right h3{
padding: 10px 20px 0px 20px;
text-align:justify;
}
#content-right ul{
padding: 10px 20px 20px 40px;
list-style:square;
}
#leftmenu ul {
width:200px;
list-style-type:none;
padding:0;
margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left:15px;
text-decoration:none;
}
#leftmenu a {
padding: 5px 0px 5px 15px;
display:block;
background:#FF6600 no-repeat left center;
margin: 0px 0px 1px; color:#0000FF;
}
#leftmenu a:hover {
background:#FFCC99 no-repeat left center;
color:#0033FF;
}
ini adalah HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Tugas Praktikum Modul 4</title>
<link rel="stylesheet" href="praktikumModul4.css" type="text/css" />
</head>
<body bgcolor=black>
<div id="wrapper">
<div id="header">
<div id="header-content">
<div id="menu-top">
Home | Sitemap | RSS | Contact | About Us
</div>
<div id="site-title">
</div>
<div id="search">
Search : <input name="q" size="20" type="text"/>
</div>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content-top">
</div>
<div id="content-main">
<h3>Materi Desain Header Web</h3>
<hr />
<p>
Untuk lebih jelasnya liat modul pratikum 4.
</p>
</div>
<div id="content-right">
<h3>Events</h3>
<ul>
<li><a href="#">Pembelajaran Web</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<br />
<p><b>E-mail: Jack.delphy@yahoo.co.id</b></p>
</div>
</div>
</body>
</html>
Tidak ada komentar:
Posting Komentar