Tutorial Merancang Template Website Sederhana Bag. 3

Saatnya menyulap tampilan rancangan template kita nih. Unduh gambar yang kita gunakan di sini. Oh ya, gambar di simpan satu folder sama sama index html dan gaya.css ya.
Langsung aja ya!
Buka file Gaya.css yang kita buat di awal. Kalau belum dibuat, dibuat sekarang juga ga masalah.
Mengkode lagi !!
Oh ya, yang mau mampir ke bagian 2, klik link ini.
Kalo yang mau ke bagian 1, klik link ini.

body {
background: #E7E7E7 url('body.jpg') top left;
font-size: 14px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color: #564B47;
padding: 0px;
margin: 0px;
}

Simpan, lalu buka file index.html nya di browser anda. Lihat perubahan yang terjadi.

Lanjut lagi ! Tambahkan kode ini lagi di file css tadi ya.

a {color: #DB7093;}

a:visited {color: #C43300;}

a:hover {color: #C43300;}

a:active {color: #000000;}

Simpan lagi !

Lanjut lagi !

h2 {

color: #9A1212;

font-size: 20px;

font-weight: normal;

padding: 5px, 10px;

margin: 0px; 

}

h3 {

font-size: 15px;

text-transform: uppercase;

}

Simpan lagi !

Lanjut lagi !

img.download {
vertical-align: middle;
}

/*------------container---------------*/
#container {
width: 760px;
margin-left: auto;
margin-right: auto;
background: #E8E8E8 url('menubottom.jpg') no-repeat bottom left;
border: 1px solid #8D8D8D;
}

/*--------------banner untuk logo jockerDT------------*/
#banner {
height: 114px;
text-align: center;
background: url('header.jpg') no-repeat bottom center;
background-color: #E1DDD9;
padding: 0px;
margin: 0px;
}

#banner img {padding: 10px 0px;}

#judulbanner
{
padding-top: 50px;
font-size: 2em;
font-weight: bold;
}


Simpan lagi, dan hasilnya !!

Tambah lagi.

/*--------------konten---------------------*/
#konten {
background: #FFFFFF url('content.jpg') no-repeat top right;
padding: 0px;
margin-left: 200px;
margin-right: 0px;
min-height: 600px;
}

p {
padding: 5px 10px;
margin: 0px;
}

#kiri {
float: left;
width: 200px;
margin: 0px;
padding: 0px;
background: #E8E8E8;
height: 90%;
}

Lihat lagi hasilnya !

Tambah lagi kodenya !

#kaki {
clear: both;
margin: 0px;
padding: 0px;
height: 35px;
text-align: right;
background: url('footer.gif') repeat-x;
}

#kaki h3 {
padding: 5px 5px 0px 0px;
}

#kaki h3 a {
color:#FFFFFF;
}

Lihat lagi hasilnya.

Sekarang tambah kodenya lagi untuk menunya.

/*-------------------Menu-------------------*/
.menu ul {
list-style: none;
padding: 10px;
margin: 0px;
}

.menu .menu ul li, a:link, .menu a:visited {
display: block;
font: bold 1em Verdana, Arial, Helvetica, sans-serif;
color: #9A1212;
text-decoration: none;
text-align: left;
width: 140px;
height: 32px; 
}

.menu a:hover {
background: url('menuhover.gif') no-repeat;
color: #DC4D1B;
}

Dan hasilnya...

Jadi hasil akhirnnya seperti ini.

Semoga pembaca suka tutorial ini dan semoga berguna. :)