NASA Logo, National Aeronautics and Space Administration

National Aeronautics and Space Administration

Goddard Space Flight Center

One NASA Look and Feel, Web Standards to the rescue.

Web Standards to the rescue. One NASA Look and Feel CSS TEMPLATES

Changes: Two Column Layout

Changes in the templates
  • Each line of code that appears in green indicates no changes have been made to the html from the previous templates.
  • Each line of code that appears in yellow indicates that some kind of modification has been applied to a particular block or section of code. These modifications are in place within the new templates.
  • Anything that appears in red indicates lines of code that did not appear in the previous templates or has been redefined to fit into the new layout.
	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>NASA - Web Standards - Three Columns</title>
        <link rel="stylesheet" type="text/css" media="screen" href="css/everyone.css" />
        <style type="text/css" media="screen">@import url("css/style.css");
        </style>
        <!--[if gte IE 5]>
            <style type="text/css" media="screen">@import url("css/style_iefixes.css");
            </style>
        <![endif]-->
        <link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
        <link rel="stylesheet" type="text/css" media="handheld" href="css/handheld.css" />
        <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
        <meta http-equiv="Content-Language" content="en-us" />
        <meta name="MSSmartTagsPreventParsing" content="true" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="doc-class" content="Living Document" />
    </head>
    <body id="twoon" class="lnoneon">
    
    
            <div id="bkg_surround">
            <div id="bkg_layer">
            </div>
        </div>
	
    
            <div id="paper">
        
            <div id="nasahead">
                <div id="nasahome">

    
    
                <a href="http://www.nasa.gov" target="_blank">
                <img src="images/nasa_header_logo1.gif" alt="NASA Logo, National 
                Aeronautics and Space Administration" width="300" height="65" /></a>
        </div>
        <div id="centername">
            <h1>National Aeronautics and Space Administration</h1>
            <h2>Goddard Space Flight Center</h2>
        </div>
    
    
        <div id="nasaheadlinks">
            <ul>
                <li>
                    <a href="http://www.nasa.gov/" target="_blank">Visit NASA.gov</a>
                </li>
                <li>
                    <a href="#">Contact Us</a>
                </li>
            </ul>
        </div>
    
    
        <div id="searchbox">
            <h3>Search:</h3>
            <form name="search" id="search" method="get" action="">
                <input type="text" size="10" title="searchfield" value="Search this site" />
                <a href="" class="searchbtn" alt="Search"><img src="images/search_go.jpg" 
                alt="Search" width="49" height="22" /></a>
            </form>
        </div>
    
    
            </div>    
    
    
    <div id="headimage">
        <img src="images/main_header1.jpg" alt="One NASA Look and Feel, Web Standards to 
        the rescue." width="952" height="120" /><h1>Web Standards to the rescue</h1>
        </div>
        <div class="clear">
        </div>
        <div id="menu">
            <ul>
                <li id="one">
                    <a href="index.html" title="HOME"><span>HOME</span></a>
                </li>
                <li id="two">
                    <a href="index4.html" title="NASA TEMPLATES"><span>NASA TEMPLATES
                    </span></a>
                </li>
                <li id="three">
                    <a href="index2.html" title="BUILDING YOUR SITE"><span>BUILDING YOUR SITE
                    </span></a>
                </li>
                <li id="four">
                    <a href="index3.html" title="WHY WEB STANDARDS?"><span>WHY WEB STANDARDS?
                    </span></a>
                </li>
                <li id="five">
                    <a href="#" title="HELP DESK"><span>HELP DESK</span></a>
                </li>
            </ul>
        </div>
        <div class="clear">
        </div>
        <div id="contentwrapper">
            <!-- Content Wrapper, this div surrounds the main content and the Left Nav -->
            <div id="rightcontent">
                <a name="skipping" id="skipping"></a>
                <!-- Main content div (right side) --><!--
                **********************************
                **** START MAIN CONTENT HERE. ****
                **********************************
                -->
                <h2>Feature</h2>
                <h3 class="headertype2">Article Title Here <span>06.18.2005</span></h3>

    
    
        <div class="capleft" style="width:250px;">
            <img src="images/largecontentimage.jpg" alt="Space craft landing." width="250" 
            height="250" />
            <p style="width:240px;">
                This is a caption. You must specify the width of the div for this to work 
                properly. The width should be the same as the image.
            </p>
        </div>
    
    
        <p>
            <a href="#">Lorem ipsum dolor sit amet</a>, consectetuer adipiscing elit. Etiam in
            quam quis felis pellentesque mollis. Duis mi. Curabitur eget justo.
            Donec ultricies. Aliquam erat volutpat. Nunc pede erat, feugiat eu,
            porta a, dictum ac, lorem. Etiam velit. Fusce fringilla. Curabitur
            eu massa. Nullam fringilla imperdiet diam. Donec ipsum. Praesent fringilla
            dui at odio. Ut ipsum nulla, tincidunt vel, gravida sit amet, vehicula
            ut, odio. Suspendisse odio. Maecenas eget ipsum ac est molestie vulputate.
            Integer volutpat quam ut erat. Aenean porta ante et lectus. In eleifend,
            turpis lacinia accumsan semper, est libero vestibulum tellus, sed semper 
            tellus augue ac purus. Quisque eget nibh. Sed lobortis. 
        </p>
        <p>
            Aenean ante. Curabitur sodales, dolor at auctor laoreet, metus ipsum
            luctus neque, et pharetra est lectus eu diam. Etiam convallis. Cum
            sociis natoque penatibus et magnis dis parturient montes, nascetur
            ridiculus mus. Aliquam eros elit, porttitor ac, suscipit eu, luctus
            eu, dolor. Nulla id dui vel nibh accumsan fermentum. Etiam dolor velit,
            volutpat ac, consequat et, lobortis sed, wisi. Pellentesque sit amet
            mauris eu massa commodo vestibulum. Vestibulum porta hendrerit risus.
            Vestibulum mi magna, dapibus vel, aliquam at, pulvinar at, elit. Aenean
            eu felis. Quisque id est. Pellentesque pulvinar lorem ac mi. Proin 
            tincidunt faucibus tortor. Vivamus mi. 
        </p>
        <div class="capright" style="width:250px;">
            <img src="images/largecontentimage.jpg" alt="Space craft landing." width="250" 
            height="250" />
            <p style="width:240px;">
                This is a caption. You must specify the width of the div for this to work 
                properly. The width should be the same as the image.
            </p>
        </div>
        <p>
            Curabitur mattis venenatis nisl. Donec justo est, vestibulum non,
            consequat ut, feugiat sed, velit. Lorem ipsum dolor sit amet, consectetuer
            adipiscing elit. Sed varius mauris quis tellus. Curabitur nec quam.
            Fusce vel nisl eget est tincidunt consectetuer. Donec euismod, dui
            eget rutrum lacinia, velit lectus posuere ipsum, eget consequat mauris
            justo et odio. Pellentesque non pede. Nam convallis. Suspendisse laoreet
            nonummy orci. Nunc ut augue in eros lacinia sagittis. Donec volutpat
            pharetra tellus. Donec tristique aliquam risus. Suspendisse consequat
            tristique felis. Suspendisse elit erat, imperdiet at, tempor quis,
            ornare eu, urna. Vestibulum ante ipsum primis in faucibus orci luctus
            et ultrices posuere cubilia Curae; Sed in nisl. Sed libero. Maecenas 
            eleifend sem in magna. 
        </p>
        <p>
            Aenean vel diam vitae lectus semper bibendum. Donec sodales, dolor
            ut sollicitudin viverra, magna metus aliquet augue, lobortis dapibus
            lorem enim a ante. Donec dictum. Duis porttitor pede vitae pede. Duis
            eros tellus, vulputate in, feugiat ac, pulvinar eu, sapien. Nulla sit
            amet purus. Pellentesque habitant morbi tristique senectus et netus
            et malesuada fames ac turpis egestas. Vivamus blandit libero ut leo.
            Mauris sodales libero at lorem laoreet ultricies. Praesent aliquam
            fringilla nibh. Integer ipsum purus, convallis non, convallis sed,
            interdum non, orci. Quisque eget leo id leo varius aliquet. Sed rutrum 
            iaculis ligula. Phasellus id nibh eget risus interdum sollicitudin. 
        </p>
        <p>
            In hac habitasse platea dictumst. Vivamus nec justo. Vivamus vulputate
            sagittis felis. Fusce aliquam sodales metus. Duis et orci. Aenean venenatis
            risus vel felis. Phasellus varius bibendum sem. Aliquam erat volutpat. 
            Donec iaculis tincidunt elit. Nam ut velit. 
        </p>
        <!--
        **** END MAIN CONTENT HERE. ****
        -->
    </div>
    <!-- END Main content div -->
    <div id="leftcontent">
        <!-- Left content div (left side, includes the left nav) --><!-- Begin Left Nav -->
    
    
      <div id="lefttitle">
          <h2>NASA Templates</h2>
      </div>
      <div id="leftnav">
          <ul>
              <li id="lnone"><a href="index.html">Navigation Item 1</a></li>
              <li id="lntwo"><a href="index_two.html">Navigation Item 2</a></li>
              <li id="lnthree"><a href="#">Navigation Item 3</a></li>
              <li id="lnfour"><a href="#">Navigation Item 4</a></li>
              <li id="lnfive"><a href="#">Navigation Item 5</a></li>
              <li id="lnsix"><a href="#">Example of a long navigation item that wraps</a></li>
              <li id="lnseven"><a href="#">Navigation Item 7</a></li>
          </ul>
      </div>
    
    
              <!-- END Left Nav -->
              <div class="fact">
                  <h3>NASA Fact</h3>
                  <p>
                      Insert a NASA fact here. Feel free to use a server side include or a 
                      back-end rotater.
                  </p>
              </div>
              <ul class="linklist facta">
                  <li>
                      <a href="#">More NASA facts...</a>
                  </li>
              </ul>
          </div>
          <!-- END Left content div -->
      </div>
      <!-- END Content Wrapper, this div surrounds the main content and the Left Nav -->
      <div id="nasafoot">
    
    
      <div id="nasafootplus">
          <ul>
              <li>
                  <a href="http://www.nasa.gov/about/highlights/HP_Privacy.html" 
                  target="_blank">Privacy Policy & Important Notices</a>
              </li>
              <li>
                  <a href="#" target="_blank">Contact Us</a>
              </li>
          </ul>
      </div>
    
    
      <div id="nasafoothome">
          <a href="http://www.nasa.gov/" target="_blank"></a>
      </div>
    
    
                <div id="nasafootlinks">
                  <ul>
                    <li>
                        NASA Official: <a href="mailto:insertname@nasa.gov">Insert Name</a>
                    </li>
                    <li>
                        Curator: <a href="mailto:insertname@mail630.gsfc.nasa.gov">Insert 
                        Name</a>
                    </li>
                    <li>
                        Page Last Updated: April 9, 2008
                    </li>
                  </ul>
                </div>
            </div>
        </div>
    </body>
</html>
NASA logo