+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
Links and Navigation
1. Links & Navigation
<and presentation with css />
Advanced CSS Stephen Ireland
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. 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=”http://www.google.com”>Google</a>
need http:// if linking to an external website
Advanced CSS Stephen Ireland
4. States of a Link
A link has four states of activity
• Unvisited
• Hover
• Active
• Visited
Advanced CSS Stephen Ireland
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. 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
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. 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. 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. 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. 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. 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. 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. Applying Styles
Unstyled Styled
Advanced CSS Stephen Ireland
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. 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. 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. 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. 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. Your Vertical Nav Bar
But what if we want it
to display horizontally?
Advanced CSS Stephen Ireland
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. Completed
Your horizontal navigation
Advanced CSS Stephen Ireland
