Membuat layout dasar

Membuat Layout Dasar

Sekarang kita akan mengisi bagian konten halaman. Bagian konten akan kita isi dengan daftar produk. Edit kode bagian content menjadi seperti ini:

<div class="content"> <h2>My Articles</h2> <h2>My Products</h2> <div class="thumbnail"> <img src="http://via.placeholder.com/250x150"> <h2>Product 2</h2> <p>Rp 250.000</p> </div> </div>

Kemudian pada bagian <style> tambahkan CSS berikut:

.thumbnail { background-color: white; text-align: center; padding: 10px; }

Hasil dari kode di atas akan nampak seperti ini:

Kita ingin agar dalam satu baris, terdapat 3 buah produk yang ditampilkan. Sedangkan pada hasil kode yang sudah kita miliki, kita hanya memiliki satu buah produk yang memenuhi semua lebar baris. Oleh karena itu, kita harus mengatur width dari elemen .thumbnail agar dalam satu baris dapat masuk 3 buah produk.

Tambahkan baris kode CSS berikut pada bagian selector .thumbnail:

.thumbnail { background-color: white; text-align: center; padding: 10px; width: 225px; margin: 10px; }

Kita set widthnya menjadi 225px dengan asumsi dari total lebar parentnya yang 800px dapat diisi dengan tiga buah kotak thumbnail berukuran 225px. Selain itu kita juga menambahkan margin pada thumbnail agar jarak satu sama lain tidak berhimpitan. Hasil akhir dari pembaharuan kode di atas akan menjadi seperti ini:

Dan bila kita menyalin elemen .thumbnail menjadi 3 buah, akan nampak seperti ini:

Ternyata .thumbnail kedua dan ketiga akan ditampilkan ke bawah, meskipun width dari setiap thumbnail sudah dibuat lebih kecil. Hal ini terjadi karena sifat display:block dari elemen .thumbnail yang akan mengisi lebar dari parentnya. Adapun ruang kosong di sebelah kanan dari setiap elemen .thumbnail setelah widthnya diperkecil akan otomatis menjadi margin dari elemen tersebut.

Tambahkan CSS berikut pada selector .thumbnail:

.thumbnail { background-color: white; text-align: center; padding: 10px; width: 225px; margin: 10px; float: left; } .thumbnail img { width: 100%; }

Pada .thumbnail, kita tambahkan property float:left sehingga ruang sisa dari setiap barisnya akan kosong dan diisi oleh elemen di bawahnya. Selain itu kita juga menambahkan selector baru yakni untuk elemen image yang ada di dalam .thumbnail agar ukuran widthnya mengikuti ukuran dari parentnya.

Hasil akhir dari pembaharuan kode kita akan tampil seperti ini:

Masalah selanjutnya yang harus kita tangani dari penggunaan float adalah membersihkan efek float. Bila kamu coba menyalin elemen .thumbnail menjadi 6 buah atau lebih, maka tampilannya akan seperti ini:

Seperti kita lihat, .thumbnail keluar dari kotak, dan teks footer naik mengisi ruang kosong di sebelah kanan .thumbnail terakhir. Untuk mengatasi hal ini, kita cukup menambahkan CSS overflow:auto pada parent dari .thumbnail, yakni pada elemen .content:

.content { background-color: #ddd; min-height: 500px; overflow: auto; }

Dengan demikian, efek float tidak akan mengenai elemen yang ada di bawahnya.

Terakhir kita tinggal merapikan konten untuk footer, dengan menambahkan padding dan rata tengah. Tambahkan CSS berikut pada bagian selector .footer:

.footer { background-color: #ccc; min-height: 50px; padding: 20px; text-align: center; }