Inserting Large Custom Image Markers for Lists






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):

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

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):

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;
}

Extra padding is placed on the left side of the list


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

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;

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.



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