#navContainer {
font: 1.1em/1 Georgia, "Times New Roman", Times, serif;
background: #d7d7d7;
text-align: center;
padding: 7px 0px;
border-top: 1px solid #898989;
border-bottom: 1px solid #898989;
margin-bottom: 10px;
}
USING LINKS AND CREATING NAVIGATION
205
5
5. Style the list items. Now that the structure??™s styled, it??™s time to get cracking on the
list. First, add a rule to remove the default bullets from the unordered list within
the navigation div.
#navigation ul {
list-style: none;
}
Next, set the list items to display inline, as with the breadcrumbs. Add some horizontal
padding, and also, as shown, add a border to each item??™s right-hand edge,
which will act as a visual separator, making each link more distinct.
#navigation li {
display: inline;
padding: 0px 9px;
border-right: 1px solid #aaaaaa;
}
If you test the page at this point, you??™ll see that all the links have a right-edge border
??”not a terrible crime??”but from a design standpoint, the one at the far right
shouldn??™t have one (after all, separators are only needed between pairs of links).
Luckily, because of the id values applied to the list items earlier, each one can be
individually styled, which also means an override can be applied to a specific link.
In this case, add the following rule, which removes the border from the list item
with an id value of contactDetailsPageLink:
#navigation #contactDetailsPageLink {
border-right: none;
}
6.
Pages:
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302