(public).sospep.subjects ~ view article ~ styling-lists-replacing-bullets-with-images

<h1 style="text-align: center;">using images on li elements versus standard bullet types</h1>
<h2 style="text-align: left;">[WHAT]</h2>
<ol>
<li>
<div style="text-align: left;">this article defines how-to use your images as bullets for you li items versus using the standard bullet types of &nbsp;disc, square, ... or none</div>
</li>
</ol>
<h2 style="text-align: left;">[WHY WHERE WHEN]</h2>
<ol>
<li>
<div style="text-align: left;">] looks cool</div>
</li>
<li>
<div style="text-align: left;">]</div>
</li>
<li>
<div style="text-align: left;">] you want to use an image icon in place of the standard bullets on li elements</div>
</li>
</ol>
<h2 style="text-align: left;">[EXAMPLE]</h2>
<ol>
<li>
<div style="text-align: left;">on PAGE view/atlases</div>
</li>
</ol>
<h2 style="text-align: left;">[HOW-TO]</h2>
<ol>
<li><strong>defined this css class in your css file</strong></li>
<ol>
<li>.displayList li.useImage <span style="font-family: Consolas; color: #232323; font-size: x-small;"><span style="font-size: x-small;">{</span></span></li>
<li>list-style-type:<span style="font-size: x-small;"><span style="font-family: Consolas; color: #4f76ac; font-size: x-small;"><span style="font-family: Consolas; color: #4f76ac; font-size: x-small;"><span style="font-family: Consolas; color: #4f76ac; font-size: x-small;">none</span></span></span><span style="font-family: Consolas; color: #232323; font-size: x-small;">;</span></span></li>
<li>background<span style="font-size: x-small;"><span style="font-family: Consolas; color: #232323; font-size: x-small;"><span style="font-family: Consolas; color: #232323; font-size: x-small;"><span style="font-family: Consolas; color: #232323; font-size: x-small;">:</span></span></span><span style="font-family: Consolas; color: #4f76ac; font-size: x-small;"><span style="font-family: Consolas; color: #4f76ac; font-size: x-small;"><span style="font-family: Consolas; color: #4f76ac; font-size: x-small;">url('/images/atlas1.jpg') no-repeat top left</span></span></span><span style="font-family: Consolas; color: #232323; font-size: x-small;">;)</span></span></li>
<li>height<span style="font-size: x-small;"><span style="font-family: Consolas; color: #232323; font-size: x-small;"><span style="font-family: Consolas; color: #232323; font-size: x-small;"><span style="font-family: Consolas; color: #232323; font-size: x-small;">:</span></span></span><span style="font-family: Consolas; color: #4f76ac; font-size: x-small;"><span style="font-family: Consolas; color: #4f76ac; font-size: x-small;"><span style="font-family: Consolas; color: #4f76ac; font-size: x-small;">46px</span></span></span><span style="font-family: Consolas; color: #232323; font-size: x-small;">;</span></span></li>
<li>padding-left<span style="font-size: x-small;"><span style="font-family: Consolas; color: #232323; font-size: x-small;"><span style="font-family: Consolas; color: #232323; font-size: x-small;"><span style="font-family: Consolas; color: #232323; font-size: x-small;">:</span></span></span><span style="font-family: Consolas; color: #4f76ac; font-size: x-small;"><span style="font-family: Consolas; color: #4f76ac; font-size: x-small;"><span style="font-family: Consolas; color: #4f76ac; font-size: x-small;">60px </span></span></span><span style="font-family: Consolas; color: #232323; font-size: x-small;">;</span></span></li>
<li>}&nbsp;</li>
</ol>
<li><strong>assign the class to the li element(s) that you wish to use it on</strong></li>
<ol>
<li>&lt;li class='useImage' &gt;</li>
</ol>
<li><strong>put your image in the designated directory</strong></li>
<ol>
<li>in our case, the /images directory</li>
</ol>
<li><strong>you may need to adjust tweek the padding-left setting, dependant upon your image width&nbsp;size</strong></li>
<ol>
<li>the image we are using is x px wide, if</li>
</ol></ol>
<h2>[REFERENCE]</h2>
<ol>
<li>SRC <a href="http://www.techforluddites.com/2010/02/thesis-replacing-list-bullets-with-images-using-css.html">http://www.techforluddites.com/2010/02/thesis-replacing-list-bullets-with-images-using-css.html</a></li>
<li>EXAMPLE view/atlases</li>
</ol>
<p>&nbsp;</p>
<p>&nbsp;</p>

~ view article ~ Chapter] ch-006-css-styling-elements FROM [ Book] css IN [ libraries] technology-developer-www