• Name: Jordan
  • Language: (X)HTML
  1. ///////////////// CSS ///////////////////////
  2.  
  3.  
  4. * {
  5.     margin: 0;
  6.     padding: 0;
  7. }
  8.  
  9. body {
  10.     text-align: center;
  11.     font-size: 75%;
  12.     color: #000;
  13.     height: 100%;
  14.     font: Arial, Helvetica, sans-serif x-small;
  15. }
  16.  
  17. #wrapper {
  18.     position: absolute;
  19.     top: 0;
  20.     left: 0;
  21.     height: 100%;
  22.     width: 100%;
  23.     text-align: center;
  24.     margin: 0 auto;
  25. }
  26.  
  27. #header {
  28.     width: 100%;
  29.     height: 96px;
  30.     background: url(../images/headerbg.gif) bottom #003148;
  31.     text-align: center;
  32. }
  33.  
  34. #hc {
  35.     width: 900px;
  36.     height: 96px;
  37.     text-align: center;
  38.     margin: 0 auto;
  39. }
  40.  
  41. #hl {
  42.     margin: 0 auto;
  43.     text-align: center;
  44.     width: 375px;
  45.     height: 96px;
  46.     float: left;
  47.     background: url(../images/logo.gif) left #003148;
  48. }
  49.  
  50. #navigation {
  51.     float: right;
  52.     height: 10px;
  53.     font-size:93%;
  54.     line-height:normal;
  55.     padding-top: 38px;
  56. }
  57.  
  58. ul#nav {
  59.     overflow: auto;
  60.     width: 100%;
  61.     list-style: none;
  62.     margin: 0;
  63.     padding: 0;
  64.     font-weight: bold;
  65.     font-family:Arial, Helvetica, sans-serif;
  66.     font-size: 93%;
  67. }
  68.  
  69. ul#nav li {
  70.     float: left;
  71.     margin: 0;
  72.     padding: 0 7px;
  73. }
  74.  
  75. ul#nav a {
  76.     float: left;
  77.     text-decoration: none;
  78.     padding: 4px 0 16px;
  79.     color: #fff;
  80.     text-align: center;
  81. }
  82.  
  83. ul#nav a:hover {
  84.     background: url(../images/drop.gif) no-repeat center bottom;
  85.     cursor:default;
  86.     color: #fff;
  87. }
  88.  
  89. ul#nav a:active {
  90.     background: url(../images/drop.gif) no-repeat center bottom;
  91.     color: #278ecb;
  92. }
  93.  
  94. #hs1 {
  95.     width: 100%;
  96.     height: 8px;
  97.     font-size: 0;
  98.     background-color: #005d89;
  99. }
  100.  
  101. #hs2 {
  102.     width: 100%;
  103.     height: 8px;
  104.     font-size: 0;
  105.     background-color: #f3f3f3;
  106. }
  107.  
  108. #contentParent {
  109.     position: relative;
  110.     width: 100%;
  111.     height: 100%;
  112.     background: url(../images/bg.gif) #fff;
  113. }
  114.  
  115. #content {
  116.     width: 900px;
  117.     height: 100%;
  118.     text-align: center;
  119.     margin: 0 auto;
  120.     background: #fff;
  121. }
  122.  
  123. #footer {
  124.     background: #000;
  125.     color: #fff;
  126.     height: 50px;
  127. }
  128.  
  129.  
  130.  
  131.  
  132. ///////////////// HTML //////////////////////
  133.  
  134. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
  135. <html xmlns="http://www.w3.org/1999/xhtml">
  137. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  138. <link href="css/main.css" rel="stylesheet" type="text/css" />
  139. <title>Untitled Document</title>
  140. </head>
  142. <div id="wrapper">
  143.     <div id="header">
  144.         <div id="hc">
  145.             <div id="hl"></div><!-- END #hl -->
  146.             <div id="navigation">
  147.                 <ul id="nav">
  148.                     <li><a href="#">home</a></li>
  149.                     <li><a href="#">about us</a></li>
  150.                     <li><a href="#">products</a></li>
  151.                     <li><a href="#">services</a></li>
  152.                     <li><a href="#">contact</a></li>
  153.                 </ul>
  154.             </div><!-- END #navigation -->
  155.         </div><!-- END #hc -->
  156.     </div>
  157.     <!-- END #header -->
  158.     <div id="hs1"></div><!-- END #hs1 -->
  159.     <div id="hs2"></div><!-- END #hs2 -->
  160.     <div id="contentParent">
  161.       <div id="content">#CONTENT</div><!-- END #content -->
  162.     </div>
  163.     <!-- END #main -->
  164.     <div id="footer">#FOOTER</div>
  165.     <!--END #footer -->
  166. </div><!-- END #wrapper -->
  167. </body>
  168. </html>
  169.