chapter 9 n.
Skip this Video
Loading SlideShow in 5 Seconds..
Spruce Up Your site’s navigation PowerPoint Presentation
Download Presentation
Spruce Up Your site’s navigation

Spruce Up Your site’s navigation

79 Vues Download Presentation
Télécharger la présentation

Spruce Up Your site’s navigation

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Chapter 9 Spruce Up Your site’s navigation

  2. Links • When styling a link, you must tell CSS both what you want to style, and when you want the style to happen • Web browsers keep track of how a visitor interacts with links, and then displays the link differently depending on the link’s status or state.

  3. Understanding Link States • Most browsers recognize four basic link states: • Unvisited • Visited • Mouse over • Clicked • CSS provides four pseudo-class selectors for these states: • :link :visited :hover :active (:focus firefox & safari only)

  4. TIP • Want to change the text color of an unvisited link from boring blue to glaring orange? • a:link {color: #f60; } • Once visited, the state changes to a purple, but you want to change it to a vivid red! • a:visited {color: #900; } • What if you wanted to style both? • a:link a:visited (use a group selector)

  5. :hover offers the greatest possibilities! • When a mouse passes over a link, you can style that link any way you want. • You can use any of the CSS properties you wish: • no underline/underline/bold/italic • color changes (active/inactive) • style changes (uppercase/lowercase/spread) • background changes (color/graphic)

  6. Think LoVe/HAte • For those designers who leave no stone unturned: • a:active {color: #b2f511;} • You can ALWAYS use a .class selector to pinpoint any link (or group of links) on a web page. • Link states must be in a particular order: • a:link • a:visited • a:hover • a:active

  7. EXAMPLES: • With a class selector named external: • a.external:link {color: #f60;} • a.external:visited {color: #900;} • Leave off the a, and only specifying the class: • .external:link {color: #f60;} • .external:visited {color: #900;}

  8. Use Descendent Selectors • Target a tag that appears within another tag: • Wrap the link in a <div> and apply a class or ID: • #mainNav a:link {color: #f60;} • #mainNav a:visited {color: #900;} • These properties give you the what and when to style. • They do not give you the how to style

  9. Styling Links • Make a link look like a button • add a border • add a background color or graphic • add a highlight (color change on mouse over) • Lets start with UNDERLINING

  10. Underlining Links • Remove the underline: • a:link {text-decoration: none;} • Underline on mouse over: • a:link, a:visited { text-decoration: none; background-color: #f00;} • a:hover { background-color: transparent; text-decoration: underline; }

  11. Underlining Continued • Use a bottom border: • a { text-decoration: none; border-bottom: dashed 2px #9f3; } • Use a background image: • a { text-decoration: none; background: url(images/underline.gif) repeat-x left bottom padding-bottom: 5px; }

  12. Create a Button • The main style elements are • border, background-color, and padding • Add a class and a border to create a basic box around your link: • a.button { border: solid 1px #000;} • Add a background color: • a.button { border: solid 1px #000; background-color: #333;}

  13. Fancy Borders = Fancy Buttons • All four borders do not have to be the same width, type, or color • You don’t even have to have 4 borders • Add a beveled look using different border colors • a.button { • background: #b1b1b1; • color: #fff; • font-width: 4px;

  14. Beveled Look Continued • a:button { • background: b1b1b1; • color: #fff; • font:weight: bold; • border-width: 4px; • border-style: solid; • border-top-color: #dfdfdf; • border-right-color: #666; • border-bottom-color: #333; • border-left-color: #858585;}

  15. Use Graphics • Use the background image property: • don’t forget no-repeat • control placement with background-position • for the best placement, use a specific value such as pixels or ems • combine with percentages for vertical placement • background-position: 10px 50%; • (first value is horizontal, the second vertical) • padding gives you room • Remember, a link is an inline element, adding top/bottom padding has no effect. Change to a block

  16. Building Navigation Bars • Use an unordered list • The XHTML for a navigation bar is simple • <ul class=“nav”> • <li><a href=“index.html”>Home </a></li> • <li><a href=“news.html”>News</a></li> • <li><a href=“reviews.html”>Reviews</a>,/li> • </ul>

  17. Nav Bars Continued • The CSS varies depending on whether your want a horizontal or vertical navigation bar. • Remove the bullets: ul.nav {list-style-type: none;} • Eliminate padding and margins: ul.nav { list-style-type: none; padding-left: 0; margin-left: 0;} • This makes the list look like a plain block-level element

  18. Vertical Navigation Bars • A bunch of links stacked one on top of the next. • Removing bullets, padding and margins get you almost there. • Now you want to actually style the link. • display as a block • this gives each button the same width • makes the entire area clickable • Constrain the width • if you don’t, the button will extend the width of the page

  19. ul.nav a { • display: block; • width: 8em;} • You would not have to set a width if the buttons are set within a constraining element such as a side bar, or div. • However, when you don’t set a width, IE will have trouble with the link and displays large gaps. If you set a width, this won’t happen.

  20. Horizontal Navigation Bars • Use display: inline; • Make sure you don’t have too many buttons, or they will wrap • Style them as you would vertical links • Add top and bottom padding to the <ul> tag as well as the <li> tag. This adds space to accommodate any borders or backgrounds you have added. • To make the horizontal bar appear in the center of the page, add text-align: center;

  21. Pop-Up Menus • Son of Suckerfish • Multi-Level Drop Down • Vertical Drop Down with Pop Up • Free Java Script Menus • Ultimate Drop Down Menu

  22. Using Floats for Horizontal Navigation Bars • Although using the display: inline; is simple • Has one flaw: There is no way to create equally sized buttons. setting a width on either the <li> or <a> tag has no effect • Nav bars made up of floated elements are difficult to center

  23. Float the List Items • Add float: left to the <li> tags • ul.nav li {float: left;} • The floated list items slide right next to each other • Add display: block to the links • ul.nav a {display: block;} • Style the links • Add a width to the <a> tag using ems • To center the text in the middle of the button, add text-align: center to the link’s style.

  24. See Page 226 for the Code: • If you place a border, background color, or an image , on the <li> float the <ul> tag also. • If you don’t, the list items float OUTSIDE the <ul> and you get an overflow • Because the <ul> is floated, the text or elements below may try to wrap around the nav bar. • To prevent: apply the clear property to the element following the <il>

  25. Where Do I Get Help? • List Tutorial • Cool List Based Designs • List Tabs (Like Amazon) • List-o-Matic Wizard