Recipe 5.5. Creating Custom Image Markers for Lists


Problem

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

Figure 5-6. 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 5-7). When creating custom bullets, make sure they are of the appropriate size to complement the design of your web page.

Figure 5-7. 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.




CSS Cookbook
CSS Cookbook, 2nd Edition
ISBN: 0596527411
EAN: 2147483647
Year: 2006
Pages: 235

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net