HTML and CSS Reference
In-Depth Information
Because Tammy wants to remove the markers from the navigation list, you'll set the
list-style-type value of that list to none . Because you don't want to remove the bul-
let markers from all lists on the Web site, you'll use a contextual selector that targets only
unordered lists nested within a nav element.
To remove the bullets from the navigation links:
1. Return to the sa_styles.css file in your text editor.
2. Directly below the style rule for the h2 element, insert the following (see
Figure 3-44):
/* Navigation list styles */
nav ul {
list-style-type: none;
Figure 3-44
Removing bullet markers from navigation list items
3. Save your changes to the file and then reload the home.htm file in your Web
browser. Verify that the bullet markers have been removed from the items in the
navigation list.
Using Images for List Markers
You can supply your own graphic image for the list marker using the style
list-style-image: url( url );
where url is the URL of a graphic fi le containing the marker image. This is only done
for unordered lists, in which the marker is the same for every list item. For example, the
style rule
ul {list-style-image: url(redball.gif);}
displays items from unordered lists marked with the graphic image in the redball.gif fi le.
Tammy suggests that you display the list of hours and driving directions using a green
arrow graphic she created. Both of these unordered lists are immediately preceded by
an h2 element and nested within a section element, so the style rule to change the list
marker is:
section h2+ul {
list-style-image: url(arrow.png);
You'll add this style rule to your style sheet.
Search WWH ::

Custom Search