Seringkali
pada web terdapat daftar informasi yang beratribut bullet dan Numbering
berupa widget. Bagaimana cara membuatnya? Berikut cara mengatur list dengan css
antara unordered list dan ordered list.
Daftar
properti-properti yang akan kita bahas pada tutorial cara mengatur list dengan
css ini.
- list-style-type digunakan
untuk menentukan bentuk penanda daftar list
- list-style-position digunakan
untuk menentukan posisi penanda daftar list
- list-style-image digunakan
untuk mengubah bentuk penanda daftar list menjadi gambar
- list-style properti
singkat untuk menentukan atau mengatur list dengan css dalam satu
deklarasi
Dari properti-properti
tersebut, akan kita bahas secara detail
agar lebih mudah dipahami, selanjutnya untuk dipraktikkan.
Cara Mengatur List Dengan CSS
Pada
tutorial ini penulis anggap bahwa pembaca sudah memahami bagaimana cara membuat
daftar/list dengan html karena kita akan membahas untuk membuat style tambahan
dengan css yaitu cara mengatur list dengan css.
Properti list-style-type di css
Penggunaan
properti list-style-type digunakan untuk menentukan bentuk atau gaya penanda
atau marker pada tiap list nantinya, karena telah kita ketahui bahwa ada dua
tipe list yang bisa digunakan yaitu unordered list dan ordered list. Berikut
ini masing-masing nilai yang bisa digunakan untuk menentukan bentuk penanda pada
daftar/list agar dapat mengatur list tersebut dengan css.
Unordered list
Berikut
ini daftar-daftar tipe penanda yang bisa digunakan untuk menentukan bentuk
unordered list dengan css.
|
Nilai |
Keterangan |
|
None |
Digunakan untuk
menghilangkan tanda pada list |
|
Disc (default) |
Digunakan untuk
menampilkan tanda lingkaran solid |
|
Circle |
Digunakan untuk
menampilkan tanda lingkaran |
|
Square |
Digunakan untuk
menampilkan tanda kotak solid |
Ordered list
Lalu
berikut ini daftar bentuk tanda yang bisa digunakan untuk menentukan bentuk
ordered list (daftar terurut) dengan css.
|
Nilai |
Keterangan |
Contoh |
|
Decimal |
Angka |
1, 2, 3, 4, 5 |
|
decimal-leading-zero |
Pengurutan angka
dengan 0 didepan |
01, 02, 03, 04, 05 |
|
lower-alpha |
Pengurutan alfabet
dengan huruf kecil |
a, b, c, d, e |
|
upper-alpha |
Pengurutan alfabet
dengan huruf besar |
A, B, C, D, E |
|
lower-roman |
Pengurutan romawi
dengan huruf kecil |
i, ii, iii, iv, v |
|
upper-roman |
Pengurutan romawi
dengan huruf besar |
I, II, III, IV, V |
|
lower-greek |
Pengurutan
menggunakan huruf kecil yunani |
alpha, beta, gamma,
dan lain-lain |
|
lower-latin |
Pengurutan
menggunakan huruf kecil latin |
a, b, c, d, e |
|
upper-latin |
Pengurutan
menggunakan huruf besar latin |
A, B, C, D, E |
Sebenarnya
untuk penanda ordered list memiliki banyak bentuk, namun untuk standarisasinya
tidak semua digunakan, hanya yang seperlunya saja, selain itu nanti bisa
dikembangkan sendiri. Berikut ini contoh penggunaan list-style-type untuk
mengatur bentuk penanda pada list atau daftar html.
Silahkan Download Kode Widget tersebut DISINI
Contoh yang telah sukses pada website Desa Panunggalan pada Widget JARINGAN INFORMASI PEMDA
Terima Telah Berkunjung