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
47 Responses
Udah rajin apdet blog ya ??
woy dat. url gak valid!
Ini dia, kalau masalah JS aku masih PUSINGGGG :(
ada yg blom lo tulis neh.
lo berasumsi kolom kiri _selalu lebih_ tinggi daripada kolom kanan?
kapan buat buku nih?
#2
url mana yang gak valid?
#5
gw ngambil contoh yang paling gampang aje…
hihihi… :D
#6: itu url ke cumatest.html
kok ada /page/ nya
#7
hahaha… cms-nya dodol!
tengkiyu iang… :D
Waaaaaaah .. asyiik nih… kalo tutorialnya boleh di copy paste gak, kan gak nyontek … ;))
HAHAHAHAHAHAHA
akhirnya gw gak nulis triadi lagi
tutorial yang bagus
HAHAHAHAHAHAHA
akhirnya gw gak nulis triadi lagi
tutorial yang bagus
HORE, gak usah ngetik triadi lagi!
lah, tetep aja ngetik disini
ANJRIT, teteap kena
Your IP Address not recognize. Please type triadi.
Your IP Address not recognize. Please type triadi.
triadi
triadi
triadi
triadi
triadi
triadi
triadi
*DP triadi buwat besok sekalian*
duh.. komenku koq di potong sih??? *untung dah gw kopipes dulu*
———————————-
comment:
duh… knapa ya banyak kesalahan tulis seperti “diatas” ? seharusnya kan “di atas” karena “di” menunjukkan kata letak, bukan kata kerja seperti “di-”.
lagipula, “diatas” kalo dibaca cepat jadinya “didats” .. aku pikir, makin narsis aja seleb satu ini..
*ngeloyor ahh..*
nb: dtws keluarin aksimet ya?
#16
penggunaan kata di potong dari komentarmu:
“duh.. komenku koq di potong sih??? *untung dah gw kopipes dulu*”
juga SALAH. Kok niat ngebenerin orang, tapi sendirinya masih salah? hihihi
maaf, ini cms emang dodol!
kadang kata-katanya disambung nggak jelas. tapi, ya begitulah.
aksimet?
bukan, nama pluginnya TRIADI.
PUWAS??
hahahaha… *tertawa jumawa*
lumayan…
tutorial yang menarik, nanti saya coba!
hehehe…
ayo kak, bikin buku css… aku cari2 di toko buku di indonesia, belum ada buku css terbitan Indonesia…
tanpa skrinsyut adalah BASBANG
you rock!! rock on!
Hi people
I have a good newest fot you
The duble and be for have a new music
It´s looks likes the table
So he´s a little bit different
The name is THE BOOK IS ON THE TABLE
Let´s play DJ
I´m sorry
I have a datail for you
EVERYTHING IS ON THE TABLE
iya neh .. giman coba ntar klo aku nyoba tapi gk bsia bandingin .. udah bener gk neh sama tutorial yg dikasih ..
SKRINSUT!!!!!
:p
lama gak komen disini soalnya harus nulis triadi .. very no no :D
XIXIXIXIXI….
Udah gag harus ketik T R I A D I lagi..
Thanks anyway..
mari kita coba
Gini yah maksudnya?
sux! urlnya jadi gak jelas! bug! bug! :D
http://aldi.kriwil.com/files/kolomsamatinggi.html
kalo gag ada japasekrip gag jalan yach ??
#19, kalo nyari ya gag ada,
gag ada yang nanam :D
kalo mo beli ada kok
terbitan andi opset
* males nulis pengarangnya *
#27 aldi penipuh :p
* puwas gag nulis triadi lagee *
:-”
#28 dapetnya angka 99999 darimana ??
kok gag 68%™ aja :D
* ngeloyor *
#28
lapor ohm,
test pake
- payerpok (1.5.0.1): sukses
- opera 9 (8031): sukses
- IE 7.0.5296.0: ancur
- kingkong error: gag punya (males ristat)
sory ohm pebeka numpang komen disini, blognya kriwil cuman keluar:
Hiatus … ^^;
puwasss….!! :D
#28: ah IE! lupa yang satu itu agak aneh :D
pake 686868 juga bisa kayaknya :P
mission failed! wakakakakaka! :D
iya bener dats: PANJANG! hehehe…
agak telat, karena mo bikin yg 3 kolom :)
makasih ya, posting ini boleh disimpen kan? (ntar gue diomelin lagi :p )
#PUWAAAAASSSS.. (mang enak ngetik triadi mulu :p ) hihi
kamu ngerjain ya dats? :p
huahahahahahhahahahahaaa !!!!
hihihihi
PUWAS!!!
Implementasi Box model yang bener tuh di browser mana??
top deh tutorialnya
4 jempol
pokok nya
Lho gimana sih sampeyan. Dari dulu aku kan menyarankan supaya ente bikin tuh buku soal CSS. Buku soal WordPress atau blogtools juga lum ada tuh…ayo buruan :D
great stuff dats. gue juga baru bikin artikel mirip ini. tapi versi aye ngga perlu pake javascript. klo mau liat dateng aja ke blog gue. di review ya, kritik en saran juga ditunggu nih.
btw, thx for the inspiration man.
Thanks so much didaaattsss. aku jadi lebih tau dikit2x.. makasih ya bro :)
Algoritma nya kynya kurang tepat deh, soalnya gimana kalo kondisinya ternyata isi dari sidebar lebih banyak dari konten ? misalnya ada satu konten(post) yg cuma berisi satu paragraf, sedangkan sidebarnya sudah penuh dengan archive list, category list,dsb. tentunya algoritma kolomsatu-kolom2dua ga berlaku boss.. :D
gmn kalo dicari dulu siapa yg lebih tinggi, baru di kurangi.. Just my opinion
mas didats, saya kok ndak bisa yah? masih tetep lebih panjang yang kiri loh :(
style sama js sudah saya sisipkan di antara head di bawah title.
di FF or IE jg ga bisa :(
makasih.
Hah.. postingan lama..
salah satu masalah umum pake layout CSS adalah biar 2 kolom tingginya otomatis sama :)
dalam hal ini table baru menang :D
karena table property height=100% bisa,
e buseet.. iyah ternyata postingan lama..
eh ngomong2 mana sih yang pake nulis triadi, kok gw ga dapet jatah?
syukur deh..
harus pake javascript kah? kalau murni CSS ada ga om
Berhubung gw bukan IT Handal…yaaa…bengong aja…