#skipLink a:link, #skipLink a:visited {
color: #cecece;
}
#skipLink a:hover, #skipLink a:focus {
color: #000000;
}
USING LINKS AND CREATING NAVIGATION
167
5
Required files skip-navigation-completed.html, skip-navigationcompleted.
css, and skip-navigation-down-arrow.gif from the
chapter 5 folder.
What you??™ll learn How to create skip navigation that sits centrally at the top of the
web page and is invisible, but that displays a rollover effect during
the hover and focus states.
Completed files skip-navigation-background-image.html, skip-navigationbackground-
image.css, and skip-navigation-down-arrow.gif
(unchanged during the tutorial) from the chapter 5 folder.
1. Position the skipNav div. Add the following link to remove the skipNav div from
the document flow and position it at the top of the web page. The width and
text-align property values stretch the div to the full width of the browser window
and center the text horizontally, respectively.
#skipLink {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
2. Style the skip navigation link. Add the following rule to style the link within the
skipLink div. By setting display to block, the active area of the link stretches to
fill its container, thereby effectively making the entire containing div clickable. The
padding-bottom setting is important, because this provides space at the bottom of
the div for displaying the background image used for the hover state, added in the
next step.
Pages:
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257