Tipe HTML List
Terdapat tiga tipe list HTML, yaitu:
- Unordered lists —— Daftar item, di mana setiap daftar item ditandai dengan peluru.
- Ordered lists —— Daftar item, di mana setiap daftar item ditandai dengan angka.
- Definition list —— Daftar item, dimana setiap itemnya di sertai dengan deskripsi.
Styling List dengan CSS
Secara default, item dalam ordered list diberi nomor dengan Arabic numerals (1, 2, 3, dll.), Sedangkan dalam unordered list, item ditandai dengan round bullets (peluru bundar). Tapi, kalian bisa mengubah jenis penanda daftar default ini ke jenis lain seperti lingkaran, kuadrat, angka romawi, huruf latin, dan sebagainya menggunakan properti list-style-type. Berikut contohnya:
ul {
list-style-type: square;
}
ol {
list-style-type: upper-roman;
}
Mengubah Posisi List Marker
List marker diposisikan di luar kotak daftar item, secara default. Namun, kalian dapat menggunakan properti list-style-position untuk menentukan apakah marker atau poin-poin muncul di dalam atau di luar daftar utama kotak blok. Properti ini mengambil nilai inside atau outside, dengan outside menjadi defaultnya. Berikut contohnya:
ul.in li {
list-style-position: inside;
}
ul.out li {
list-style-position: outside;
}
Menggunakan Gambar sebagai List Marker
Kalian juga dapat mengatur gambar sebagai list marker menggunakan properti list-style-image.
Aturan style dalam contoh berikut menetapkan gambar PNG transparan “arrow.png” sebagai list marker untuk semua item dalam unordered list.
ul li {
list-style-image: url("arrow.png");
}
Contoh di atas tidak menghasilkan output yang sama di semua browser. Internet Explorer dan Opera akan menampilkan image-marker sedikit lebih tinggi dari Firefox, Chrome, dan Safari. Di bawah ini merupakan solusi untuk mengatasi permasalahan tersebut.
Solusi untuk Image Marker Cross Browser
Saat menggunakan gambar sebagai penanda dengan menggunakan properti list-style-image, penanda tersebut tidak akan ditampilkan dengan seharusnya antara satu browser dengan browser yang lainnya. Sebagai solusi, kalian dapat menyelaraskan gambar penanda tersebut dengan benar melalui properti background-image CSS. Pertama, atur daftar agar tidak menggunakan penanda (list marker) apapun. Kemudian, tentukan gambar latar yang tidak berulang untuk elemen daftarnya.
Contoh berikut menampilkan penanda gambar secara merata di semua browser:
ul {
list-style-type: none;
}
ul li {
background-image: url("arrow.png");
background-position: 0px 5px; /* X-pos Y-pos (from top-left) */
background-repeat: no-repeat;
padding-left: 20px;
}