#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#menu_bar {
float: right;
height: 30px;
width: 280px;
margin-top: 10px;
margin-right: 10px;
}
#search {
float: right;
height: 30px;
width: 240px;
margin-right: 20px;
margin-left: 200px;
margin-top: 5px;
}
#logo {
float: left;
height: 60px;
width : 60px;
margin-left: 20px;
margin-top: 10px;
}
#top {
float: right;
height: 80px;
width: 544px;
border: 1px solid blue;
}
#right {
float: right;
height: 180px;
width: 190px;
border: 1px solid red;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 412px;
border: 1px solid red;
}
#content {
margin-left: 201px;
margin-right: 200px;
margin-top: 80px;
width: 344px;
height: 330px;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
background: green;
}
simpan file diatas dengan nama mystyle1.css
lalu ketikan scrip html nya dengan scrip dibawah ini.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://WWW.W3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xlmns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>desain layout tugas modul 3</title>
<link rel="stylesheet" href="mystyle1.css" type="text/css"/>
</head>
<body>
<div id="wrapper">
<div id="logo">
</div>
<div id="menu_bar">
</div>
<div id="search">
</div>
<div id="header">
header
</div>
<div id="inner">
<div id="sidebar">
sidebar
</div>
<div id="top">
top
</div>
<div id="right">
right
</div>
<div id="content">
content
</div>
</div>
<div id="footer" align="center">
footer
</div>
</body>
</html>
maka tampilan akan seperti ini
untuk memberikan desain yang menarik ketikan scrip html dibawah ini.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://WWW.W3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xlmns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>desain layout tugas modul 3</title>
<link rel="stylesheet" href="mystyle1.css" type="text/css"/>
<style type="text/css">
<!--
#leftmenu ul {
width: 180px;
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: #6cae15 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background : #5e9711 no-repeat left center; color: #ffffff
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="logo">
<img src="koala.gif" border="0" />
</div>
<div id="menu_bar">
Home | Site map | RSS | Contact | About us
</div>
<div id="search">
search <input type="text"/>
</div>
<div id="header">
<h2>KOALA ADVERTISING</h2>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News & media</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Tip & triks</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
</div>
<div id="top">
<img src="top.jpg" border="0" />
</div>
<div id="right">
Event
<ul>
<li>lomba pertama</li>
<li>lomba kedua</li>
<li>lomba ketiga</li>
</ul>
</div>
<div id="content">
<h3>Lomba Desain WEB</h3>
<h4>1 Maret 2010 [07:00]</h4>
dalam rangka memperingati hari senin, KOALA ADVERTISING membuat acara yaitu lomba desain web.
</div>
</div>
<div id="footer" align="center">
@ 2010 KOALA ADVERTISING Malang, Indonesia
</div>
</body>
</html>
maka tampilan akan seperti dibawah ini.
untuk background division bisa ditambahkan pada file CSS, contoh :
"background: green;"
Tidak ada komentar:
Posting Komentar