Membuat Web : Mengatur List Melalui CSS

Tulisan kali ini masih seputar pengetahuan membuat web khususnya terkait dengan tutorial CSS. Pada tulisan kali ini akan dibahas tentang pengaturan list dengan menggunakan CSS. Untuk mengatur tampilan list, CSS menyediakan beberapa property yang bisa kita gunakan, misalnya mengatur jenis bullet yang digunakan, mengatur tampilan masing-masing item pada list dan beberapa property lainnya.

1. Mengatur jenis bullet

Untuk mengatur jenis bullet yang akan dipakai pada list, kita bisa menggunakan list-style-type. Dengan property ini kita bisa mengatur bentuk dari list yang ingin kita tampilkan. Property ini bisa kita gunakan untuk mengatur tampilan yang akan di terapkan pada <ol>, <ul>, dan <li>.

Penggunaan pada list yang tidak berurutan atau <ol> dapat memilih salah satu value dari beberapa value yang disediakan yakni none, disc, circle, dan square.

Berbeda dengan penggunaan pada list yang berurutan, pada list jenis ini beberapa pilihan nomor disediakan seperti:

  • decimal : menampilkan bilangan desimal
  • decimal-leading-zero: desimal yang di awali nol, misalnya 01 02 03 dst
  • lower-alpha : menampilkan huruf kecil pada urutan list, misalnya a b c dst
  • upper-alpha: menampilkan huruf besar pada urutan list, misalnya A B C dst
  • lower roman : list berupa huruf romawi kecil, seperti i, ii, iii
  • upper-roman: list berupa huruf romawi besar seperti I II III

Berikut ini contoh sederhana pengaturan list melalui CSS

css_list_1.png

2. Mengatur Gambar Sabagai Bullet

Anda bisa menentukan sebuah gambar untuk menjadi bullet pada list yang anda buat dengan menggunakan property list-style-image.

Value pada property ini berupa alamat lokasi gambar tersebut disimpan. Property ini hanya berlaku pada <ul> dan <li>.

Anda juga bisa mengatur margin pada tiap item untuk mengatur jarak antara satu item dengan yang lain.

Untuk mengatur agar bullet pada list berupa gambar, dapat mengikuti contoh berikut ini. Pada contoh ini diasumsikan anda menyimpan file gambar anda pada folder images.

css_list_2.png

3. Mengatur posisi bullet

Biasanya list secara default akan ditampilkan menjorok kedalam dari isi utama sebuah halaman. Property list-style-position akan mengatur apakah tanda tiap list atau bullet akan ditampilkan didalam atau diluar kotak yang berisi isi utama dari sebuah halaman.

Saat tampilannya ditentukan outsidee, maka tanda dari list akan berada pada posisi kiri dari sebuah blok teks. Tampilan ini juga tampilan yang secara default akan ditampilkan apabila anda tidak menentukan posisi tampilan.

Saat tampilannya ditentukan inside, maka penanda tiap list akan ditampilkan didalam kotak teks.

Berikut ini contoh mengatur posisi list melalui CSS.

css_list_3.png

Anda bisa melakukan banyak hal terkait dengan pengaturan list melalui CSS. Seringkali list dijadikan menu navigasi dengan mengaturnya melalui CSS.

 

Incoming search terms:

Be Sociable, Share!

Related Posts:

Add a Comment

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