Aditya RizkiAda kalanya saat kita sedang merapikan tampilan halaman web menjumpai elemen-elemen HTML yang kurang rapi. Seperti yang baru saya jumpai beberapa waktu yang lalu. Elemen tersebut berkaitan dengan tampilan bullets dan numbering, yang mana poin-poin atau list yang ada seharusnya bisa tersusun rapi saat berganti baris tetapi setelah diuji coba malah jadi tidak rapi.
Bullets merupakan metode untuk menampilkan list yang poin-poinnya diwakili dengan simbol karakter tertentu (bisa berbentuk disc, square, circle, dsb.). Dalam HTML, bullets disebut juga dengan unordered list (ul), artinya list yang tidak berurutan. Sementara numbering merupakan metode untuk menampilkan list yang poin-poinnya diwakili dengan nomor urut. Dalam HTML, numbering disebut juga dengan ordered list (ol), artinya list yang berurutan.
Seperti yang sudah kita ketahui, HTML tidak mengenal tab atau spasi seperti layaknya teks editor yang biasa kita gunakan, misalnya pada Microsoft Word atau Notepad. Pada HTML, cara untuk membuat teks yang sedikit menjorok biasanya dilakukan dengan menempatkan karakter kosong seperti atau bisa pula dengan meletakkan properti padding CSS.
Secara default, tampilan HTML dengan elemen bullets & numbering tampak sebagai berikut:
Namun, terkadang kita menjumpai tampilan bullets & numbering dengan bentuk yang kurang rapi seperti ini (perhatikan tampilan list setelah baris pertama):
CSS sudah menyediakan solusi untuk mengatasi hal tersebut yaitu dengan memanfaatkan properti list-style-position. Properti tersebut bisa diisi dengan salah satu dari nilai berikut:
list-style-position: inside|outside|initial|inherit;
Jika kita ingin membuat bullets & numbering yang mana setelah baris pertama dibiarkan tanpa menjorok ke kanan, maka bisa menggunakan nilai inside. Sedangkan jika kita ingin membuat bullets & numbering yang mana setelah baris pertama ikut menjorok ke kanan, maka bisa menggunakan nilai outside atau cukup dibiarkan kosong karena secara default sudah menggunakan nilai outside.
Apabila menghendaki tampilan yang lebih leluasa dan lebih rapi, misalnya mengganti ukuran font, spasi antarbaris, dan mengganti bentuk bullets/numbering, kita bisa menambahkan sejumlah properti CSS yang lain, contohnya sebagai berikut:
ul.c {
list-style-type: disc;
list-style-position: outside;
padding: 5px 0 5px 10px;
margin-left:50px;
line-height:28px;
font-size:18px
}
Hasil dari penambahan modifikasi CSS di atas bisa dilihat pada screeshoot di bawah. Ukuran font lebih besar dan jarak spasi antarbaris menjadi lebih lebar. Tampilan di bawah ini tentunya akan lebih nyaman dilihat.
Kode HTML dan CSS utuh untuk membantu memahami problem dan solusi pada bahasan kali ini disertakan pada lampiran berikut. Simpan file berikut dalam format .html, kemudian coba buka melalui browser kesayangan Anda.
<!DOCTYPE html>
<html>
<head>
<style>
/** Kode CSS Bullets untuk Metode A, B, dan C**/
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
ul.c {
list-style-type: disc;
list-style-position: outside;
padding: 5px 0 5px 10px;
margin-left:50px;
line-height:28px;
font-size:18px
}
/** Kode CSS Numbering untuk Metode A, B, dan C**/
ol.a {
list-style-position: outside;
}
ol.b {
list-style-position: inside;
}
ol.c {
list-style-position: outside;
padding: 5px 0 5px 10px;
margin-left:50px;
line-height:28px;
font-size:18px
}
</style>
</head>
<body>
<h1>Contoh Bullets & Numbering</h1>
<h2>Bullets (default), tanpa pemformatan CSS</h2>
<ul>
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves.</li>
</ul>
<h2>Numbering (default), tanpa pemformatan CSS</h2>
<ol>
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves.</li>
</ol>
<br>
***
<br>
<h2>Bullets Model A (default), menggunakan "list-style-position: outside;"</h2>
<ul class="a">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves.</li>
</ul>
<h2>Bullets Model B, menggunakan "list-style-position: inside;"</h2>
<ul class="b">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves.</li>
</ul>
<h2>Bullets Model C, menggunakan pemformatan tambahan</h2>
<ul class="c">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves.</li>
</ul>
<br>
***
<br>
<h2>Numbering Model A (default), menggunakan "list-style-position: outside;"</h2>
<ol class="a">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves.</li>
</ol>
<h2>Numbering Model B, menggunakan "list-style-position: inside;"</h2>
<ol class="b">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves.</li>
</ol>
<h2>Numbering Model C, menggunakan pemformatan tambahan</h2>
<ol class="c">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves.</li>
</ol>
</body>
</html>
Aditya Rizki
Aditya Rizki