Acara “Tanya jawab XHTML/CSS web design usability lewat twitter” sesi pertama sudah berjalan, tak kurang dari 10 pertanyaan pertama sudah masuk dan syukurlah ternyata saya masih bisa menjawab :) meski tidak bisa terjawab secara langsung dan cepat, lewat postingan sebelumnya sudah saya sebutkan bahwa acara ini tidak dibatasi oleh waktu karena itu kita tidak perlu tergesa-gesa, selain karena berbagi waktu dengan pekerjaan juga karena saya harus browsing, googling sana-sini untuk memberikan jawaban. Disinilah poin pentingnya, bahwa akhirnya saya terpaksa belajar lewat pertanyaan yang masuk, setiap pertanyaan menjadi selayaknya tugas belajar di sekolah, dan siapapun yang bertanya ibarat guru bagi saya. Jawaban akhirnya juga bisa menjadi bahan untuk berbagi dan belajar bersama.
by trovster @flickr
Berikut rekap pertanyaan 1-10 (sesi 1) beserta jawabannya:
Pertanyaan 1 #zam gmn ya caranya bikin layout yg kolomnya sama tinggi pake css? @rizkysyazuli
- cara1 buat <div> sbg wrap dan <div> dalam <ul><li> sbg col. wrap display:table <ul> display:table-row <li> display:table-cell @rizkysyazuli
- keuntungan cara1 cukup sederhana tapi kekurangannya tidak bisa berjalan di IE7 apalagi IE versi dibawahnya @rizkysyazuli
- cara 2 mengakali tinggi kolom <div> menggunakan background image di wrap background-repeat: repeat-y; (repeat vertical) @rizkysyazuli
- keuntungan cara 2 cukup mudah kekurangan hanya bisa untuk kolom yg dibedakan warna oleh image dan tidak berlaku di fluid width @rizkysyazuli
- cara3 buat container <div> bertumpuk sebanyak jumlah kolom <div> masing2 kolom beda background dan tiap container meneruskan @rizkysyazuli
- cara3 semua <div> baik container maupun kolom float:left untuk container diberi jarak right: sesuai lebar kolom masing2 @rizkysyazuli
- keuntungan cara 3 bisa berjalan di semua browser kekurangannya agak ribet @rizkysyazuli
- cara 4 menggunakan jQuery dimana setiap <div> dalam container dibuat otomatis sama tingginya @rizkysyazuli
- keuntungan cara4 ok di semua browser kekurangan sulit mengatur <div> dlm <div> maupun <div> untuk clear:both ganti dgn <span> @rizkysyazuli
