*{margin:0 auto; padding:0}
body {
background :#c0c0c0;
font-family:algerian;
font-size:12px;
color:#4c4e55;
}
#container{
width:900px;
height:700px;
overflow:hidden;
}
#header{
height:100px;
border: 1px solid #009900;
}
#logo {
width: 100px;
float:left;
}
gambarlogo{
margin:0px 0px 0px 5px;
}
#menu {
width:600px;
float:right;
}
#menu ul {
float:right;
list-style:none;
}
#menu li {
float:left;
}
#menu a {
display:block;
padding:7px 12 px;
texy-decoration:none;
font-weight:bold;
font-family:arial;
color:#313132;
}
#menu a:hover {
background: #FFCC00;
text-decoration:underline;}
#sidebar_kiri{
float:left;
width:200px;
height:350px;
margin:3px 0;
padding:3px;
border:1px solid #009900;
}
#center {
float: left;
width: 470px;
height:350px;
margin: 3px;
padding: 3px;
border: 1px solid #009900;
}
#sidebar_kanan {
float: left;
width:200px;
height:350px;
margin: 3px 0;
padding:3px;
border:1px solid #009900;
}
#footer {
height:100px;
border: 1px solid #009900;
clear:both;
}
ini HTML nya :
<html>
<head>
<title>layout Website 3 kolom</title>
<link rel ="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<p>
<img width=100 class="gambar_logo" src="Wikipedia.png"/></p>
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="sidebar_kiri">
sidebar kiri
</div>
<div id="center">
konten
</div>
<div id="sidebar_kanan">
sidebar kanan
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Tampilannya :
Tidak ada komentar:
Posting Komentar