Difference between revisions of "Template:Team:Harvard BioDesign/Templates:footer"

Line 1: Line 1:
−
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 
   <style type="text/css">
 
   <style type="text/css">
  
 
     /*Set up height place holder for the footer*/
 
     /*Set up height place holder for the footer*/
 +
    html,
 +
    body {
 +
      margin:0;
 +
      padding:0;
 +
      height:100%;
 +
    }
 +
    #wrapper {
 +
      min-height:100%;
 +
      position:relative;
 +
    }
 +
    #header {
 +
      background:#ededed;
 +
      padding:10px;
 +
    }
 +
    #content {
 +
      padding-bottom:100px; /* Height of the footer element */
 +
    }
 +
    #footer {
 +
      background:#ffab62;
 +
      width:100%;
 +
      height:100px;
 +
      position:absolute;
 +
      bottom:0;
 +
      left:0;
 +
    }
 
     #footerContainer {
 
     #footerContainer {
 
       background-color: #000000;
 
       background-color: #000000;
Line 66: Line 91:
 
                 <img src="https://static.igem.org/mediawiki/2015/9/94/HarvardBioDesign2015Logo2.png"alt="Harvard Logo" style="width:317px;height:216px;">
 
                 <img src="https://static.igem.org/mediawiki/2015/9/94/HarvardBioDesign2015Logo2.png"alt="Harvard Logo" style="width:317px;height:216px;">
 
             </div>
 
             </div>
−
     </div>      
+
     </div>
 +
  <head>
 +
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
    <title>How To Keep Your Footer At The Bottom of The Page - CSSReset.com</title>
 +
   
 +
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 +
 
 +
    <!--[if lt IE 7]>
 +
        <style type="text/css">
 +
            #wrapper { height:100%; }
 +
        </style>
 +
    <![endif]-->
 +
   
 +
  </head>
 +
 
 +
  <body>
 +
 
 +
    <div id="wrapper">
 +
       
 +
        <div id="header">
 +
        </div><!-- #header -->
 +
       
 +
        <div id="content">
 +
        </div><!-- #content -->
 +
       
 +
        <div id="footer">
 +
        </div><!-- #footer -->
 +
       
 +
    </div><!-- #wrapper -->
 +
   
 +
</body>     
 
</html>
 
</html>

Revision as of 14:40, 9 July 2015

Sticoli
How To Keep Your Footer At The Bottom of The Page - CSSReset.com