CSS: Margins and Padding - How to Set an Image as a List Marker
(Page 5 of 5 )
You can also set a custom image as your list marker. In this example I will use a picture of a meatball:
<html>
<head>
<style type="text/css">
ul
{
list-style-image: url('meatball.gif')
}
</style>
</head>
<body>
<ul>
<li>Yummy</li>
<li>Gimme</li>
<li>Some</li>
</ul>
</body>
</html>
How to Place the List Marker
Though subtle, you can also choose where you list maker is positioned:
<html>
<head>
<style type="text/css">
ul.inside
{
list-style-position: inside
}
ul.outside
{
list-style-position: outside
}
</style>
</head>
<body>
<p>List Position Inside:</p>
<ul class="inside">
<li><b>Awesome Villains:</b></li>
<li>Gorilla Grod</li>
<li>Thanos</li>
</ul>
<p>List position outside:</p>
<ul class="outside">
<li><b>Awesome Super Heroes:</b></li>
<li>Adam Warlock</li>
<li>Daredevil</li>
</ul>
</body>
</html>
Well that's it for this article. Come back for the next episode where we will learn to work with tables and some more advanced CSS issues.
Till then...
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 3 
