blog, tutorial
Tutorial: Membuat 2 kolom sama tinggi tanpa bantuan image
February 22nd, 2006
Perhatian: Tulisan ini sangat panjang. Lebih baik invite aan sebelum membaca. Karena unsur peras aan sangat penting sebelum membaca tulisan ini.
Dulu, aku pernah menulis tutorial bagaimana membuat 2 kolom sama tinggi dengan menggunakan bantuan image. Tutorial kali ini, dengan tujuan yang sama, tapi dengan cara yang berbeda. Dan mungkin, ini yang selama ini kita cari. *halah! pede*
Hasil yang akan kita dapat dari tutorial kali ini bisa dilihat disini. Bagi seorang IT handal, mungkin dengan melihat kode dari contoh bisa langsung mengerti. Bagi yang belum, silahkan meneruskan membaca.
Apa yang kita perlukan?
Seperti biasa, aku hanya membutuhkan editor. Notepad bukanlah jawaban yang bagus. Cobalah Editplus, atau Crimson Editor. Aku, seperti biasa menggunakan PHPEdit versi 0.8.0.25 (Versi yang masih gratis).
Setelah editor, tentu saja kita membutuhkan aplikasi bernama browser. Dan seperti biasa juga, aku menggunakan 3 buah browser untuk membandingkan hasilnya. Firefox, Internet Explorer dan Opera.
Algoritma
Algoritma dalam bahasaku adalah bagaimana cara mendapatkan hasil yang dituju. Jika kita ditanya, bagaimana caranya pergi ke Bali dari Jakarta, jawaban kita pasti macam-macam. Aku, mungkin naik pesawat yang MURAHAN *huh!*, atau bisa juga melewati jalur laut, atau, bisa juga dengan naik bis. Dan yang paling ekstrim adalah dengan tidur. Loh? ya iya, bermimpi pergi ke Bali juga sudah cukup mengantarkan kita. Hihihi. Hi Nugi!
Lalu, apa hubungannya pergi ke Bali dengan tutorial ini? Ya tidak ada!
Okeh, kita mulai dengan membuat algoritma untuk membuat 2 kolom sama tinggi. Algoritma ini akan menggunakan bahasa yang paling mudah dimengerti oleh manusia. Jika kita analogikan kolom pertama bernama a, dan kolom kedua bernama b, sedangkan kolom yang paling tinggi adalah kolom a.
- Buat sebuah variabel (penampung yang mempunyai nilai) bernama c
- Cari tahu tinggi kolom a
- Cari tahu tinggi kolom b
- Isi variabel c sama dengan tinggi kolom a dikurangi tinggi kolom b (c = a - b)
- Jadi, tinggi kolom b adalah tinggi kolom b saat ini ditambah dengan nilai dari variabel c.
Mudah bukan? ayo kita lanjut.
Analogi sebuah nama
Setiap yang ada di dunia pasti punya nama. Jika disebutkan sebuah nama, maka paling tidak di otak kita pasti mempunyai gambaran-gambaran yang menjelaskan arti nama tersebut. Misalnya, mendengar kata didats, yang ada di pikiran adalah dia cowok, tinggal di Bali, sudah agak hitam, dan mulai gemuk. *narsis*
Begitu juga dengan XHTML. Setiap elemen bisa kita beri nama. Mungkin inilah saatnya kita tahu, apa sebenarnya fungsi dari penggunaan atribut ID secara lebih jauh. Itulah kenapa ID bersifat unik, karena ia menjelaskan sebuah nama dari setiap elemen.
Coba tengok kode XTHML di bawah ini:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head profile=”http://gmpg.org/xfn/1″>
<title>Eh, beneran! ini cuma test</title>
</head>
<body >
<div id=”kolom_satu”>
<p>Ini isi dari kolom satu.</p>
<p>seharusnya, tanpa bantuan javascript, kolom ini lebih panjang</p>
<p>dan dengan javascript, kolom ini dan kolom kedua bisa sejajar</p>
</div>
<div id=”kolom_dua”><p>kosong</p></div>
</body>
</html>
Simpan kode diatas sebagai file yang berakhiran .html
Dari kode diatas, terdapat 2 buah nama yang bisa kita lihat dari atribut ID. Yang pertama, div yang bernama kolom_satu, dan div yang bernama kolom_dua.
Kita lanjut ke bagian CSS. Sisipkan kode di bawah ini diantara tag HEAD. Entah itu di atas tag TITLE atau di bawah.
<style type=”text/css”>
p {
width:70px;
position:relative;
left:10px;
}
#kolom_satu {
background:#999999;
color:#FFFFFF;
line-height:18px;
width:100px;
position:relative;
float:left;
left:10px;
}
#kolom_dua {
background:#000000;
color:#FFFFFF;
position:relative;
left:20px;
float:left;
width:100px;
}
</style>
Dari kode CSS di atas, aku tidak langsung membuat nilai tinggi. Tinggi kedua kotak tersebut tergantung dari isi dari setiap kotaknya. Dengan lebar masing-masing kotak adalah 100 piksel dan dengan warna masing-masingnya adalah abu-abu gelap dan hitam.
Sekarang kita lanjut ke bagian Javascript. Disinilah algoritma yang sudah kita bahas di atas terpakai. Sisipkan kode di bawah ini juga diantara tag HEAD. Lagi-lagi terserah anda, yang terpenting adalah DIANTARA TAG HEAD (pengalaman jadi pengajar, kadang hal-hal kecil seperti ini juga ditanyakan).
<script type=”text/javascript”>
function Dats_BuatSamaTinggi_Dong() {
var kolomsatu = document.getElementById(”kolom_satu”);
var kolomdua = document.getElementById(”kolom_dua”);
TinggiKolomSatu = kolomsatu.offsetHeight;
TinggiKolomDua = kolomdua.offsetHeight;
TinggiSisa = TinggiKolomSatu - TinggiKolomDua;
kolomdua.style.paddingBottom = TinggiSisa + “px”;
}
</script>
Dari kode diatas, kita akan bahas perbaris.
var kolomsatu = document.getElementById(”kolom_satu”);
var kolomdua = document.getElementById(”kolom_dua”);
Begitulah javascript mengenali nama elemen di XHTML. Sebelumnya, kita sudah membuat sebuah div dengan atribut id kolom_satu dan kolom_dua. Pada kode di atas, kita membuat variabel kolomsatu yang secara tidak langsung merujuk kepada div dengan atribut id kolom_satu. *Duh! semoga ngerti*
TinggiKolomSatu = kolomsatu.offsetHeight;
TinggiKolomDua = kolomdua.offsetHeight;
Lihat lagi algoritma diatas, kedua baris kode di atas adalah poin nomor 2 dan 3.
TinggiSisa = TinggiKolomSatu - TinggiKolomDua;
Lihat lagi algoritma diatas, kedua baris kode di atas adalah poin nomor 4.
kolomdua.style.paddingBottom = TinggiSisa + “px”;
Ini menarik. Javascript bisa juga mengontrol properti CSS, dengan bentuk umum seperti di bawah ini:
nama_objek.style.propertiCSS = nilai_properti_CSS;
Dari javascript, jika ingin mengganti background-color dari kolom pertama adalah:
kolomsatu.style.backgroundColor = “#FF0000″;
Nah, untuk mensejajarkan kolom pertama dan kolom kedua, akan lebih baik jika kita menggunakan properti padding-bottom. Dan dengan javascript bisa kita tulis seperti ini:
kolomdua.style.paddingBottom = “50px”;
Terakhir, kapan kita memanggil fungsi yang sudah kita buat. Di dalam contoh, aku memanggil fungsi javascript ketika kotak kedua di klik, dan di tutorial ini, aku akan memberi contoh ketika halaman XHTML di load, maka saat itulah fungsi tersebut kita panggil. Cukup dengan menambahkan atribut di dalam tag BODY.
<body onload=”Dats_BuatSamaTinggi_Dong()”>
Okeh, sebagai latihan untuk lebih memperdalam pembahasan ini, mungkin bisa dicoba sebagai berikut:
Untuk seseorang yang mengaku mengerti dunia IT:
Buat tiga, atau empat, atau lima kotak yang tingginya sejajar. Tentunya, anda tidak mengetahui kotak mana yang paling tinggi.
Untuk seseorang yang mengaku awam dan mau belajar:
Baca-baca tentang properti CSS dan penggunaan sintak di Javascript, kemudian buat 2 kolom tersebut berwarna sama tanpa merujuk kode background pada CSS.
And, you know, where to find me if you have a problem with this tutorial. Wah, aku buat buku CSS kayaknya menarik nih… :D
Daftar sekarang juga untuk cara gampang dapat uang lewat blog
Udah rajin apdet blog ya ??