belajar membuat list multikolom via css

assalamualaikum wr wb salam sejahtera buat pembaca blog stroom09..yg selalu hadir .ok  gan saya akan mencoba memposting  membuat list multi kolom. biar gagh penasaran yuk kita lihat dan baca artikel di bawah .
Dalam pengembangan aplikasi berbasis web, HTML merupakan salah satu “bahan” dasar yang harus dikuasai oleh seorang pengembang web (web developer). HTML berisi sekumpulan perintah yang mengatur keberadaan berbagai obyek di dalam halaman web, seperti tabel, gambar, paragraf, list atau daftar dan sebagainya. Sementara itu, CSS (Cascading Style Sheet) serta Javascript juga berperan penting dalam pengembangan web sebagai pemanis tampilan dan menambah fungsionalitas halaman web.

List atau daftar merupakan salah satu komponen dasar yang cukup penting dari halaman web. List dapat dibuat dengan tag <ol> untuk daftar terurut dan <ul> untuk daftar tidak terurut. Sementara untuk menambahkan list item pada suatu daftar dapat menggunakan tag <li>. Pada umumnya list atau daftar ditampilkan dalam satu kolom, namun dalam tutorial ini, akan dijelaskan bagaimana membuat suatu list dalam multi kolom dengan menggunakan CSS dan juga CSS3. List multi kolom terkadang digunakan untuk menyajikan suatu daftar namun dengan area yang terbatas, atau bisa juga digunakan dalam membuat menu navigasi.

Membuat List dengan HTML

Untuk membuat list atau daftar dapat menggunakan tag <ol> maupun <ul>, tergantung kebutuhan kita. Pada bagian ini kita akan membuat list tidak terurut dengan menggunakan tag <ul>. Berikut ini potongan script HTML beserta hasil tampilannya.

Code block

<ul>


	<li>HTML</li>


	<li>CSS</li>


	<li>PHP</li>


	<li>JQuery</li>


	<li>HTML5</li>


	<li>CSS3</li>


	<li>MySQL</li>


	<li>Dreamweaver</li>


	<li>Mootols</li>


	<li>Scriptaculos</li>


</ul>

Gambar 1: Daftar Tidak Terurut

List Multi Kolom dengan CSS

Dengan perintah CSS sederhana, kita dapat membuat tampilan list pada Gambar 1 menjadi 2 kolom atau lebih. Teknik CSS yang digunakan sebenarnya sangat sederhana, yaitu dengan mengatur lebar dari setiap list item menjadi ukuran tertentu yang lebih pendek dan membuat floating (perataannya) -nya menjadi left. Ukuran list item dapat diatur sesuai kebutuhan. Jika kita ingin membuat 2 kolom, maka atur ukuran list item menjadi 50%, dan jika ingin membuat 3 kolom kita dapat atur ukurannya menjadi 33.33%, dan seterusnya.

Berikut ini potongan perintah CSS untuk mengatur list dengan dua kolom (#double) dan tiga kolom (#triple).

Code block

ul { width:760px; }


#double li  { width:50%; float:left; } 


#triple li  { width:33.33%; float:left;}

Selanjutnya untuk menerapkan CSS tersebut pada list yang sudah dibuat sebelumnya, cukup dengan mengatur atribut ID pada tag <ul> sesuai dengan keinginan. Berikut ini contoh penerapan perintah CSS tersebut pada list yang sudah dibuat.

Code block

<h1>List 2 kolom</h1>


<ul id="double">


	<li>HTML</li>


	<li>CSS</li>


	<li>PHP</li>


	<li>JQuery</li>


	<li>HTML5</li>


	<li>CSS3</li>


	<li>MySQL</li>


	<li>Dreamweaver</li>


	<li>Mootols</li>


	<li>Scriptaculos</li>


</ul>


<h1>List 3 kolom</h1>


<ul id="triple">


	<li>HTML</li>


	<li>CSS</li>


	<li>PHP</li>


	<li>JQuery</li>


	<li>HTML5</li>


	<li>CSS3</li>


	<li>MySQL</li>


	<li>Dreamweaver</li>


	<li>Mootols</li>


	<li>Scriptaculos</li>


</ul>

Tampilan dari potongan program diatas kurang lebih seperti tampil pada gambar berikut ini:

Gambar 2: Tampilan List Multi Kolom dengan CSS

List Multi Kolom dengan CSS 3

CSS 3 merupakan versi CSS terbaru yang masih dikembangkan oleh W3C. Namun beberapa web browser sudah mendukung CSS 3. CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan, hanya ada beberapa penambahan, sehingga ketika bermigrasi dari CSS 2 ke CSS 3, tidak perlu mengubah apapun. Beberapa penambahan fitur baru dari CSS 3 antara lain animasi, efek teks berbayang, multi kolom, dukungan font eksternal dan efek 2 dimensi dan 3 dimensi (Sumber: http://id.wikipedia.org/wiki/CSS_3).

Seperti halnya dengan contoh sebelumnya yang menggunakan CSS 2, kita juga dapat memanfaatkan fitur baru di CSS 3 yaitu multi kolom. Berikut ini potongan perintah CSS 3 untuk mengatur list dengan dua kolom (#double) dan tiga kolom (#triple).

Code block

#double {


	-moz-column-count: 2;


	-moz-column-gap: 20px;


	-webkit-column-count: 2;


	-webkit-column-gap: 20px;


	column-count: 2;


	column-gap: 20px;


}


#triple {


	-moz-column-count: 3;


	-moz-column-gap: 20px;


	-webkit-column-count: 3;


	-webkit-column-gap: 20px;


	column-count: 3;


	column-gap: 20px;


}

Pada program di atas, terdapat perintah CSS 3 -moz-column-count, -webkit-column-count dan column-count untuk mengatur berapa kolom suatu komponen akan ditampilkan. Selanjutnya untuk mengatur jarak antar kolom diatur dengan perintah -moz-column-gap, -webkit-column-gap dan column-gap. Sebagai catatan tambahan, perintah CSS 3 yang diawali dengan -moz-* dikhususkan untuk browser berstandar Gecko seperti Mozilla Firefox, -webkit-* dikhususkan untuk browser dengan standar Webkit seperti Google Chrome (Sumber: http://en.wikipedia.org/wiki/List_of_web_browsers).

Selanjutnya untuk menerapkan CSS di atas pada dasarnya sama seperti pada contoh pertama. Cukup dipanggil id pada tag <ul>. Berikut ini hasil tampilan list multi kolom yang dibuat dengan CSS 3

Gambar 3: Tampilan List Multi Kolom dengan CSS 3

Terdapat sedikit perbedaan antara hasil list multi kolom yang pertama (Gambar 2) yang menggunakan CSS 2 dan kedua (Gambar 3) yang menggunakan CSS 3. Pada hasil yang pertama, list ditampilkan dengan urutan ke samping / kanan terlebih dahulu (Item “HTML” ditampilkan pada kolom 1 dan item “CSS” ditampilkan pada kolom 2). Sedangkan pada hasil yang kedua (menggunakan CSS 3), list ditampilkan dengan urutan ke bawah terlebih dahulu (item “HTML” dan “CSS” yang berurutan sama-sama ditampilkan di kolom 1).

Kesimpulan

Tutorial ini memberikan gambaran mengenai bagaimana membuat daftar (list) dalammulti kolom dengan menggunakan CSS, baik menggunakan CSS 2 maupun CSS 3. Keduanya dapat digunakan namun perlu diperhatikan dukungan browser terhadap perintah yang digunakan. 

sumber:achmatim.net