CSS, Mengenal List Properties

List atau daftar, atau kalau di ms word kita mengenalnya dengan nama bullet and numbering adalah model penomeran berhierarki. Bisa menggunakan huruf, angka, atau lambang (bullet). Dalam pemrograman internet, css, kita bisa mengunakan fungsi list yaitu ul untuk unorderd list (list yang tidak bernomor) dan ol yaitu ordered list. Selain itu ada list yang horizontal dan ada list yang vertikal. Ada list yang memakai angka atau huruf, ada list yang memakai bullet atau image.

Bedanya ul dan ol? Sebelum itu kita harus tahu, ul dan ol adalah tag untuk list, untuk membuat list itemnya, kita butuh satu lagi tag yaitu li. jadi tag li harus berada dalam tag ul atau ol. Dan tag ul atau ol di dalamnya harus ada li.

contoh:
Un-Ordered List

<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
</ul>

hasilnya:

• list 1


• list 2


• list 3


• list 4


• list 5

ordered list:

<ol>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
</ol>

Hasilnya:

1. list 1


2. list 2


3. list 3


4. list 4


5. list 5

List dengan link:

<ul>
<li><a href="http://www.paradesain.net">paradesain</a></li>
<li><a href="http://forumpurworejo.blogspot.com">forum blogger purworejo</a></li>
<li><a href="http://medscript.brinkster.net">medscript on brinkster</a></li>
</ul>


hasilnya:

• paradesain


• forum blogger purworejo


• medscript on brinkster

mengatur jenis/ type list:
untuk mengatur type list kita bisa menggunakan property list-style-type
contoh:

buat dulu css nya di style, misalnya
li.list1 { list-style-type:suare;} akan menghasilkan list kotak;
li.list1 { list-style-type:circle;} akan menghasilkan list linkaran berlubang;

untuk membuat list berupa icon atau image pakai list-style-image:
li.list1 { list-style-image:url(sumber file)}

Penulisannya:

<ul>
<li class="list1">list 1</li>
<li class="list1">list 2</li>
</ul>


List ke kanan dan list ke bawah:

untuk list ke kanan (contoh untuk navigasi atas di blog ini, dan blogger indonesia).
pakai properties untuk li { display:inline}

untuk list ke bawah (contoh seperti sidebar di blog ini):
pakai properties untuk li { display:block;}

silakan dikembangkan sendiri, gunakan properties margin dan padding untuk ul, border-bottom, tambahkan background-color untuk link. bagi para blogger pengunjung blog ini yang ahli CSS, mohon koreksinya bila ada kesalahan.