Web Development and Design Foundations with XHTML, 5th Edition

(^282) Chapter 7 More on Links, Lists, and Layout
Perhaps you would prefer that the bullets in the unordered list were not displayed. Use
thelist-style-typepropertyto configure the list-item markers (bullets). The prop-
ertylist-style-type:noneprevents 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
withlist-style-
type:none
Figure 7.10
An unordered list
with an image
replacing the bullet
Figure 7.11
Horizontal navigation
using an unordered
list configured with
CSS
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:inlineproperty 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.