4 in the mainnav a style change border bottom none to

This preview shows page 344 - 348 out of 650 pages.

4. In the .mainNav a style, change border-bottom: none ; to border-left: none ; . This change removes the left border so that the borders don’t double up between buttons and at the same time adds a border to the bottom of each button. But that <ul> tag’s bottom border is still on top of the buttons, and now the nav bar is missing a border on the far-left button (see circled areas of #2 in Figure 9-15). No problem—just change the border on the <ul> tag. 5. Locate the .mainNav style and change border-bottom: 1px dashed #999999; to border-left: 1px dashed #999999; . If you preview the page now, you’ll see that the border above the buttons is gone, but there’s still no left border (#3 in Figure 9-15). You’re witnessing one of the complications of using floats. That is, floating the list items removes them from the normal flow of the document, so web browsers no longer see them as part of the <ul> tag, and the <ul> tag shrinks down to nearly no height—that’s the reason the ul’s bottom border appeared on top as well. (If this whole sce- nario sounds confusing, it is. That’s why there’s an entire section of Chapter 13 dedicated to dealing with the issue—see page 425 for the details.)
CHAPTER 9: SPRUCING UP YOUR SITE’S NAVIGATION 333 TUTORIAL: CREATING A NAVIGATION BAR Fortunately, while the problem is complex, the solution is simple. Add one CSS property to the bulleted list. 6. Add one more property to the end of the .mainNav style (changes are in bold): .mainNav { margin: 0; padding: 0; list-style: none; border-left: 1px dashed #999999; overflow: hidden; } The overflow: hidden forces the unordered list to expand. Why does this property work? See the detailed coverage on page 222. Finally, that paperclip aligned to the right edge of the “You are here” button looks funny (#4 in Figure 9-15). You’ll switch its position to the left edge of the button. 7. Locate the “You are here” style you created in Step 6 on page 330. (It’s the one with the crazy, long-winded selector.) Change its background position from 97% 100% to 3px 100% . The style should now look like this: .home .homeLink, .feature .featureLink, .expert .experLink, .quiz .quizLink, .project .projectLink, .horoscope .horoscopeLink { background-color: #FFFFFF; background-position: 3px 100%; padding-right: 15px; padding-left: 30px; font-weight: bold; } Preview the page, and you’ll find a fully functional horizontal navigation bar (#5 in Figure 9-15). To see the finished version, open the file 09_finished nav_bar nav_ bar_ horizontal.html . NOTE  You may want to center the text inside each button. If so, you need to do two things: Add text- align: center; to the .mainNav a style and adjust that style’s left-padding until the text looks absolutely centered.
335 CHAPTER 10 F or the short history of the web, designers have had few options for adding animation to their websites. The humble, goofy-looking animated GIF provides basic animation within an image. Adobe’s Flash program lets you create complex animations, and even games and web applications, but its learning curve is steep, and

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture