CSS Style Property: list-style-type, Menghilangkan Bullets/Titik ul, li

CSS Style Property: list-style-type, Menghilangkan Bullets/Titik ul, li - Membuat sesuatu menjadi tidak nampak atau dihilangkan dalam tampilan blog, sebenarnya gampang-gampang susah karena hal pertama yang harus dipahami adalah memahami setiap fungsi yang ada didalam setiap kode template blog, lebih tepatnya kode-kode CSS yang menjadi struktur dari tampilan blog tersebut. Selain itu, juga harus mengetahui letak atau penempatan dalam pemberian fungsi dari kode tersebut, karena jika tidak maka ia tidak akan memberikan pengaruh apa-apa terhadap tampilan dari kode tersebut.. Bingung?
Nah, biar tidak bingung saya contohkan salah satu penggunaan Style Property yang ada didalam CSS yaitu list-style-type. List style type sebenarnya tidak hanya digunakan dalam susunan daftar per kalimat saja yang biasanya diterapkan dalam penomeran atau pemberian bullet atau symbol dalam sebuah kalimat. Dan pada artikel ini, saya hanya akan memberikan efek pada bullet atau titik yang digunakan dalam elemen ul, li

Penggunaan ul, li dalam kode CSS template blog akan memberikan pengaruh terhadap tampilan blog kecuali diletakkan dalam setiap elemen dengan memberikan perlakukan khusus terhadap ul, li tersebut dan pada artikel ini saya hanya akan memberikan perlakuan khusus terhadap ul, li dengan penggunaan kode list-style-type didalamnya

Perhatikan contoh CSS dan HTML berikut ini :

#ul {width:200px;border-style:solid solid none solid;border-color:#94AA74;border-size:1px;border-width:1px;margin:10px;}
#ul {margin:0;padding:0;}
#ul li a {height:32px;height:24px;text-decoration:none;} 
#ul li a:link, #ul li a:visited {color:#5E7830;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVIjv78mKus-A8PjT14PHQQIhRlCeLbWEQuXLNQcSfOpWKadyoeisM6SAVlQpgWcTr3MmhlYqmAtZK4iKzFeJfXuNyNoH9Qk_efcxhW4MukdsYUIWjiW6_sX6aPbuzX7h7o3dLiBFgyoE/s1600/menu1.gif);padding:8px 0 0 10px;}
#ul li a:hover {color:#26370A;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVIjv78mKus-A8PjT14PHQQIhRlCeLbWEQuXLNQcSfOpWKadyoeisM6SAVlQpgWcTr3MmhlYqmAtZK4iKzFeJfXuNyNoH9Qk_efcxhW4MukdsYUIWjiW6_sX6aPbuzX7h7o3dLiBFgyoE/s1600/menu1.gif) 0 -32px;padding:8px 0 0 10px;}
#ul li a:active {color:#26370A;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVIjv78mKus-A8PjT14PHQQIhRlCeLbWEQuXLNQcSfOpWKadyoeisM6SAVlQpgWcTr3MmhlYqmAtZK4iKzFeJfXuNyNoH9Qk_efcxhW4MukdsYUIWjiW6_sX6aPbuzX7h7o3dLiBFgyoE/s1600/menu1.gif) 0 -64px;padding:8px 0 0 10px;}

<ul>
<li><a href="#1" title="Home">Home</a></li>
<li><a href="#2" title="About">About</a></li>
<li><a href="#3" title="Services">Services</a></li>
<li><a href="#4" title="Portfolio">Portfolio</a></li>
<li><a href="#5" title="Profile">Profile</a></li>
<li><a href="#6" title="Download">Download Menu</a></li>
</ul>

Jika kode CSS dan HTML dari elemen ul, li diatas diterapkan dalam blog maka hasilnya akan terlihat seperti berikut ini

• Home
• About
• Services
• Portfolio
• Profile
• Download Menu

• Home
• About
• Services
• Portfolio
• Profile
• Download Menu

Dan perhatikan kedua tampilan menu vertikal diatas?
Kenapa yang sebelah kiri masih menampilkan bullet atau titik pada setiap artikelnya?

• Home

Tampilan tersebut dikarenakan pengaturan pada kode CSS dari menu tersebut. Pada bagian sebelah kiri saya tidak memperlakukan list-style-type kedalamnya tapi pada tampilan sebelah kanan, saya memberikan perlakuan khusus dengan cara menambahkan fungsi list-style-type sehingga tampilan bullets atau titik tidak tampil atau dihilangkan

Lantas bagaimana cara memberikan perlakuan khusus tersebut? Atau bagaimana cara memasang list-style-type kedalam kode css ul, li? Berikut beberapa pola yang bisa dilakukan dalam penggunaan list-style-type, yaitu bisa dimasukkan kedalam css atau html

ul {list-style:none;}

ul, li {list-style-type:none;}

<ul style="list-style: none; ">
    <li>Item</li>
    ...
    <li>Item</li>
</ul>

<ul>
<li style="list-style-type: none;">Item 1</li>
<li style="list-style-type: none;">Item 2</li>
</ul>

Atau cobalah beberapa karakter khusus berikut ini untuk menghilangkan bullets atau titik pada ul, li

<ul class="unstyled">
   <li>...</li>
</ul>

ul.dashed-list {list-style: none outside none;}
ul.dashed-list li:before {content: "\2016";float:left;margin:0 0 0 -27px;padding:0;}
ul.dashed-list li {list-style-type:none;}

<ul class="dashed-list">
  <li>text</li>
  <li>text</li>
</ul>

ul.no-bullets li {list-style-type:none !important;}

<ul class="no-bullets">
<li>Item 1</li>
<li>Item 2</li>
</ul>

Jadi, untuk menghilangkan bullets atau titik pada ul, li gunakan beberapa parameter diatas namun saya lebih menekan penggunaan list-style-type:none; kedalam css daripada parameter yang lainnya

Itulah sekilas tentang penggunaan CSS Style Property: list-style-type yang berfungsi untuk menghilangkan bullets/titik ul, li. Jika ada yang salah dalam penulisan kode tersebut, mohon kiranya untuk dibenahi dengan cara meninggalkan komentar pada artikel ini, CSS Style Property: list-style-type, Menghilangkan Bullets/Titik ul, li