LINK STATE SYMBOLS Section

The (X)H.T.M.L. Structure Layer Markup Code

The LINK STATES section is a legend that identifies the current state of a hyperlink in the TOPICS section of the navigation container:

Hyperlink State by Related Color and Icon

Hyperlink State	Related Color	Related Icon
Unvisited	blue
Hover	white
Visited	orange
Currently Open	yellow

This is the markup used to structure the LINK STATES Section:

1. /* LINK STATES markup code */

3.   <h4>link states</h4>

4.      <ul class="linkstate">

5.         <li class="unvisited" title="Chain link symbol.">Unvisited</li>

6.         <li class="hover" title="Ball symbol.">Hover</li>

7.         <li class="visited" title="Check mark symbol.">Visited</li>

8.         <li class="nolink" title="Star symbol.">Currently Open</li>

9.      </ul>

11. /* end LINK STATES markup code */

top

The C.S.S. Presentation Layer Code

LINK STATE SYMBOLS is a legend that identifies the state of a link in the navigation list of an open web page.

• The navigation list will always display a link state symbol in the following manner:
  • Unvisited = hyperlink is colored blue with a chain link symbol
  • Visited = hyperlink is colored orange with a check mark symbol
  • Hover = hyperlink is colored white with a ball symbol
  • Currently Open = hyperlink is disabled, colored yellow, with a star symbol

• The presentation code is static and only for identification purposes, whereas the navigation list code displays dynamic link state symbols.
  • The #nav .linkstate class sets all characters within the unordered list to bold.
  • The link images are called via the presentation code from the images folder, which is contained within the main project folder.
    • Notice the url address/relative path to the images folder where the images are kept.

The LINK STATE SYMBOLS presentation styles are defined as follows:

#nav .linkstate

font-weight: bold; - sets all characters to bold

#nav .unvisited

color: #a4d3ee; - sets the characters color to light blue

background: transparent url(images/link.gif) no-repeat 6.3em 0.6em; - shorthand for the background property:

• transparent - sets the background-color to transparent, letting the page background-color show through
• url(images/link.gif) - calls the image from the images folder into the web page
• no-repeat - limits the image to a single, instead of multiple renderings in the web page
• 6.3em - sets the horizontal distance to the right where the image will appear
• 0.6em - sets the vertical distance of the image in relation to the line of characters

#nav .hover

color: #fff; - sets the characters color to white

background: transparent url(images/link.gif) no-repeat 4.5em 0.6em;

• transparent - sets the background-color to transparent, letting the page background-color show through
• url(images/hover.gif) - calls the image from the images folder into the web page
• no-repeat - limits the image to a single, instead of multiple renderings in the web page
• 4.5em - sets the horizontal distance to the right where the image will appear
• 0.6em - sets the vertical distance of the image in relation to the line of characters

#nav .visited

color: orange; - sets the characters color to orange

background: transparent url(images/visited.gif) no-repeat 5em 0.6em;

• transparent - sets the background-color to transparent, letting the page background-color show through
• url(images/visited.gif) - calls the image from the images folder into the web page
• no-repeat - limits the image to a single, instead of multiple renderings in the web page
• 5em - sets the horizontal distance to the right where the image will appear
• 0.6em - sets the vertical distance of the image in relation to the line of characters

#nav .nolink

color: yellow; - sets the characters color to yellow

background: transparent url(images/star.gif) no-repeat 8.3em 0.6em;

• transparent - sets the background-color to transparent, letting the page background-color show through
• url(images/star.gif) - calls the image from the images folder into the web page
• no-repeat - limits the image to a single, instead of multiple renderings in the web page
• 8.3em - sets the horizontal distance to the right where the image will appear
• 0.6em - sets the vertical distance of the image in relation to the line of text characters

top

This is the C.S.S. presentation layer code used to transform the markup:

1. /* LINK STATES presentation code */

3. #nav .linkstate {

4.   font-weight: bold; }

6. #nav .unvisited {

7.   color: #a4d3ee;

8.   background: transparent url(images/link.gif) no-repeat 6.3em 0.6em;

10. #nav .hover {

11.   color: #fff;

12.   background: transparent url(images/hover.gif) no-repeat 4.5em 0.6em;

14. #nav .visited {

15.   color: orange;

16.   background: transparent url(images/visited.gif) no-repeat 5em 0.6em;

18. #nav .nolink {

19.   color: yellow;

20.   background: transparent url(images/star.gif) no-repeat 8.3em 0.6em;

22. /* end LINK STATES presentation code*/

top