CSS Lists

list-style-type

Properti list-style-type untuk menentukan jenis penanda.

ul {
list-style-type:circle;
}
ol {
list-style-type:upper-roman;
}

Nilai untuk Unordered Lists

Nilai	Keterangan
none	Tidak ada penanda
disc	Penanda dengan lingkaran yang diisi
circle	Penanda dengan lingkaran
square	Penanda dengan kotak

Nilai untuk Ordered Lists

Nilai	Keterangan
armenian	Penanda memakai nomor tradisional armenia
decimal	Penanda memakai nomor
decimal-leading-zero	Penanda memakai angka dengan awal nol (01, 02, 03, dll.)
georgian	Penanda memakai nomor tradisional georgia
lower-alpha	Penanda memakai huruf kecil (a, b, c, d, e, dll.)
lower-greek	Penanda memakai huruf kecil Yunani (alpha, beta, gamma, dll.)
lower-latin	Penanda memakai huruf kecil latin (a, b, c, d, e, dll.)
lower-roman	Penanda memakai angka romawi kecil (i, ii, iii, iv, v, etc.)
upper-alpha	Penanda memakai huruf besar (A, B, C, D, E, dll.)
upper-latin	Penanda memakai huruf besar latin (A, B, C, D, E, dll.)
upper-roman	Penanda memakai angka romawi besar (I, II, III, IV, V, dll.)

Browser IE8 tidak mendukung nilai : decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian.

---

list-style-position

Properti list-style-position untuk menentukan posisi list, apakah diluar atau didalam ?.

ul
{
list-style-position:inside;
}

Outside :

• Satu
• Dua
• Tiga

Inside :

• Satu
• Dua
• Tiga

Nilai	Keterangan
inside	Penanda akan muncul didalam konten
outside	Penanda akan muncul diluar konten. Ini default

---

list-style-image

Properti list-style-image untuk penanda menggunakan gambar.

ul.a
{
list-style-image:url(http://lh6.ggpht.com/_NUTOdYaT1os/TQYe9VheLSI/AAAAAAAACKA/NAeCt2R4kGE/s128/tutorial%20css%20-%20Nano%20Yulianto.gif);
}

Contoh :

• Satu
• Dua
• Tiga

Nilai	Keterangan
url	Gambar yang ingin ditampilkan sebagai penanda
none	Tidak ada Gambar

---

Penggabungan

Kalau digabungkan memakai properti list-style.

ul
{
list-style:square inside url(http://lh6.ggpht.com/_NUTOdYaT1os/TQYe9VheLSI/AAAAAAAACKA/NAeCt2R4kGE/s128/tutorial%20css%20-%20Nano%20Yulianto.gif);
}

Urutan Properti :

ul{
list-style:list-style-type list-style-position list-style-image;
}

---

Alhamdulillah