Finally,
the padding value sets padding at the right of each list item to 10px, ensuring items
don??™t touch the subsequent background image; the left padding value of 15px
provides room for the background image, ensuring the list item text doesn??™t sit on
top of it.
#breadcrumbs li {
display: inline;
background: url(double-arrow.gif) 0 50% no-repeat;
padding: 0 10px 0 15px;
}
Note that when list items are displayed inline, the default bullet points are not displayed.
This is one reason why the bullets in this example are background images,
although we also wanted something more visually relevant, right-facing arrows showing
the path direction.
USING LINKS AND CREATING NAVIGATION
203
5
5. Remove the first bullet. As the trail is leading from the first item, it shouldn??™t have
a bullet. This can be dealt with via a simple, standards-compliant rule that removes
the background from only the list item that is the first child of the unordered list
(i.e., the first list item in the list):
ul#breadcrumbs li:first-child {
background: none;
}
Required files The graphical-navigation-starting-point folder from the
chapter 5 folder.
What you??™ll learn How to create a good-looking navigation bar, entirely based on
HTML text and styled using CSS.
Completed files The simple-horizontal-navigation-bar folder in the chapter 5
folder.
1. Examine the web page. The web page for this exercise??”graphical-navigation.
html??”is designed for flexibility when it comes to styling elements on the page,
making it easy to change elements without touching the markup (this page is used
with a few modifications in subsequent exercises, too).
Pages:
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299