The NAV Container

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

This is the markup code employed to build the navigation div container on the left side of each page. 

  1. /* navigation div container markup code - includes all child elements */
  2.  
  3. <div id="nav">
  4.    <h4 class="skip">
  5.       <a href="#a1">skip to content</a></h4>
  6.    <hr>
  7.   <h4 title="Hyperlink states.">link state symbols</h4>
  8.      <ul class="linkstate">
  9.         <li class="hover"><img alt="Ball symbol." class="state" src="images/hover.gif" width="16" height="16">Focus/Hover</li>
  10.         <li class="unvisited"><img alt="Chain link symbol." class="state" src="images/link.gif" width="16" height="16">Unvisited</li>
  11.         <li class="visited"><img alt="Check mark symbol." class="state" src="images/visited.gif" width="16" height="16">Visited</li>
  12.         <li class="currently"><img alt="Star symbol." class="state" src="images/star.gif" width="16" height="16">Currently Open</li>
  13.       </ul>
  14.    <hr>
  15.    <h4>topics</h4>
  16.       <ul class="linkstate">
  17.          <li><a href="home.htm">Home</a>
  18.            <ul>
  19.               <li><a href="GettingStarted.htm">Getting Started</a></li>
  20.               <li><span class="navcontainer linkstate"><a href="Nav.htm" title="This page is currently open.">NAV Container</a></span>
  21.                  <ul>
  22.                     <li><a href="Skip.htm">Skip to Content Section</a></li>
  23.                     <li><a href="hr.htm">Horizontal Rule Section</a></li>
  24.                     <li><a href="LinkStates.htm">Link State Symbols Section</a></li>
  25.                     <li><a href="Topics.htm">Topics Section</a></li>
  26.                     <li><a href="Guide.htm">Help Authoring Section</a></li>
  27.                     <li><a href="SectionHeading.htm">Section Heading Code</a></li>
  28.                     <li><a href="CurrentlyOpen.htm">Currently Open Code</a></li>
  29.                  </ul>
  30.               </li>
  31.               <li><a href="Acknowledgements.htm">Acknowledgements</a></li>
  32.               <li><a href="References.htm">References</a></li>
  33.               <li><a href="DesignNotes.htm">Design Notes</a></li>
  34.            </ul>
  35.         </li>
  36.      </ul>
  37.    <hr>
  38.    <h4 class="norm">A Help Authoring Guide</h4>
  39. </div>
  40.  
  41. /* end navigation div container markup code - includes all child elements */

top

The C.S.S. Presentation Layer Code

Here we employ the C.S.S. Liquid Box Model to position and style the Navigation div container in the browser window:

The presentation code is defined as follows:

div id="nav"
width: 23em; - gives the navigation div container a relative horizontal size
position: absolute; - removes the navigation div container from the natural flow of the document.
top: 1em; - sets the distance from the top of the browser window
left: 1em; - sets the distance from the left side of the browser window
margin: 0em; - shorthand margin property code - removes all margins in the following order: top, right, bottom, left
padding: 0em 0.5em 1em 0.5em; - shorthand code for the padding as such:
  • pading-top: 0em; - sets the top padding to 0em
  • padding-right: 0.5em; - sets the right padding to 0.5em
  • padding-bottom: 1em; - sets the bottom padding to 1em
  • padding-left: 0.5em; - sets the left padding to 0.5em
border: 1px solid #ffd505; - shorthand code for the border - defines the colored border around the nav container:
  • border-width: 0.1em; - sets the width of the border
  • border-style: solid; - sets the style of the border
  • border-color: #ffd505; - sets the color of the border
#nav ul
margin: 0em; - margin shorthand code - removes all margins in the following order: top, right, bottom, left
padding: 0em; - padding shorthand code: removes all padding in the following order: top, right, bottom, left
list-style-type: none; - removes the list-styles: discs, squares, circles, etc.
color: #fff; - sets the color of white to the text characters
background: inherit - sets the list to inherit the container background color
#nav ul li
margin: 0em; - remove all margins from the list items in the following order: top, right, bottom, left
padding: 0.4em 0em 0em 0.5em; - shorthand for the padding:
  • padding-top: 0.4em; - sets the top padding to 0.4em
  • padding-right: 0em; - sets the right padding to 0em
  • padding-bottom: 0em; - sets the bottom padding to 0em
  • padding-left: 0.5em; - sets the left padding to 0.5em
list-style-type: none; - removes the list-styles: discs, squares, circles, etc.
#nav ul ul li
padding: 0em; - shorthand for the padding - removes all padding in the following order: top, right, bottom, left
margin-left: 2em; - sets the left margin padding to 2em
list-style-type: disc; - sets the list-style-type to a disc
#nav ul ul ul li
padding: 0em; - shorthand for the padding - removes all padding in the following order: top, right, bottom, left
margin-left: 1.4em; - sets the left margin padding to 1.4em
list-style-type: circle; - sets the list-style-type to a circle

top


The CSS code: 

  1. /* navigation div container presentation code */
  2.  
  3. #nav {
  4.   width: 23em;
  5.   position: absolute;
  6.   top: 1em;
  7.   left: 1em;
  8.   margin: 0em;
  9.   padding: 0em 0.5em 1em 0.5em
  10.   background: inherit;
  11.   color: #000;
  12.   border: 0.1em solid #ffd505; }
  13.  
  14. #nav ul {
  15.   margin: 0em;
  16.   padding: 0em;
  17.   list-style-type: none;
  18.   color: #fff;
  19.   background-color: inherit; }
  20.  
  21. #nav ul li {
  22.   margin: 0em;
  23.   padding: 0.4em 0em 0em 0.5em;
  24.   list-style-type: none; }
  25.  
  26. #nav ul ul li {
  27.   padding: 0em;
  28.   margin-left: 2em;
  29.   list-style-type: disc; }
  30.  
  31. #nav ul ul ul li {
  32.   padding: 0em;
  33.   margin-left: 1.4em;
  34.   list-style-type: circle;
  35.  
  36. /* end navigation div container presentation code */

top