lia hrefLicensea li lia hrefPrivacy Policyali lia hrefAbout Usali lia

Lia hreflicensea li lia hrefprivacy policyali lia

This preview shows page 417 - 419 out of 514 pages.

<li><a href="#">License</a> </li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Disclaimers</a></li></ul> <div class="float-divider"></div></div> CSS a:link, a:visited, a:active { text-decoration:none; color:maroon; } a:hover { color:black; text-decoration:underline; } .morelink{ font-size:0.8em; font-weight:bold; text-align:right; } .toplink{ font-size:0.7em; font-weight:normal; vertical-align:top; } .outlink{ padding-right:15px;font-style:italic; background:url("external.gif")no-repeat top right; } /* Nonessential rules are not shown. */
Background image
CHAPTER 17 LAYOUTS 419 Layout Links Problem You want to enhance navigation within a document and to other documents using specially styled links including skip-to-main-content, breadcrumb, sequential, more-info, top, external, and footer links. Solutions Section links allow you to link to any section in a document. You can assign each section to a unique ID. The ID is an anchor that can be linked to by internal and external links. Using the section ID as a selector, you can uniquely style the section and its elements. There are five common sections: preheader, header, postheader, body, and footer. (The terms preheaderand postheaderare my own.) Different types of links occur in each of these sections. Skip-to-main-content links allow users to jump directly to the main content of a document. This link is useful for nonsighted users and users reading the document on small devices. It occurs in the preheader and should be the first item in the document other than perhaps the document heading. Breadcrumb links are a series of links that lead back to the home page. They typically occur in the postheader or header. To identify them as breadcrumbs, you can separate them with a right-pointing arrow symbol. Sequential links link to previous and next documents in a series. They typically have names like Previous and Next, the former often preceded by a left-pointing arrow and the latter followed by a right-pointing arrow. More-info links allow content in a section to be abbreviated to make it easier to read online. If users want more information, they can click a link to read more about it. The link is often labeled some variation of More Info. You can visually set apart more-info links by making them the last item in a section, embedding them in their own paragraph, aligning them to the right, and preceding them with a right-pointing arrow symbol. Top links allow users to jump to the top of a section or document. They typically occur in the header of a section when they link back to the top of the document. They also occur as the last item in a section when they link back to the top of the section. They’re often raised above the baseline and are followed by an up-pointing arrow symbol. External links are styled to show that they lead to an external web site. This helps users decide whether they want to go to another web site. You can create a rule that adds right padding to a link and displays a background image of an up-right-pointing arrow in this padding.
Background image
Image of page 419

You've reached the end of your free preview.

Want to read all 514 pages?

  • Spring '15
  • css, The Trial, ........., Cascading Style Sheets

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture