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

Line 1: Line 1:
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
−
   <style type="text/css">
+
<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="https://2015.igem.org/Template:Harvard_BioDesign/CSS_Footer?action=raw&ctype=text/css" />
  
−
     /*Set up height place holder for the footer*/
+
  <!--[if lt IE 7]>
−
    html,
+
     <style type="text/css">
−
    body {
+
       #wrapper { height:100%; }
−
       margin:0;
+
     </style>
−
      padding:0;
+
  <![endif]-->
−
      height:100%;
+
 
−
    }
+
</head>
−
    #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 {
+
−
      background-color: #000000;
+
−
      height: 70px;
+
−
            width:100%;
+
−
      text-align: left;
+
−
            margin-right: 0px;
+
−
            margin-left: 0px;
+
−
            padding-top: 0px;
+
−
            font-size: 45px;
+
−
            color: #ffffff;
+
−
            font-variant: small-caps;
+
−
      font-family:"Times New Roman";
+
−
            position:absolute;
+
−
            bottom:0px;
+
−
            vertical-align: text-top;
+
−
            font-weight: 50;
+
−
            font-stretch: ultra-condensed;
+
−
        }
+
  
−
        #facebook{
+
<body>
−
            position:absolute;
+
−
            right: 10%;
+
−
            top:0;
+
−
        }
+
−
        #twitter{
+
−
            position:absolute;
+
−
            right: 5%;
+
−
            top:0;
+
−
        }
+
−
        #email{
+
−
            position:absolute;
+
−
            right: 0;
+
−
            top:0;
+
−
        }
+
−
        #logo{
+
−
            position:absolute;
+
−
            float:right;
+
−
            bottom: 0px;
+
−
            right: 0px;
+
−
            width:100%;
+
−
        }
+
−
  </style>
+
−
     
+
−
    <div id="footerContainer">
+
−
            <div "col-xs-3 col-sm-2 col-lg-2">Sticoli</div>
+
−
                <div id="facebook" class="col-xs-3 col-sm-1 col-lg-1">
+
−
                    <a href="https://www.facebook.com/harvardigem2015" target="_blank">
+
−
                    <img src="https://static.igem.org/mediawiki/2015/e/ed/Harvard2015Facebookwhite.png"alt="Facebook Logo" style="width:68px;height:68px;"></a>
+
−
                </div>
+
  
−
                <div id="twitter" class="col-xs-3 col-sm-1 col-lg-1">
+
  <div id="wrapper">
−
                    <a href="https://twitter.com/HarvardiGEM2015" target="_blank">
+
−
                    <img src="https://static.igem.org/mediawiki/2015/6/64/Harvard2015Twitterlogowhite.png"alt="Twitter Logo" style="width:68px;height:68px;"></a>
+
−
                </div>
+
−
 
+
−
                <div id="email" class="col-xs-3 col-sm-1 col-lg-1">
+
−
                    <a href="mailto:harvardigem2015@gmail.com">
+
−
                    <img src="https://static.igem.org/mediawiki/2015/9/98/Harvard2015Emaillogowhite.png" alt="Email Logo" style="width:68px;height:68px;"></a>
+
−
                </div>
+
−
 
+
−
            <div id="logo">
+
−
                <img src="https://static.igem.org/mediawiki/2015/9/94/HarvardBioDesign2015Logo2.png"alt="Harvard Logo" style="width:317px;height:216px;">
+
−
            </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" />
+
     <div id="header">
−
 
+
     </div><!-- #header -->
−
     <!--[if lt IE 7]>
+
−
        <style type="text/css">
+
−
            #wrapper { height:100%; }
+
−
        </style>
+
−
    <![endif]-->
+
 
      
 
      
−
   </head>
+
    <div id="content">
 +
    </div><!-- #content -->
 +
   
 +
    <div id="footer">
 +
    </div><!-- #footer -->
 +
   
 +
  </div><!-- #wrapper -->
 +
    
 +
</body>
  
−
  <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:48, 9 July 2015

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