blog, tutorial
2 Kolom sama tinggi dengan CSS
April 7th, 2005
Wah, banyak sekali respon yang saya dapat dari tutorial-tutorial kemarin. Dan seperti janji saya, untuk meneruskan, bagaimana membuat layout dengan 2 kolom yang sama tinggi. Hasil dari tutorial ini bisa dilihat disini.
Betul seperti yang dikomentari mas Priyadi, bahwa kita perlu bantuan sebuah gambar yang nantinya akan diulang-ulang menggunakan kata kunci repeat.
Mari kita mulai.
Pertama, tentukan lebar layout yang akan dibuat. Untuk lebar yang ideal, adalah 700 pixel, atau bisa kurang dari itu. Tentukan warna background layout dan sidebar, untuk mempermudahnya, gunakan software Color Schemer.
Kedua, buka Adobe Photoshop anda, dan buat image baru, dengan lebar 700 pixel dengan lebar cukup 200 pixel saja. Untuk lebih jelasnya, bisa dilihat pada gambar dibawah ini
Ketiga, rubah satuan yang ada di photosop menjadi pixel. Klik Menu Edit -> Prefences -> Units & Rulers. Pada frame Units, ganti Ruler menjadi pixel, kemudian klik OK. Perhatikan menu toolbox, pilih “Rectangular Marquee Tool” untuk menyeleksi bagian sidebar. Perhatikan jendela info, buat seleksi sehingga bagian lebar menjadi 230 pixel, dan tinggi 200 pixel.
Keempat, beri warna pada bagian sidebar. Pada toolbox, klik gambar kaleng cat, atau tekan huruf G, Paint Bucket Tool. Kode warna yang saya gunakan adalah #EFEFDE. Hasilnya, bisa dilihat pada gambar dibawah ini.
Keempat, ambi saja secuil. Caranya, pada toolbox, tahan pada tombol kotak bergaris putus-putus, akan muncul bagian tersembunyi seperti gambar dibawah ini.
Pilih Single row, dan klik sembarang pada kanvas. Akan terlihat garis putus-putus yang berkedap-kedip. Tekan tombol Ctrl+C yang berarti copy, kemudian buat file baru, klik menu File -> New, dan langsung saja klik OK. Akan keluar kanvas baru yang panjang, teruskan dengan menekan tombol Ctrl+V yang berarti paste.
Kelima, simpan file tersebut berekstensi gif. Saya sendiri memberi nama back.gif. Dari sini, kita sudah berhasil membuat gambar yang nantinya akan dibutuhkan dalam penggunaan layout.
Buat halaman HTML, lakukan seperti dibawah ini
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “xhtml11.dtd”>
<html>
<head>
<title>Ini judulnya, cuma test doang kok!</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”author” content=”siape aje” />
<meta name=”description” content=”ape aje” />
<meta name=”keyword” content=”ape, ye” />
<link rel=”stylesheet” type=”text/css” href=”lagi.css” />
</head>
<body>
<div id=”kotakbesar”>
<div id=”header”>
tutorial dot kom
</div>
<div id=”sidebar”>
<p>ini bagian sidebarnya, bagian samping, juga bisa dijadikan tempat menu.</p>
<p>ini cuma kata kata yang bisa membuat sidebar terlihat lebih tinggi. ha ha ha</p>
</div>
<div id=”content”>
nah, ini isi-nya, juga bisa disebut konten, atau apalah namanya, ya terserah anda.
</div>
<div id=”bottom”>
HasilBelajarDariDidats.net<br />
Tutorial oleh: didats<br />
This page is valid XHTML and CSS
</div>
</div>
</body>
</html>
Kemudian, kita buat file CSS persis dengan tutorial sebelumnya. Tapi untuk kali ini saya menamakannya “lagi.css”.
body {
text-align:center;
background:#8A8A43;
font-family:Verdana,Sans-serif;
font-size:11px;
margin:0px;
}#kotakbesar {
width:700px;
text-align:left;
margin:0px auto;
background:#FFF url(”back.gif”);
}
#header {
height:80px;
padding-top:20px;
background:#D3D3A5;
font-family:Georgia,Tahoma,Verdana,Sans-serif;
font-size:25px;
padding-left:10px;
}#sidebar {
float:left;
width:230px;
padding:5px;
line-height:20px;
}
#content {
width:430px;
float:right;
line-height:20px;
}
#bottom {
clear:both;
background:#C5C588;
padding:5px;
}
Yang perlu diperhatikan adalah pada file CSS #kotakbesar. Disana tertulis seperti ini:
background:#FFF url(”back.gif”);
Penggunaan kode heksa desimal #FFF adalah memberi warna background putih pada kotakbesar. Diikuti dengan url(”back.gif”) yang berarti kotak besar akan dipenuhi dengan gambar back.gif yang kita buat tadi. Penggunaan warna putih, berguna untuk user yang tidak meload gambar saat browsing, agar kotakbesar tidak transparan nantinya.
Sampai disini dulu tutorialnya, kalau ada yang kurang efisien, atau ada cara yang lebih mudah, saya terima usulnya. Dan sebelumnya, saya ucapkan terima kasih. Wah, 3 buah posting terakhir saya semuanya tentang tutorial, kalau begini terus, bisa-bisa saya diprotes majalah komputeraktif nih. :P *lirik mba okky dan om kere*
Daftar sekarang juga untuk cara gampang dapat uang lewat blog
upload hasil jadinya juga dong :D