More on Links, Lists, and Layout - Web Development and Design Foundations with XHTML - page 282

Perhaps you would prefer that the bullets in the unordered list were not displayed. Use
the list-style-type property to configure the list-item markers (bullets). The prop-
erty list-style-type:none prevents the browser from displaying the bullets. See
Appendix C for more list-style-type values.

Figure 7.9 shows the effect of configuring list-style-type:none for the new
unordered list in the left column. The CSS is below:

#leftcolumn ul { list-style-type:none; }

Figure 7.9
An unordered list
with list-style-
type:none

Figure 7.10
An unordered list
with an image
replacing the bullet

If you would like a custom image to replace the bullet, use the list-style-image
property . In Figure 7.10 an image named arrow.gif was configured to replace the bullets
using: list-style-image:url (arrow.gif). View the twocolumn1.html file in the
Chapter7 folder in the student files to examine the code.

You may be wondering how to apply this technique to a horizontal navigation menu
such as the one coded on the page1.html page used in Hands-On Practice 6.5. The
answer is CSS! List items are block elements. They need to be configured as inline ele-
ments to display in a single line. The display:inline property is used to accomplish
this. Figure 7.11 displays a new version of the page using this technique. The page
looks about the same as the original (Figure 6.18) when displayed in a browser even
though the XHTML and CSS are configured to use a list.

Figure 7.11
Horizontal navigation
using an unordered
list configured with
CSS