Required files XHTML-basic.html and CSS-default.css from the basicboilerplates
folder, along with double-arrow.gif from
navigation-images within the chapter 5 folder.
What you??™ll learn How to create breadcrumb navigation by using a list styled in CSS.
Breadcrumb links show the path you??™ve taken to the current
document.
Completed files The breadcrumb-navigation folder in the chapter 5 folder.
Creating breadcrumb navigation
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
202
1. Add the list. In the HTML document, add the following code for the breadcrumbs.
Note that the last item signifies the current page??”this is why it??™s not a link.
2. Add some body padding. Add a padding value to the existing body rule.
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}
3. Style the list by adding the following rule. The font-size setting specifies the font
size for the list items, and the margin-bottom setting adds a margin under the list.
ul#breadcrumbs {
font-size: 1.2em;
margin-bottom: 1em;
}
4. Add the following rule to style the list items. By setting display to inline, list
items are stacked horizontally. The background value sets double-arrow.gif as the
background to each list item (ensure it??™s in the same directory as the CSS document,
or modify the path accordingly); the positioning values ensure the background
is set at 0 horizontally and 50% vertically, thereby vertically centering it at
the left??”at least once no-repeat is set, which stops the background tiling.
Pages:
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298