Tutorial Blog, Tips Blogging, SEO, Belajar Syntax HTML, PHP, CSS, dan Aktifitas Coding Lainnya
» » Membuat Penanda Item List dengan Gambar

Membuat Penanda Item List dengan Gambar

Oleh
Membuat Penanda Item List dengan Gambar - Masih tentang belajar CSS List. Ini adalah lanjutan dari postingan sebelumnya tentang mengatur penanda item list dengan CSS. Hanya sekarang lebih spesifik tentang menjadikan gambar sebagai item untuk membuat list/daftar.

Menjadikan gambar sebagai penanda item list bisa menambah daya tarik tersendiri, terutama untuk masalah penampilan keindahan desain. Apalagi kalau gambarnya sangat relevan dengan daftar list yang tercantum. Tentu menjadi semakin menarik.

Mengatur Gambar Sebagai Penanda Item List


Untuk membuat gambar sebagai penanda item, maka properti CSS yang digunakan adalah list-style-image. Contoh codingnya seperti ini :


<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-image: url('http://freerollsdb.com/images/fb_icon.jpg');
}
</style>
</head>
<body>

<ul>
  <li>Kopi Luwak</li>
  <li>Es Teh Panas</li>
  <li>Kopi Hitam Putih</li>
</ul>

</body>
</html>

Pada contoh tersebut, saya menggunakan gambar icon lambang facebook untuk dijadikan sebagai item list. Dari susunan kode tersebut maka akan menghasilkan seperti ini :

Membuat Penanda Item List dengan Gambar


Keterangan :

Contoh susunan kode tersebut akan menghasilkan item list dengan gambar. Hanya saja ukuran gambar yang menjadi item tidak sama besar di semua browser. Pada browser IE dan Opera akan terlihat lebih kecil gambarnya dibandingkan jika dibuka melalui browser Firefox, Chrome, dan Safari.

Untuk mengatasinya maka kita perlu menambahkan sedikit coding agar gambar item tampil sama besar di semua browser (crossbrowser). Seperti contoh berikut ini :


<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul li {
    background-image: url(http://freerollsdb.com/images/fb_icon.jpg);
    background-repeat: no-repeat;
    background-position: 0px center; 
    padding-left: 15px;
}
</style>
</head>
<body>

<ul>
  <li>Kopi Luwak</li>
  <li>Es Teh Panas</li>
  <li>Kopi Hitam Putih</li>
</ul>

</body>
</html>

Keterangan :

Pengaturan untuk <ul>:
- atur list-style-type nya menjadi "none" untuk menghapus penanda item list
- atur padding dan margin menjadi 0px (untuk cross-browser compatibility)

Pengaturan untuk <li> yang berada dalam <ul>:
- atur URL image hanya sekali tampil (no-repeat)
- atur posisi gambar seperti ini (left 0px dan vertical value nya: center)
- posisi teks pada list diatur menjadi padding-left

Dengan setting penulisan coding seperti itu maka item gambar pada list akan tampil sama besar di semua browser.

Itulah topik belajar CSS kali ini tentang menjadikan gambar sebagai item list. Sangat mudah dan simple bukan?


0 Komentar untuk "Membuat Penanda Item List dengan Gambar"

Back To Top