Figure 6.23 shows unordered, ordered, and de?¬? nition lists,
using only the markup shown previously, but with variations of
list-style-type and list-style-position properties.
STYLING LISTS
Lists are the basis for navigation and menus; after all, navigation
elements, such as links in a sidebar, usually consist of a list of pages
you can visit, so a menu is really a list of choices. This is why it??™s
considered good practice to style navigation and menus as lists. One
very important advantage of this thinking is that if the user is viewing
the page in a user agent??”perhaps a mobile phone??”that cannot
apply the CSS styles, the XHTML list markup will at least present the
navigation or menus as a neat stack of links. Let??™s begin by styling
a set of navigation links that you might ?¬? nd on the left sidebar of
almost any site.
Here??™s the markup for an unordered list inside of a div, so you can
see it in relation to a containing element (in the context of left navigation,
the container would be the left column):
- Gibson
- Fender
- Rickenbacker
STYLIN??™ WITH CSS - CHAPTER 6 208
- Ibanez
First, let??™s display the div so we can see our unstyled list inside it
(Figure 6.24).
body {font: 1.0em verdana, arial, sans-serif;}
div#listcontainer {border:1px solid #000; width:160px;
font-size:.
Pages:
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246