List CSS

Kalau berbicara mengenai cara membuat list menggunakan HTML maka kita mengenal ada dua bentuk list yaitu ordered list dan unordered list. Dengan modifikasi CSS maka kamu bisa menambahkan lagi satu jenis list yaitu menggunakan image sebagai pengganti symbol angka maupun bullet pada list.

List style type

Ada beberapa jenis list CSS yang bisa kamu gunakan, yaitu:

  • Unordered: square, circle, disc (default), none
  • Ordered: Upper-alpha, lower alpha, upper-roman, lower-roman, decimal (default), none

Code CSS list:

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

Hasil code CSS list:

Contoh dari ordered list:

  1. Apel
  2. Mangga
  3. Jeruk

Contoh dari unordered list:

  • Keju
  • Susu
  • Telor

List style image

Seperti yang sudah saya singgung di atas, kamu bisa menggunakan image sebagai penanda list.

Code List image:

ul { list-style-image: url(http://jujucode.files.wordpress.com/2014/07/bd21299_1.gif); }
ol { list-style-image: url(http://jujucode.files.wordpress.com/2014/07/bd21375_.gif); }

Hasil code List image:

Contoh dari unordered list:

    • Apel
    • Mangga
    • Jeruk

Contoh dari ordered list:

    1. Keju
    2. Susu
    3. Telor

Dari contoh diatas kita bisa melihat bahwa tidak ada perbedaan antara code <ul> dan <ol> saat menggunakan image.

Yang perlu diperhatikan dalam penulisan code URL image adalah kita tidak menggunakan symbol double quote ["].

List style position

Untuk memodifikasi spasi indent pada list kamu bisa menggunakan code berikut.

Code CSS list position:

ul { list-style-position: inside; }
ol { list-style-position: outside; }

Hasil code CSS list position:

Unordered list:

  • Perbedaan list yang menggunakan inside style position dan outside style position adalah pada tampilan bullet yang masuk dan segaris dengan text pada baris kedua text.
  • Bullet bergerak mundur
  • Bullet dan text pada baris kedua sejajar.

Ordered list:

  1. List ini menggunakan outside positioning style dan merupakan default position dari list sehingga text tidak ditampilkan sejajar dengan angka melainkan text ditampilkan tidak melebihi angka
  2. List yang tampil ini adalah default
  3. Text tampil sejajar dengan text diatasnya

All in one list-style

Kamu bisa menggabungkan semua jenis style list diatas menjadi satu baris code dengan code list-style. Pada contoh dibawah kita akan menggabungkan antara type, position, dan image list.

Code CSS gabungan:

ul { list-style: upper-roman inside url(http://jujucode.files.wordpress.com/2014/07/bd21314_.gif);}

Hasil code CSS gabungan:

Unordered list:

  • Keju
  • Susu
  • Telor

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>