Recipe 5.6. Inserting Large Custom Image Markers for Lists


Problem

You want to use a large custom graphic for a list marker without running into constraints by using list-style-image property.

Solution

First, remove default list marker through the list-style property (see Figure 5-8):

ul {     margin-left: 40px;     padding-left: 0px;     list-style: none;   }

Figure 5-8. Default list markers are removed


Apply enough padding on the right side of the list item to allow the new image marker to be placed (see Figure 5-9):

ul {  margin-left: 40px;  padding-left: 0px;  list-style: none; } li {  padding: .3em 0 1em 40px;  font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif; }

Figure 5-9. Extra padding is placed on the left side of the list


Then insert the new custom marker through the background property (see Figure 5-10):

ul {  margin-left: 40px;  padding-left: 0px;  list-style: none; } li {  padding: .3em 0 1em 40px;  font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif;  background: url(search_32.eps) no-repeat;

Figure 5-10. A large image used for a marker isn't fully displayed


}

Discussion

Using the background property to create enhanced list presentation allows for greater flexibility than using the list-style-image property. With this technique, any size custom list marker can be used as long as there is enough padding set to the left of the list item.

See Also

Recipe 5.7 for a more complex version of this Solution.




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