Styling Unordered & Ordered lists

Styling Unordered & Ordered lists

Posted by rike on 0

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 List ditampilkan dalam bentuk angka (decimal).

Default List

Kita anggap saja warna latar (background) merupakan 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:none;
margin-left:0;
}

ul li {
background:url(...) 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1hTvsHB6i8oUWh9KnWV1BAuCrrgR1QRtkefX14zrkT6n7jWPPxNxdidiy5YFIpLCRkSZQydUw4UpgqIVxIRmUWnR9ihUJfjiDPa2hnOPQH8AVso1QrezJ6MQuOHEx6QiblT9KEezjBwg/s800/OB%2520sprite.png) no-repeat -9px -280px;.

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;
margin-left:0;
}

.listwithchar li {
margin-left:1.5em;
position:relative
}

.listwithchar li:before {
content:"\25CA";
margin-left:-1.5em;
position:absolute
}

.listwithchar li:hover:before {
content:"\221A";
position:absolute
}

Perlu dijadikan catatan bahwa pengkodean untuk <ul> atau <ol> pada setiap template mungkin berbeda.

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.