Links and Navigation


Published on

Published in: Technology, Education
1 Comment
1 Like
  • Buy Wholesale Cell Phones, QuadBand Cellular Phones, Watch Mobiles, Cheap Cell Phones, TV Mobile Phones, PDA Smart Phones, Dual SIMs & Dual Standby Phones and Accessories Direct from China in A Low Prices
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Links and Navigation

  1. 1. Links & Navigation <and presentation with css /> Advanced CSS Stephen Ireland
  2. 2. Links How the web works - we need to get it right • Conventions should be followed • Links should stand out on a page • Differentiate from body text, preferably with some kind of hover effect • Make something look and act like a button - it becomes easier to understand what it does Advanced CSS Stephen Ireland
  3. 3. Anatomy of a Link Relative link within site <a href=”index.html”>Link text goes here</a> <a href=”pages/contact.html”>Contact us</a> <a href=””>Google</a> need http:// if linking to an external website Advanced CSS Stephen Ireland
  4. 4. States of a Link A link has four states of activity • Unvisited • Hover • Active • Visited Advanced CSS Stephen Ireland
  5. 5. States of a Link What the states mean • Unvisited - user has not visited the link location • Hover - user is hovering over the link (mouse or keyboard) • Active - user has clicked down but not released • Visited - user has visited the location the link points to Why do we need to know this? Because we can control the physical appearance of each state using CSS. Advanced CSS Stephen Ireland
  6. 6. Referenced in CSS State CSS selector Default appearance • Unvisited a:link blue, underlined • Hover a:hover blue, underlined • Active a:active red, underlined • Visited a:visited purple, underlined The default appearance of an html link is ugly. CSS gives us ultimate control to change the appearance of the link and its various states. Advanced CSS Stephen Ireland
  7. 7. Examples of Styled Link Advanced CSS Stephen Ireland
  8. 8. Link Styles What we have control over • Text colour (color) • Font family and style • Background colour • Decoration (Underline, strike-through, etc) • And more Links are inline elements, however we can force them to behave like block-level elements using display: block; Advanced CSS Stephen Ireland
  9. 9. How Styles are Applied CSS a:link, a:visited { All links visited or text-decoration: underline; unvisited will be green color: #b3ff3d; and underlined. } a:hover { When hovering over the text-decoration: none; link, the underline will color: #000000; disappear and the link } text will appear black. Advanced CSS Stephen Ireland
  10. 10. Be More Specific CSS p a:link, p a:visited { All links in a paragraph text-decoration: underline; visited or unvisited color: #b3ff3d; will be green and } underlined. In many cases we need to be more specific with our CSS styles. The CSS rule above will only affect links within paragraph tags. Advanced CSS Stephen Ireland
  11. 11. Navigation and Links What’s the difference? • Navigation is really a group of carefully considered links. • Gives structure and consistency to a website. • Helps visitors around the site, and get back to the homepage. Good navigation should allow a visitor to quickly find what they are looking for on your site. Advanced CSS Stephen Ireland
  12. 12. HTML Markup for Navigation Example HTML <div id=”navigation”> <ul> <li><a href=”page1.html”>Page 1</a></li> <li><a href=”page2.html”>Page 2</a></li> <li><a href=”page3.html”>Page 3</a></li> <li><a href=”page4.html”>Page 4</a></li> <li><a href=”page5.html”>Page 5</a></li> </ul> </div> Advanced CSS Stephen Ireland
  13. 13. Horizontal or Vertical? Example HTML <div id=”navigation”> <ul> <li><a href=”page1.html”>Page 1</a></li> <li><a href=”page2.html”>Page 2</a></li> Use this HTML markup whether you <li><a href=”page3.html”>Page 3</a></li> want your navigation to flow vertically or <li><a href=”page4.html”>Page 4</a></li> horizontally. <li><a href=”page5.html”>Page 5</a></li> </ul> </div> Advanced CSS Stephen Ireland
  14. 14. Why? Example HTML <div id=”navigation”> <ul> <li><a href=”page1.html”>Page 1</a></li> Because whether navigation displays <li><a href=”page2.html”>Page 2</a></li> horizontally or vertically, it is a <li><a href=”page3.html”>Page 3</a></li> presentational consideration, therefore <li><a href=”page4.html”>Page 4</a></li> controlled using CSS. <li><a href=”page5.html”>Page 5</a></li> </ul> </div> Advanced CSS Stephen Ireland
  15. 15. Applying Styles Unstyled Styled Advanced CSS Stephen Ireland
  16. 16. Step One: Ground Rules We apply some basic styles to the navigation div. CSS #navigation { width: 200px; font-family: “Lucida Grande”, “Trebuchet MS”, sans-serif; font-size: 80%; font-weight: bold; } Advanced CSS Stephen Ireland
  17. 17. Step Two: Reset Browser Defaults Reset margin and padding on the Unordered List to 0. CSS #navigation ul { margin: 0; padding: 0; } Advanced CSS Stephen Ireland
  18. 18. Step Three: Style the <li> Remove the bullet from the list-item and put a coloured border in place. CSS #navigation ul li { list-style: none; border-bottom: 1px solid #b64926; } Advanced CSS Stephen Ireland
  19. 19. Step Four: Colour and Block Style the link, display: block; converts the link into a clickable block area. CSS #navigation ul li a:link, #navigation ul li a:visited { display: block; padding: 8px 12px; text-decoration: none; background-color: #8e2800; color: #fff0ab; } Advanced CSS Stephen Ireland
  20. 20. Step Five: Hover State Create a roll-over style for the navigation - by changing the background colour of the link. CSS #navigation ul li a:hover { background-color: #468966; } Advanced CSS Stephen Ireland
  21. 21. Your Vertical Nav Bar But what if we want it to display horizontally? Advanced CSS Stephen Ireland
  22. 22. Horizontal Navigation Remove the contraining width... CSS #navigation { /*width: 200px;*/ font-family: “Lucida Grande”, “Trebuchet MS”, sans-serif; font-size: 80%; font-weight: bold; } Advanced CSS Stephen Ireland
  23. 23. Horizontal Navigation Float the list-items left, and change the border to right. CSS #navigation ul li { list-style: none; border-right: 1px solid #b64926; float: left; } Advanced CSS Stephen Ireland
  24. 24. Completed Your horizontal navigation Advanced CSS Stephen Ireland