Technical Instructions for inclusion of the National Library of Medicine Header

Preliminary Information

The National Library of Medicine (NLM) header requires the use of two stylesheets:
- app.css
  The primary stylesheet, fully backwards compatible with 4.x series browsers.
- app_import
  The imported stylesheet contains settings which will not render correctly in 4.x series browsers.
These styles should be linked to using the following html code:
```
<link rel="stylesheet" href="http://www.nlm.nih.gov/styles/app.css" type="text/css"  />

<link rel="stylesheet" href="http://www.nlm.nih.gov/styles/app_import.css" type="text/css" media="all" />
```
Note the use of media="all" in the statement linking to app_import.css, this attribute is not recognized by Netscape 4.x and effectively prevents the file from being read.
The entire header resides in its own table, this table has no fixed width and will expand to fill the width of the screen by default. The table markup looks like this:
```
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="mwheader">
<tr>
</tr>
</table>
```
Each additional header item (breadcrumb bars, menu bar, etc.) resides in its own row, making it somewhat modular and easy to add and remove the various pieces of the header.
All styles and class in app.css have been prefixed by "mw", this should keep the namespace collision to a minimum.

The Standard NLM Header

HTML Markup:

<tr>

      <td id="mwbanner" ><img src="http://www.nlm.nih.gov/images/head_left.gif" alt="" width="334" height="55" border="0" usemap="#mwnlm_logo" id="mwNLMBanner" /> </td>

      <td id="mwsearch"><form method="get" action="http://search.nlm.nih.gov/homepage/query" target="_self" name="searchForm" id="mwsearchForm" >

          <label for="PARAMETER" id="mwsearchLabel">Search NLM Web Site</label>

          <input name="PARAMETER" id="mwPARAMETER" type="text" class="mwtext" size="12" />

          <input name="imageField"  type="image" src="http://www.nlm.nih.gov/images/button_go.gif" alt="Search" align="absmiddle" class="mwgobutton" />

          <span class="mwnavbar" ><a href="http://www.nlm.nih.gov/">NLM Home</a> | 
            <a href="http://www.nlm.nih.gov/contacts/contact.html">Contact NLM</a> | 
            <a href="http://www.nlm.nih.gov/sitemap.html">Site Map</a> | 
            <a href="http://www.nlm.nih.gov/services/faq.html">FAQs</a></span>

          <input type="hidden" name="FUNCTION" value="search" />

          <input type="hidden" name="MAX" value="250" />

          <input type="hidden" name="DISAMBIGUATION" value="true" />

        </form></td>

</tr>

Please note that the image comprising the NLM Logo, Library and NIH text requires the use of a client side image map. Here is the Map code:

<map id="mwnlm_logo" name="mwnlm_logo" >

    <area shape="rect" coords="2,4,47,50" href="http://www.nlm.nih.gov" alt="" />

    <area shape="rect" coords="52,19,331,37" href="http://www.nlm.nih.gov" alt="United States National Library of Medicine" />

    <area shape="rect" coords="54,36,230,51" href="http://www.nih.gov" alt="National Institutes of Health" />

</map>

Breadcrumb Bars

There are two style of breadcrumb bars:

Standard Breadcrumb Bar

<tr id="mwbreadcrumb" >
   <td colspan="2">
      <span id="mwcontainer">
      <a href="#">Breadcrumb</a> &gt; 
      <strong>This Page</strong> 
      </span>
   </td>
</tr>

Designed for use at the NLM level for information pages not belonging to specific sections.

Alternate Breadcrumb Bar

<tr>
  <td colspan="2" id="mwbreadcrumbNoPics">
    <div>
       <a href="/index.html" title="National Library of Medicine home page">Home</a> 
       &gt; <a href="/hsrph.html" title="Health Services Research">Health Services Research & Public Health</a> 
       &gt; <a href="/nichsr/" title="NICHSR Home">NICHSR</a>

    </div>
  </td>
</tr>

Normally used when following a Menu bar in the header.

Dotted Bar, Section Bar, and Menu

These three items tend to be used as a group.

    <tr>

      <td colspan="2" id="mwdotted-bar" ></td>

    </tr>

    <tr>

      <td colspan="2" valign="middle" id="mwsection" class="mwhmd-red" ><span> History of Medicine</span></td>

    </tr>

    <tr>

      <td colspan="2" id="mwsection-menu" >
        <div> 
            <a href="/hmd/" title="History of Medicine Home Page">History Home</a> | 
            <a href="/hmd/about/index.html" title="About Us">About us</a> | 
            <a href="/hmd/about/visitus.html" title="Visit Us">Visit Us</a> | 
            <a href="/hmd/about/contactus.html" title="Contact HMD">Contact Us</a> | 
            <a href="/hmd/happening/tours.html" title="Tour the History of Medicine Section">Tours</a> | 
            <a href="/hmd/about/faqs.html" title="Frequently Asked Questions">FAQs</a> | 
            <a href="/hmd/help/reference/copyright.html" title="Copyright">Copyright</a> | 
            <a href="/hmd/sitemap/index.html" title="HMD Sitemap">Site Map</a> 
        </div>
        </td>
      </tr>

The dotted bar and menu are pretty straightforward, the section bar can be set to use a different color combo by changing the class to the appropriate named class ( mwhmd-red, mwgold, mwltPurple, mwnavy, mwgreen, mwgray, mwgrape, mwdeepPurple, mworange, mwteal, mwbrown, mwblack, mwgoldenrod, mwmeshGreen ).

Footer

The standard footer can be seen at the bottom of this page. HTML Markup:

<div style="clear: both;"></div>

<div id="mwfooter"> 
    <span>
        <a href="http://www.nlm.nih.gov/copyright.html">Copyright</a>, 
        <a href="http://www.nlm.nih.gov/privacy.html">Privacy</a>, 
        <a href="http://www.nlm.nih.gov/accessibility.html">Accessibility</a><br />

       U.S. National Library of Medicine, 8600 Rockville Pike, Bethesda, MD 20894<br />

      <a href="http://www.nih.gov/">National Institutes of Health</a>, 
        <a href="http://www.os.dhhs.gov/">Health &amp; Human Services</a>
    </span> 
</div>