Styling Unordered & Ordered lists

Secara default style daftar urut menggunakan bullent (unordered list) digambarkan dengan satu titik noktah yang cukup besar—lebih besar dari titik (“.”)—terletak didepan teks yang dilingkupinya. Sedangkan ordered Listditampilkan dalam bentuk angka (decimal).

Default List

Kita anggap saja garis vertikal di depan daftar urut berikut merupakan tepi kiri area suatu elemen.

Unordered List:

• Pasti suatu masa
• Kan bersama lagi
• Engkau dan aku pasti jua nikmati

<ul>
  <li></li>
  <li></li>
   …dst…
</ul>

Ordered List:

1. Satu cinta yang indah
2. Walau ku tak pasti
3. Bilakah masanya

<ol>
  <li></li>
  <li></li>
  …dst…
</ol>

Atau kita bisa memberikan style pada CSS (Cascading Style Sheets) seperti ini ul, ol {list-style-position:outside;}.

Unordered List:

• Pasti suatu masa
• Kan bersama lagi
• Engkau dan aku pasti jua nikmati

Ordered List:

1. Satu cinta yang indah
2. Walau ku tak pasti
3. Bilakah masanya

Bentuk tanda daftar urut tidak terbatas hanya pada bullent & angka (decimal), namun lebih banyak variasi yang dapat menjadi alternatif pilihan. Selengkapnya mengenai tipe-tipe lain, dapat dibaca di w3scholl.com.

Image List

Jika kode pemanggilan default style list menggunakan ul {list-style-type:...;} (unordered list) atau ol {list-style-type:...;} (ordered list), maka pemanggilan untuk daftar urut image menggunakan ul {list-style-image:url(...);} atau ol {list-style-image:url(...);}.

ul {
list-type-image:url(...);
}

Terkadang dalam kondisi tertentu (jenis peramban dan sebagainya), penggunaan style image—seperti pada contoh di atas—tidak muncul, sehingga kita membutuhkan ide lain untuk memunculkan image yang kita inginkan tersebut. Dalam arti, dapat didukung oleh tiap peramban, seperti di bawah ini:

ul {
list-style-type:none;
padding:0;
margin:0;
}

ul li {
background:url(...) 0px 5px no-repeat;
padding-left:1.5em;
}

• Kau dan aku
• Akan bertemu
• untuk kita kembalikan keindahan dulu

Catatan:
Image list di atas menggunakan properti sebagai berikut background:url(https://lh3.googleusercontent.com/-zDVeKnycsTc/TbHMCVfkKGI/AAAAAAAAAFQ/vRaTszCrgcI/s800/feed-gray-14x14.png) 0px 5px no-repeat.

Tentang penggunaan image sebagai daftar urut antar berbagai peramban (Crossbrowser Solution), kita kunjungi kembali w3schools.

Special Character List

Styling list dengan menggunakan karakter khusus memiliki keunikan tersendiri & yang jelas 
belum
 di support peramban IE (Internet Explorer). Daftar ini menggunakan CSS pseudo-element :before.

• pasti suatu masa, kan bersama lagi
• Engkau dan aku pasti jua nikmati
• Satu cinta yang indah
• Walau ku tak pasti bilakah masanya
• Kau dan aku akan bertemu
• untuk kita kembalikan keindahan dulu

CSS (Cascading Style Sheets)

.listwithchar {
list-style:none;
list-style-position:outside;
}

.listwithchar li {
margin-bottom:0.25em;
margin-left:0;
position:relative
}

.listwithchar li:before {
content:"\25CA";
margin-right:0.75em;
padding:0 0.25em;
position:absolute
text-indent:-0.75em
}

.listwithchar li:hover:before {
content:"\221A";
padding:0 0.25em;
position:absolute
text-indent:-0.75em
}

HTML (HyperText Markup Language)

<ul class="listwithchar">
  <li></li>
  <li></li>
  …dst…
<ul>

Untuk lebih mempermudah pencarian dalam menemukan spesial karakter yang kita inginkan, berikut salah satu alamat web yang melayani kebutuhan tersebut Evotech.net.

Dicopas Dari : optimasi blog