Template:MIT-header

From 2011.igem.org

(Difference between revisions)
m
Line 1: Line 1:
-
<html>
+
__NOTOC__<html lang="en">  
-
 
+
<head>
<style type="text/css">
<style type="text/css">
body {background: #FFFFFF;
body {background: #FFFFFF;
Line 34: Line 34:
background-color: white;
background-color: white;
}
}
 +
</style>
 +
<style>
 +
/* 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. */
 +
 +
.kwicks {
 +
/* recommended styles for kwicks ul container */
 +
list-style: none;
 +
position: relative;
 +
margin: 0px;
 +
padding: 0px;
 +
 +
margin-left:auto;
 +
margin-right:auto;
 +
padding-top:1px;
 +
padding-bottom:1px;
 +
}
 +
 +
.kwicks li{
 +
/* these are required, but the values are up to you (must be pixel) */
 +
width: 190px;
 +
height: 50px;
 +
 +
/*do not change these */
 +
display: block;
 +
overflow: hidden;
 +
padding: 0;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */
 +
margin:0;
 +
font-family:'century gothic','lucida sans unicode', sans-serif;
 +
}
 +
 +
 +
.kwicks.horizontal li {
 +
/* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
 +
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 {
 +
background-color: #828282;
 +
background-color: #616161;
 +
/* background-color: #53b388;*/
 +
}
 +
#kwick_1.active {
 +
background-color: #B3B3B3;
 +
background-color: #828282;
 +
}
 +
#kwick_2 {
 +
background-color: #5a69a9;
 +
background-color: #828282;
 +
background-color: #616161;
 +
}
 +
#kwick_2.active {
 +
background-color: #B3B3B3;
 +
background-color: #828282;
 +
}
 +
#kwick_3 {
 +
background-color: #c26468;
 +
background-color: #828282;
 +
background-color: #616161;
 +
}
 +
#kwick_3.active {
 +
background-color: #B3B3B3;
 +
background-color: #828282;
 +
}
 +
#kwick_4 {
 +
background-color: #bf7cc7;
 +
background-color: #828282;
 +
background-color: #616161;
 +
}
 +
#kwick_4.active {
 +
background-color: #B3B3B3;
 +
background-color: #828282;
 +
}
 +
#kwick_5 {
 +
background-color: #FFAD42;
 +
background-color: #828282;
 +
background-color: #616161;
 +
}
 +
#kwick_5.active {
 +
background-color: #B3B3B3;
 +
background-color: #828282;
 +
}
 +
 +
.kwicks.horizontal #kwick_5 {
 +
margin-right: none; /* cancel margin on last kiwck (if you set a margin above) */
 +
}
 +
.kwicks.vertical #kwick_5 {
 +
margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */
 +
}
 +
 +
.section {
 +
 +
color:white;
 +
font-weight:normal;
 +
border-right-style:solid;
 +
border-width:1px;
 +
width:185px;
 +
float:left;
 +
/* padding-top: 30px;*/
 +
padding-left:5px;
 +
text-transform:uppercase;
 +
font-size: 15px;
 +
letter-spacing:.2em;
 +
position:absolute;
 +
/* top:50%;
 +
height:4.5em;
 +
margin-top:-2.25em;*/
 +
text-align:center;
 +
 +
}
 +
 +
.section table, .section-links table {
 +
width: 100%;
 +
height: 50px;
 +
text-align: center;
 +
}
 +
 +
.section td, .section-links td {
 +
vertical-align: middle;
 +
}
 +
 +
.section-contain {
 +
position:relative;
 +
width:100%;height:100%;
 +
}
 +
 +
 +
.section-links {
 +
position:absolute;
 +
margin-left:195px;
 +
/* padding:5px;*/
 +
/* top:15%;*/
 +
 +
font-size:12px;
 +
color:white;
 +
width: 190px;
 +
text-align:center;
 +
}
</style>
</style>
-
</html>
+
 
 +
 
 +
 
 +
<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({
 +
min : 140,
 +
spacing : 2,
 +
sticky : false,
 +
defaultKwick : 0,
 +
});
 +
});
 +
</script>
 +
</head>
 +
<body>
 +
 
 +
 
 +
<div id="navigation">
 +
 
 +
<ul class="kwicks horizontal" >
 +
 +
<li id="kwick_1">
 +
<a href=#>
 +
    <div class="section">
 +
    <table><tr><td>Home</td></tr></table>
 +
</div></a>
 +
<a href=#>
 +
    <div class="section-contain">
 +
    <div class="section-links">
 +
    <table><tr><td>A brief introduction to iGEM</td></tr></table>
 +
</div>
 +
</div></a>
 +
</li>
 +
 +
<li id="kwick_2">
 +
<a href=#>
 +
    <div class="section">
 +
    <table><tr><td>Team</td></tr></table>
 +
</div></a>
 +
<a href=#>
 +
    <div class="section-contain">
 +
    <div class="section-links">
 +
    <table><tr><td>The people behind it all</td></tr></table>
 +
</div>
 +
</div></a>
 +
</li>
 +
 
 +
<li id="kwick_3">
 +
<a href=#>
 +
    <div class="section">
 +
    <table><tr><td>Project</td></tr></table>
 +
</div></a>
 +
<a href=#>
 +
    <div class="section-contain">
 +
    <div class="section-links">
 +
    <table><tr><td>Overview of project ideas and results</td></tr></table>
 +
</div>
 +
</div></a>
 +
</li>
 +
 
 +
<li id="kwick_4">
 +
<a href=#>
 +
    <div class="section"><table><tr><td>Notebook</td></tr></table>
 +
</div></a>
 +
<a href=#>
 +
    <div class="section-contain">
 +
    <div class="section-links">
 +
    <table><tr><td>Our day to day results</td></tr></table>
 +
</div>
 +
</div></a>
 +
</li>
 +
 
 +
<li id="kwick_5">
 +
<a href=#>
 +
    <div class="section"><table><tr><td>Beyond iGEM</td></tr></table>
 +
</div></a>
 +
<a href=#>
 +
    <div class="section-contain">
 +
    <div class="section-links">
 +
    <table><tr><td>Outreach; partners and sponsor information</td></tr></table>
 +
</div>
 +
</div></a>
 +
</li>
 +
 
 +
</ul>
 +
</div>
 +
 
 +
</body>

Revision as of 08:15, 12 July 2011

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