edit-article
Home
Up
Delete
Article Name:
Article Description:
demonstrates how to replace the li bullet with an image of your own choosing ..
Chapter ID/Name:
Status:
Write
Writing
Written
Add Photo:
Owner ID:
Content:
use HTML
Edit Content
<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 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>} </li> </ol> <li><strong>assign the class to the li element(s) that you wish to use it on</strong></li> <ol> <li><li class='useImage' ></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 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> </p> <p> </p>