Template:MIT-header

From 2011.igem.org

(Difference between revisions)
 
(143 intermediate revisions not shown)
Line 1: Line 1:
__NOTOC__<html lang="en">  
__NOTOC__<html lang="en">  
 +
<head>
<head>
<!-- wiki hacks -->
<!-- wiki hacks -->
Line 24: Line 25:
}
}
#top-section {
#top-section {
 +
   
     background-image: url('https://static.igem.org/mediawiki/2011/7/7f/MIT-header.jpg');
     background-image: url('https://static.igem.org/mediawiki/2011/7/7f/MIT-header.jpg');
     background-position: top;
     background-position: top;
Line 30: Line 32:
     border-width:0px;
     border-width:0px;
     border-top-width:1px;
     border-top-width:1px;
 +
}
}
 +
 +
#content {
#content {
     border-left-width:0px;
     border-left-width:0px;
Line 46: Line 51:
     background-color: white;
     background-color: white;
}
}
-
</style>
 
-
<!-- kwicks style sheet -->
+
#navbar
-
<style>
+
ul.navbar {
-
/* This css file serves as a template for styling your kwicks.  Feel free to modify, but please make note of the comments - some of them are important. */
+
float:left;
-
.kwicks {
+
width:100%;
-
    /* recommended styles for kwicks ul container */
+
padding:0;
-
    list-style: none;
+
margin:0;
-
    position: relative;
+
list-style-type:none;
-
    margin: 0px;
+
-
    padding: 1px 0px;
+
-
 
+
-
    margin-left:auto;
+
-
    margin-right:auto;
+
}
}
-
.kwicks ul{
 
-
    margin:0px;
 
-
}
 
-
.kwicks li{
 
-
    /* these are required, but the values are up to you (must be pixel) */
 
-
    width: 135px;
 
-
    height: 50px;
 
-
    /*do not change these */
+
ul.navbar a {
-
    display: block;
+
float:left;
-
    overflow: hidden;
+
text-align:center;
-
    padding: 0; /* if you need padding, do so with an inner div (or implement your own box-model hack) */
+
width:7em;
-
    margin:0;
+
text-decoration:none;
-
    font-family:'century gothic','lucida sans unicode', sans-serif;
+
color:white;
-
}
+
background-color:#1A2B32;
-
.kwicks.horizontal li {
+
padding:0.2em 0.6em;
-
    /* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
+
border-right:1px solid white;
-
    margin-right: 5px; /*Set to same as spacing option. */
+
-
    float: left;
+
-
}
+
-
.kwicks.vertical  li{
+
-
    /* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
+
-
    margin-bottom: 5px; /*Set to same as spacing option. */
+
-
}
+
-
#kwick_1 {
+
-
}
+
-
#kwick_1.active {
+
-
    }
+
-
#kwick_2 {
+
-
}
+
-
#kwick_2.active {
+
-
}
+
-
#kwick_3 {
+
-
}
+
-
#kwick_3.active {
+
-
}
+
-
#kwick_4 {
+
-
}
+
-
#kwick_4.active {
+
-
}
+
-
#kwick_5 {
+
-
}
+
-
#kwick_5.active {
+
-
}
+
-
#kwick_6 {
+
-
}
+
-
#kwick_6.active {
+
-
}
+
-
#kwick_7 {
+
-
}
+
-
#kwick_7.active {
+
}
}
 +
ul.navbar a:hover {background-color:#A3ABAE;}
 +
ul.navbar li {display:inline;}
-
.kwicks.horizontal #kwick_7 {
+
#long {
-
}
+
width:10em;
-
.kwicks.vertical #kwick_7 {
+
-
    margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */
+
}
}
-
/*!--custom css for kwicks*/
+
 
-
.section {
+
.navbar {
-
    border:solid 1px #999;
+
padding:0 20px;
-
    width:130px;/*5px less than kwicks li width*/
+
-
    float:left;
+
-
    font-size: 16px;
+
-
    letter-spacing:.05em;
+
-
    position:absolute;
+
-
}
+
-
.section table {
+
-
background-color: #4D4D4D;
+
-
}
+
-
.section table, .section-description table {
+
-
    color: #fff;
+
-
    width: 100%;
+
-
    height: 49px;
+
-
    text-align: center;
+
}
}
-
.section-description table {
 
-
color: #333;
 
-
font-size:12px;
 
-
}
 
-
.section td, .section-description td {
 
-
    vertical-align: middle;
 
-
}
 
-
.section-description {
 
-
    margin-left:145px;
 
-
}
 
-
#navigation {
 
-
    padding-left:5px;
 
-
    padding-bottom:0px;
 
-
    border-bottom:1px solid #999;
 
-
}
 
</style>
</style>
 +
</head>
-
<script src="https://2011.igem.org/Team:MIT/js/kwicks?action=raw&ctype=text/javascript" type="text/javascript" />
 
-
<script> google.load("jquery", "1.2.6"); </script>
 
-
    <script type="text/javascript">
 
-
        $().ready(function() {
 
-
    $('.kwicks').kwicks({
 
-
                max : 300,
 
-
                spacing : 2,
 
-
                sticky : false,
 
-
                defaultKwick : 0,
 
-
                duration: 200,
 
-
              });
 
-
        });
 
-
    </script>
 
-
</head>
 
<body>
<body>
-
<!-- I know the layout is stupid, but it was the easiest way to vertically center the description.-->
 
-
<div id="navigation">
 
-
<ul class="kwicks horizontal" >
 
-
<li id="kwick_1">
 
-
<a href="https://2011.igem.org/Team:MIT">
 
-
    <div class="section">
 
-
    <table><tr><td>HOME</td></tr></table>
 
-
</div></a>
 
-
<a href="https://2011.igem.org/Team:MIT">
 
-
    <div class="section-description">
 
-
    <table><tr><td>A brief introduction to iGEM</td></tr></table>
 
-
</div></a>
 
-
</li>
 
-
 
-
<li id="kwick_2">
 
-
<a href="https://2011.igem.org/Team:MIT/Team/Undergraduates">
 
-
    <div class="section">
 
-
    <table><tr><td>TEAM</td></tr></table>
 
-
</div></a>
 
-
<a href="https://2011.igem.org/Team:MIT/Team/Undergraduates">
 
-
    <div class="section-description">
 
-
    <table><tr><td>The people behind it all</td></tr></table>
 
-
</div></a>
 
-
</li>
 
-
 
-
<li id="kwick_3">
 
-
<a href="https://2011.igem.org/Team:MIT/Project/">
 
-
    <div class="section">
 
-
    <table><tr><td>PROJECT</td></tr></table>
 
-
</div></a>
 
-
<a href="https://2011.igem.org/Team:MIT/Project/">
 
-
    <div class="section-description">
 
-
    <table><tr><td>Overview of project ideas</td></tr></table>
 
-
</div></a>
 
-
</li>
 
-
 
-
<li id="kwick_4">
 
-
<a href="https://2011.igem.org/Team:MIT/Project/">
 
-
    <div class="section">
 
-
    <table><tr><td>NOTEBOOK</td></tr></table>
 
-
</div></a>
 
-
<a href="https://2011.igem.org/Team:MIT/Project/">
 
-
    <div class="section-description">
 
-
    <table><tr><td>Overview of project ideas</td></tr></table>
 
-
</div></a>
 
-
</li>
 
-
 
-
<li id="kwick_5">
 
-
<a href="https://2011.igem.org/Team:MIT/nocontent">
 
-
    <div class="section">
 
-
    <table><tr><td>RESULTS</td></tr></table>
 
-
</div></a>
 
-
<a href="https://2011.igem.org/Team:MIT/nocontent">
 
-
    <div class="section-description">
 
-
    <table><tr><td>Overall results</td></tr></table>
 
-
</div></a>
 
-
</li>
 
-
 
-
<li id="kwick_6">
 
-
<a href="https://2011.igem.org/Team:MIT/nocontent">
 
-
    <div class="section">
 
-
    <table><tr><td>SAFETY</td></tr></table>
 
-
</div></a>
 
-
<a href="https://2011.igem.org/Team:MIT/nocontent">
 
-
    <div class="section-description">
 
-
    <table><tr><td>Our safety practices</td></tr></table>
 
-
</div></a>
 
-
</li>
 
-
 
-
<li id="kwick_7">
 
-
<a href="https://2011.igem.org/Team:MIT/nocontent">
 
-
    <div class="section">
 
-
    <table><tr><td>PARTNERS</td></tr></table>
 
-
</div></a>
 
-
<a href="https://2011.igem.org/Team:MIT/nocontent">
 
-
    <div class="section-description">
 
-
    <table><tr><td>Outreach; partners and sponsor information</td></tr></table>
 
-
</div></a>
 
-
</li>
 
 +
<!--navigation menu-->
 +
<ul class="navbar">
 +
<li><a href="https://2011.igem.org/Team:MIT">HOME</a></li>
 +
<li><a href="https://2011.igem.org/Team:MIT/Project/">PROJECT</a></li>
 +
<li><a href="https://2011.igem.org/Team:MIT/Results/">DATA</a></li>
 +
<li><a href="https://2011.igem.org/Team:MIT/Notebook/">NOTEBOOK</a></li>
 +
<li><a href="https://2011.igem.org/Team:MIT/Tools/">MODEL</a></li>
 +
<li><a href="https://2011.igem.org/Team:MIT/Partners/">PARTNERS</a></li>
 +
<li><a href="https://2011.igem.org/Team:MIT/Team/Undergraduates">TEAM</a></li>
 +
<li><a id="long" href="https://2011.igem.org/Team:MIT/HumanPractices/">HUMAN PRACTICES</a></li>
</ul>
</ul>
-
</div>
 
</body>
</body>
 +
</html>

Latest revision as of 02:28, 29 October 2011

Retrieved from "http://2011.igem.org/Template:MIT-header"