di samping sih di samping
tapi teu make sempak
ka kuping si kakuping
tapi kurang kompak
solawat sertasalam marikita panjatkan ke hadirat allah
sekian pembukaan
kembali lgi dengan aa di berbagi tugas sederhana yang insallah bermanfaat yaa hehehe
langsung ajaa nih sedot gan semoga lancar dan tidak error
index.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="STYLESHEET" href="newcss.css"/>
<title>JSP Page</title>
</head>
<body>
<div id="wrap">
<div id="header">
<img src="bsi bunder.png">
<h1><a>Sistem Informasi Akuntansi</a></h1>
<h2>AMIK BSI "Bogor" Kampus A</h2>
<h2>Jl. Merdeka No.168 Telp.08561996551 Bogor</h2>
</div>
<div id="menu">
<ul>
<li><a href="index.jsp">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Logout</a></li>
</ul>
</div>
<div id="content">
<div class="left">
<h2>Master Data</h2>
<ul>
<li><a href=" ">Akun</a></li>
<li><a href=" ">Saldo Awal</a></li>
<li><a href=" ">User</a></li>
<li><a href=" ">Periode Akuntansi</a></li>
</ul>
<h2>Transaksi</h2>
<ul>
<li><a href="">Kas Masuk</a></li>
<li><a href="">Kas Keluar</a></li>
<li><a href="">Jurnal Umum</a></li>
</ul>
<h2>Informasi Data</h2>
<ul>
<li><a href="">Informasi Akun</a></li>
<li><a href="">Informasi User</a></li>
<li><a href="">Informasi Kas Kelaur</a></li>
<li><a href="">Informasi Kas Masuk</a></li>
<li><a href="">Data Jurnal Umum</a></li>
</ul>
</div>
<div class="right">
<table width="100%">
<tr>
<td valign="top" width="110%">
<%-- isi dari content sebelah kanan --%>
</td>
</tr>
</table>
<div class="footer">
Support by
</div>
</div>
<div style="clear: both; "> </div>
</div>
</div>
</body>
</html>
dan ini cssnya
style.css
* {
margin: 0;
padding: 0;
}
table tr td{
border-color: #663ff ;
}
body{
background: #ff9966;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
color: #ffcc33;
margin: 0 auto;
}
a{
text-decoration:none;
color: #66CCff;
}
a:hover{
text-decoration: underline;
color: #ff00ff;
}
#wrap{
margin: 0 auto;
width: 965px;
}
#header{
height: 130px;
margin: 0 auto;
width: 965px;
background: #ff399;
}
#header h1{
font-size: 28px;
letter-spacing: -1px;
padding: 15px 0 0 20px;
color: #fff;
}
#header h1 a{
color: #99ffff;
text-decoration: none;
font-weight: 100;
letter-spacing: -2px;
}
#header h1 a:hover{
color: activecaption;
}
#header h2{
font-size: 19px;
color: #C1DAD7;
padding: 5px 0 0 20px;
letter-spacing: -1px;
font-weight: 100;
}
#header h3{
font-size: 13px;
color: #C1DAD7;
padding: 5px 0 0 20px;
letter-spacing: -1px;
font-weight: 100;
}
#header img{
width: 115px;
height: 115px;
float: right;
padding-right: 50px;
padding-top: 10px;
padding-bottom: 10px;
}
#menu{
height: 30px;
margin: 0 auto;
width: 965px;
line-height: 30px;
background: #66cc66;
}
#menu ul{
list-style-type: none;
padding-left: 20px
}
#menu ul li{
display: block;
float: left;
}
#menu ul li a{
padding: 0 20px 0 0;
text-decoration: none;
font-weight: 600;
font-size: 12px;
color: #228b22;
padding: 8px 10px 7px 10px;
}
#menu ul li a:hover{
color: #222;
text-decoration: none;
}
#content{
background-color: #d3fd9d;
padding: 0 10px;
}
.right{
float: right;
width: 745px;
text-align: justify;
padding-top: 5px;
font-size: 12px;
}
.right h2{
font-size: 18px;
font-weight: 100;
padding-left: 10px;
height: 30px;
line-height: 30px;
background: #99fff;
}
.right h2 a{
text-decoration: none;
color: #66000;
}
.right h2 a:hover{
color: #33ffcc;
}
.left{
float: left;
width: 180px;
padding-top: 5px;
}
.left h2 {
margin: 5px 0 0;
padding-left: 10px;
height: 30px;
background: #ff3399;
color: #fffff;
font-size: 13px;
}
.left ul{
padding: 10px 0 15px 20px;
list-style-type: square;
color: #99ccff;
}
.left ul li a{
text-decoration: none; font-weight: 600;
}
.left ul li a:hover{
color: #ccffcc;
}
.footer{
text-align: center;
font-size: 11px;
color: #aaa;
margin-top: 40px;
border-top: 1px dotted #aaa;
padding-top: 10px;
}
.footer a{
color: red;
}
footer a:hover{
color: #ccffcc;
}
.isi td{
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #ffffff;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 8px;
padding-right: 8px;
color: #006400;
}
.head td{
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
background: #90ee90;
letter-spacing: 1px;
padding: 4px 2px 4px 10px;
color: #000080;
text-align: center;
font: 13px "Tahoma",Arial,sans-serif;
}
.button{
margin-left: 0;
padding: 4px 4px;
border: none;
background: #E9CF16;
font-size: 12px;
color: #ffffff;
font-family: "Tahoma";
width: 70px;
}
.buttonlap{
margin-left: 0;
padding: 4px 4px;
border: none;
background: #E9CF16;
font-size: 13px;
color: #ffffff;
font-family: "Tahoma";
width: 100px
}
.button a:hover{
background: #90ee90;
}
catatan:
edit lagi ya baik dari warna maupun konten dan sebagainya agar tidak terlalu mirip dengan yang di bagi oleh aa.Terimakasih.
Sekian Terimakasih
tinggalkan komentar jika ingin bertanya
dan terimakasih untuk pihak yang telah membantu
(__)(__)===D...
BalasHapus(__)(__)===D...
BalasHapusIzin copy buat tugas gann wkwk
BalasHapus