Creating Custom Image Markers for Lists






Creating Custom Image Markers for Lists

Problem

You want to use your own graphic for a list marker. For example, Figure uses a diamond image.

Custom-made image markers for a list


Solution

Use the list-style-image property to use a graphic for a bullet marker:

ul {
 list-style-type: disc;
 list-style-image: url(bullet.eps);
}

Discussion

Set the location of the image you want to use as a marker as the value of the list-style-image property. You can't control the size of the image used as a list marker through CSS, so the image you specify should already be at the correct size. Images that are too large may interfere with the legibility of the list item or the marker may not be displayed entirely in the viewport (see Figure). When creating custom bullets, make sure they are of the appropriate size to complement the design of your web page.

A large image used for a marker isn't fully displayed


The value for the image marker is inherited, meaning that nested lists pick up the image as the marker as does the parent. To stop this inheritance, the value of none needs to be set for the child lists.

ul {
 list-style-type: disc;
 list-style-image: url(bullet.eps);
}
ul ul {list-style-image: none;}

Always include the list-style-type property to provide a fallback should the image not be usable. In the solution, the list marker disc is used if the image, bullet.eps, can't be displayed.

See Also

Recipe 5.4 on creating custom text markers; the CSS 2.1 specification for list-image-type at http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image.



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows