The code is shown in the following block, and a full explanation
is shown in the ???Creating breadcrumb navigation??? exercise in Chapter 5.
#pullNav {
float: right;
padding-right: 10px;
}
#pullNav li {
display: inline;
background: url(assets/vertical-bar.gif) 0 55% no-repeat;
padding: 0 3px 0 8px;
}
ul#pullNav li:first-child {
background: none;
}
The remainder of the rules are copied from Chapter 5??™s ???Creating a multicolumn dropdown
menu??? exercise, and the path values to the css-tab-rollover-image.gif have
been amended accordingly to take into account that the image is now being housed in an
assets folder. There are two other changes as well, to cater for the layout the menu is
being used with. First, #navContainer has a horizontally tiling background image (the gradient)
applied, and the #navigation ul rule has width and margin values to center the list
horizontally, in the same way the wrapper div was centered earlier.
PUTTING EVERYTHING TOGETHER
383
10
#navContainer {
height: 30px;
border-bottom: 5px solid #ad3514;
background: url(assets/nav-background.gif) repeat-x;
}
#navigation ul {
list-style-type: none;
width: 740px;
margin: 0 auto;
}
Fonts and fixes for the storefront layout
In the fonts section of the CSS, the default font size is set using the html and body rules, as
per the ???Setting text using percentages and ems??? section in Chapter 3. The h1 rule defines
the lead heading, and I??™ve done something that??™s not been done elsewhere in the book:
the heading is floated left.
Pages:
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491