article

using images on li elements versus standard bullet types

[WHAT]

1. 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

[WHY WHERE WHEN]

1. ] looks cool
2. ]
3. ] you want to use an image icon in place of the standard bullets on li elements

[EXAMPLE]

1. on PAGE view/atlases

[HOW-TO]

1. defined this css class in your css file
1. .displayList li.useImage {
2. list-style-type:none;
3. background:url('/images/atlas1.jpg') no-repeat top left;)
4. height:46px;
5. padding-left:60px ;
6. } 
2. assign the class to the li element(s) that you wish to use it on
1. <li class='useImage' >
3. put your image in the designated directory
1. in our case, the /images directory
4. you may need to adjust tweek the padding-left setting, dependant upon your image width size
1. the image we are using is x px wide, if

[REFERENCE]

1. SRC http://www.techforluddites.com/2010/02/thesis-replacing-list-bullets-with-images-using-css.html
2. EXAMPLE view/atlases

Details

ID: 1969

NAME: styling-lists-replacing-bullets-with-images

DESCRIPTION: demonstrates how to replace the li bullet with an image of your own choosing ..

AUTHOR: article.author/s

EDITOR: article.editor/s

PUBLISHER: article.publisher/s

STATUS: Write

PRIORITY: -5

OWNER ID: 1

photos

actions