Duh.. pengen sih ngulas soal CSS. Tapi kyk nya agak ribet, musti dengan ilustrasi gambar dsb. Soal pertanyaan yg sebelumnya ttg CSS juga ntar deh klo ada waktu sy bantu jawab :D. Skrg yg ini dulu (yg pendek)
(kalau ada rekan2 lain yg bisa membantu Pak Acep menjawab juga monggo)
Kita harus tahu berapa lebar container tempat menaruh gambar2 tersebut. Yg dimaksud container kira2 gini:
<div id="content">
<img src="blablabla" alt="blablabla"/>
<img src="blablabla" alt="blablabla"/>
<img src="blablabla" alt="blablabla"/>
</div>
Dlm contoh di atas, yg dimaksud container itu maksudnya elemen DIV dengan ID ‘content’.
Misalkan lebar (width) elemen #content ialah 400px. Jika ketiga gambar tersebut diberikan properti { float: left } dan jika jumlah lebar luar dari ketiga gambar tersebut dijumlahkan hasilnya tidak lebih dari lebar container, maka otomatis gambar tersebut akan berjejer 3.
Yg saya maksud lebar luar dari tiap gambar adalah width (lebar dalam) + padding (kiri + kanan) + border (kiri + kanan) + margin (kiri + kanan).
Kalau sisa lebar container tidak akan cukup untuk gambar keempat, maka gambar berikutnya otomatis akan terletak di bawah.
Jadi, kalau seluruh gambar tersebut memiliki tinggi yang sama, hanya menjejerkan keenam gambar tersebut, dan memperhitungkan lebar kontainer kira2 hanya cukup untuk tiga gambar (tidak lebih). Secara otomatis keenam gambar tersebut akan berjejer tiga tiga.
Kalau tingginya beda-beda, bisa diakalin dengan menyisipkan elemen <div> di antara gambar ketiga dan keempat, lalu elemen div tersebut diberi properti { clear: both }.
Oya Pak. Untuk mendebug CSS, saya sarankan pakai Firefox dan install Addon firebird.
Nanti dengan menunjuk salah satu elemennya, kemudian di panel kanan addon firebird, kita pilih tab ‘layout’, kita bisa dengan mudah mengetahui:
- di mana lokasi elemen tersebut relatif terhadap halaman
- lebar, tinggi, padding, border, margin dari keempat sisi elemen tersebut
selain itu kita juga bisa melihat properti-properti dari sebuah elemen, dan di mana properti itu dideklarasikan (sangat berguna jika njenengan memakai lebih dari satu berkas stylesheet).
