TOPICS Section

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

The TOPICS Section contains the global navigation for the web document collection.

• Each Topic is hyperlinked to its individual web page and is activated by:
  • Mouse:
    1. Hover over the Topic hperlink.
    2. Click it to open the web page.
  • Keyboard:
    1. Press the Tab key to navigate to and gain focus on the desired Topic hyperlink.
    2. Press the Enter key to open the web page.

This is the markup code that builds the TOPICS Section:

1. /* TOPICS Section markup code */

3. <h4>topics</h4>

4.    <ul class="linkstate">

5.       <li><a href="home.htm">Home</a>

6.          <ul>

7.             <li><a href="GettingStarted.htm">Getting Started</a></li>

8.             <li><a href="Nav.htm">The NAV Container</a>

9.                <ul>

10.                   <li><a href="Skip.htm">Skip to Content Section</a></li>

11.                   <li><a href="hr.htm">Horizontal Rule Section</a></li>

12.                   <li><a href="LinkStates.htm">Link States Section</a></li>

13.                   <li class="topics"><a href="Topics.htm" title="This page is currently open.">Topics Section</a></li>

14.                   <li><a href="Guide.htm">A Help Authoring Guide Section</a></li>

15.                   <li><a href="SectionHeading.htm">Section Heading Code</a></li>

16.                   <li><a href="CurrentlyOpen.htm">Currently Open Code</a></li>

17.                </ul>

18.             </li>

19.             <li><a href="Acknowledgements.htm">Acknowledgements</a></li>

20.             <li><a href="References.htm">References</a></li>

21.             <li><a href="DesignNotes.htm">Design Notes</a></li>

22.          </ul>

23.       </li>

24.    </ul>

26. /* end TOPICS Section markup code */

top

C.S.S. Presentation Code

The presentation for the TOPICS Section is defined in the following manner:

#nav .linkstate

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

#nav .linkstate a:link

text-decoration: none; - removes underlining from hyperlinks

color: #a4d3ee; - sets the font color to a light blue

padding-right: 1.7em; - makes space on the right side of the Topic for the linkstate image

background: #000 url(images/link.gif) no-repeat right; shorthand for the background property:

• #000 - sets the background color to black
• url(images/link.gif) - sets the relative path to the images folder containing the link icon image
• no-repeat - sets the image to a single and not a multiple rendering
• right; - positions the image to the right of the hyperlink

vertical-align: bottom; - positions the image at the bottom of the text line

#nav .linkstate a:visited

text-decoration: none; - removes underlining from hyperlinks

color: orange; - sets the font color to orange

padding-right: 1.7em; - makes space on the right side of the Topic for the linkstate image

background: #000 url(images/visited.gif) no-repeat right; shorthand for the background property:

• #000 - sets the background color to black
• url(images/visited.gif) - sets the relative path to the images folder containing the link icon image
• no-repeat - sets the image to a single and not a multiple rendering
• right; - positions the image to the right of the hyperlink

vertical-align: bottom; - positions the image at the bottom of the text line

#nav .linkstate a:hover

text-decoration: none; - removes underlining from hyperlinks

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

padding-right: 1.7em; - makes space on the right side of the Topic for the linkstate image

background: #000 url(images/hover.gif) no-repeat right; shorthand for the background property:

• #000 - sets the background color to black
• url(images/hover.gif) - sets the relative path to the images folder containing the link icon image
• no-repeat - sets the image to a single and not a multiple rendering
• right; - positions the image to the right of the hyperlink

vertical-align: bottom; - positions the image at the bottom of the text line

#nav .linkstate a:active

text-decoration: none; - removes underlining from hyperlinks

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

background: #000 url(images/hover.gif) no-repeat right; shorthand for the background property:

• #000 - sets the background color to black
• url(images/hover.gif) - sets the relative path to the images folder containing the link icon image
• no-repeat - sets the image to a single and not a multiple rendering
• right; - positions the image to the right of the hyperlink

vertical-align: bottom; - positions the image at the bottom of the text line

#nav .linkstate a:focus

text-decoration: none; - removes underlining from hyperlinks

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

background: #000 url(images/hover.gif) no-repeat right; shorthand for the background property:

• #000 - sets the background color to black
• url(images/hover.gif) - sets the relative path to the images folder containing the link icon image
• no-repeat - sets the image to a single and not a multiple rendering
• right; - positions the image to the right of the hyperlink

vertical-align: bottom; - positions the image at the bottom of the text line

top

This is the C.S.S. code used to format the TOPICS Section:

1. /* TOPICS Section presentation code */

3. #nav .linkstate {

4.   font-weight: bold; }

6. #nav .linkstate a:link {

7.   text-decoration: none;

8.   color: #a4d3ee;

9.   padding-right: 1.7em;

10.   background: #000 url(images/link.gif) no-repeat right;

11.   vertical-align: bottom; }

13. #nav .linkstate a:visited {

14.   text-decoration: none;

15.   color: orange;

16.   padding-right: 1.7em;

17.   background: #000 url(images/visited.gif) no-repeat right;

18.   vertical-align: bottom; }

20. #nav .linkstate a:hover {

21.   text-decoration: none;

22.   color: #fff;

23.   padding-right: 1.7em;

24.   background: #000 url(images/hover.gif) no-repeat right;

25.   vertical-align: bottom; }

27. #nav .linkstate a:active {

28.   text-decoration: none;

29.   color: #a4d3ee;

30.   background: #000 url(images/hover.gif) no-repeat right;

31.   vertical-align: bottom; }

33. #nav .linkstate a:focus {

34.   text-decoration: none;

35.   color: #a4d3ee;

36.   background: #000 url(images/hover.gif) no-repeat right;

37.   vertical-align: bottom; }

39. /* end TOPICS Section presentation code */

top