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: Three 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" class="blackback">
                
                <!--
                **********************************
                **** START MAIN CONTENT HERE. ****
                **********************************
                -->
        <h2 class="txonly">Three Columns</h2>
        
		<p class="bigtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
        Etiam enim. Proin pulvinar, dui id nonummy tincidunt, nibh nunc semper lectus, rutrum 
        mattis quam turpis in enim.</p>
<!-- Begin two-column layout within the main content div (3 columns total visually.) -->
		<div class="twocol"><!-- Two column Wrapper Div -->
			<div class="urone"><!-- Left column inside the wrapper -->		
		<!-- Begin two-column layout within the main content div (3 columns total 
        visually.) -->
		<div class="twocol"><!-- Two column Wrapper Div -->
			<div class="urone"><!-- Left column inside the wrapper -->						
				
        <h2>MULTIMEDIA FEATURES</h2>
        
        <div class="lgfeature">
            <div class="theimg"><a href="#"><img src="images/activ1.jpg" alt="DONT FORGET ALT 
            TAGS" width="100" height="75" /></a></div>
            <dl>
                <dt>Large Image List</dt>
                <dd>This list is used for features with an image size of 100X75. Used for 
                Multimedia features.
                <ul class="linklist">
                    <li><a href="#">Visit this website</a></li>
                </ul>
                </dd>
            </dl>
        </div>
        <div class="clearleft"></div>
        
        <div class="lgfeature">
            <div class="theimg"><a href="#"><img src="images/activ1.jpg" alt="DONT FORGET 
            ALT TAGS" width="100" height="75" /></a></div>
            <dl>
                <dt>Large Image List</dt>
                <dd>This list is used for features with an image size of 100X75. Used for 
                Multimedia features.
                <ul class="linklist">
                    <li><a href="#">Visit this website</a></li>
                </ul>
                </dd>
            </dl>
        </div>
        <div class="clearleft"></div>
        
        <h2>NEWS FEATURES</h2>
        
        <dl>
            <dt>Date - News Headline Here</dt>
            <dd>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.
            <ul class="linklist">
                <li><a href="#">Read more</a></li>
            </ul>
            </dd>
        </dl>
        
        <dl>
            <dt>Date - News Headline Here</dt>
            <dd>Donec ipsum. Praesent fringilla dui at odio. Ut ipsum nulla, tincidunt vel.
            <ul class="linklist">
                <li><a href="#">Read more</a></li>
            </ul>
            </dd>
        </dl>
        
        <dl>
            <dt>Date - News Headline Here</dt>
            <dd>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.
            <ul class="linklist">
                <li><a href="#">Read more</a></li>
            </ul>
            </dd>
        </dl>
        
        <dl>
            <dt>Date - News Headline Here</dt>
            <dd>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.
            <ul class="linklist">
                <li><a href="#">Read more</a></li>
            </ul>
            </dd>
        </dl>
        
        <dl>
            <dt>Date - News Headline Here</dt>
            <dd>Donec ipsum. Praesent fringilla dui at odio. Ut ipsum nulla, tincidunt vel.
            <ul class="linklist">
                <li><a href="#">Read more</a></li>
            </ul>
            </dd>
        </dl>
                                        
    </div><!--  END left column -->
    <div class="urtwo"><!-- Right column inside the wrapper -->
    
    
    
            <div class="newfeat2">
                <h2>Widget 1</h2>
                  <dl>
                      <dt>Website Name Here</dt>
                      <dd>Nunc ut augue in eros lacinia sagittis.
                      <ul class="linklist">
                          <li><a href="#">Visit this website</a></li>
                      </ul>
                      </dd>
                  </dl>
                </div>

    
    
                <div class="newfeat2">
                <h2>Widget 2</h2>
                <dl>
					<dt>Website Name Here</dt>
					<dd>Nunc ut augue in eros lacinia sagittis.
					<ul class="linklist">
						<li><a href="#">Visit this website</a></li>
					</ul>
					</dd>
				</dl>
                </div>
                
                <div class="newfeat2">
                <h2>Widget 3</h2>
                <dl>
					<dt>Website Name Here</dt>
					<dd>Nunc ut augue in eros lacinia sagittis.
					<ul class="linklist">
						<li><a href="#">Visit this website</a></li>
					</ul>
					</dd>
				</dl>
                </div>
                
                <div class="newfeat2">
                <h2>Normal Paragraph</h2>
                <p>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.</p>
                </div>
                
                
                
				
			</div><!-- END Right column -->
			
			<div class="clear"></div>
		</div><!-- END of Two Column Wrapper Div -->
    
    
        <!--
        **** 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