Template:MIT-header

From 2011.igem.org

(Difference between revisions)
 
(156 intermediate revisions not shown)
Line 1: Line 1:
__NOTOC__<html lang="en">  
__NOTOC__<html lang="en">  
 +
<head>
<head>
 +
<!-- wiki hacks -->
<style type="text/css">
<style type="text/css">
-
body {background: #FFFFFF;
+
#globalwrapper {
-
      background-image: url('https://static.igem.org/mediawiki/2011/c/cb/Bg1.jpg');
+
    width:975px;
-
      background-position: center;
+
    padding:20px 0px;
-
      background-repeat: repeat-y;
+
    margin: 0 auto;
 +
    background-color:#ffffff;
 +
    height:100%;
}
}
-
 
+
.firstHeading {
-
#p-logo {height:1px; overflow:hidden; display: none;}
+
    height:0px;
-
 
+
    visibility:hidden;
-
#top-section {
+
-
        background-image: url('https://static.igem.org/mediawiki/2011/7/7f/MIT-header.jpg');
+
-
        background-position: top;
+
-
height:200px ;
+
-
        background-repeat: no-repeat;
+
-
        border-left-width:0px;
+
-
        border-right-width:0px;
+
-
        border-bottom-width:0px;
+
}
}
-
 
+
body {
-
#content {
+
    background: #E8E8E8;
-
        border-left-width:0px;
+
    background-image: url('https://static.igem.org/mediawiki/2011/b/be/Background-gradient.jpg');
-
        border-right-width:0px;
+
    background-position: center;
 +
    background-repeat: repeat-y;
}
}
-
 
+
#p-logo {
-
#menubar { background-color: white; }
+
    height:1px; overflow:hidden; display: none;
-
 
+
-
 
+
-
#menubar ul li a { color: black; }
+
-
 
+
-
 
+
-
.right-menu li a {
+
-
color: black;
+
-
background-color: white;
+
}
}
-
</style>
+
#top-section {
-
 
+
   
-
 
+
    background-image: url('https://static.igem.org/mediawiki/2011/7/7f/MIT-header.jpg');
-
<style>
+
    background-position: top;
-
/* 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. */
+
    height:200px ;
-
 
+
    background-repeat: no-repeat;
-
.kwicks {
+
    border-width:0px;
-
/* recommended styles for kwicks ul container */
+
    border-top-width:1px;
-
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 */
+
#content {
-
display: block;
+
    border-left-width:0px;
-
overflow: hidden;
+
    border-right-width:0px;
-
padding: 0; /* if you need padding, do so with an inner div (or implement your own box-model hack) */
+
    padding:5px;
-
margin:0;
+
    width:965px;
-
font-family:'century gothic','lucida sans unicode', sans-serif;
+
}
}
-
 
+
#menubar {  
-
 
+
    background-color: white;  
-
.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{
+
#menubar ul li a {  
-
/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
+
    color: #999999; }
-
margin-bottom: 5px; /*Set to same as spacing option. */
+
    .right-menu li a {
 +
    color: black;
 +
    background-color: white;
}
}
-
 
+
#navbar
-
#kwick_1 {
+
ul.navbar {
-
background-color: #828282;
+
float:left;
-
background-color: #616161;
+
width:100%;
-
/* background-color: #53b388;*/
+
padding:0;
-
}
+
margin:0;
-
#kwick_1.active {
+
list-style-type:none;
-
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 {
+
ul.navbar a {
-
margin-right: none; /* cancel margin on last kiwck (if you set a margin above) */
+
float:left;
 +
text-align:center;
 +
width:7em;
 +
text-decoration:none;
 +
color:white;
 +
background-color:#1A2B32;
 +
padding:0.2em 0.6em;
 +
border-right:1px solid white;
}
}
-
.kwicks.vertical #kwick_5 {
+
ul.navbar a:hover {background-color:#A3ABAE;}
-
margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */
+
ul.navbar li {display:inline;}
-
}
+
-
 
+
-
.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;
+
 +
#long {
 +
width:10em;
}
}
-
.section table, .section-links table {
 
-
        color: white;
 
-
width: 100%;
 
-
height: 50px;
 
-
text-align: center;
 
-
        background-color: #616161;
 
-
}
 
-
 
-
.section table:hover, .section-links table:hover {
 
-
        color: white;
 
-
        background-color: #828282;
 
 +
.navbar {
 +
padding:0 20px;
}
}
-
.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>
 +
</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({
 
-
min : 140,
 
-
spacing : 2,
 
-
sticky : false,
 
-
defaultKwick : 0,
 
-
});
 
-
});
 
-
</script>
 
-
</head>
 
<body>
<body>
-
<div id="navigation">
+
<!--navigation menu-->
-
 
+
<ul class="navbar">
-
<ul class="kwicks horizontal" >
+
<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 id="kwick_1">
+
<li><a href="https://2011.igem.org/Team:MIT/Results/">DATA</a></li>
-
<a href="https://2011.igem.org/Team:MIT">
+
<li><a href="https://2011.igem.org/Team:MIT/Notebook/">NOTEBOOK</a></li>
-
    <div class="section">
+
<li><a href="https://2011.igem.org/Team:MIT/Tools/">MODEL</a></li>
-
    <table><tr><td>Home</td></tr></table>
+
<li><a href="https://2011.igem.org/Team:MIT/Partners/">PARTNERS</a></li>
-
</div></a>
+
<li><a href="https://2011.igem.org/Team:MIT/Team/Undergraduates">TEAM</a></li>
-
<a href="https://2011.igem.org/Team:MIT">
+
<li><a id="long" href="https://2011.igem.org/Team:MIT/HumanPractices/">HUMAN PRACTICES</a></li>
-
    <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="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-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="https://2011.igem.org/Team:MIT/nocontent">
+
-
    <div class="section">
+
-
    <table><tr><td>Project</td></tr></table>
+
-
</div></a>
+
-
<a href="https://2011.igem.org/Team:MIT/nocontent">
+
-
    <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="https://2011.igem.org/Team:MIT/nocontent">
+
-
    <div class="section"><table><tr><td>Notebook</td></tr></table>
+
-
</div></a>
+
-
<a href="https://2011.igem.org/Team:MIT/nocontent">
+
-
    <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="https://2011.igem.org/Team:MIT/nocontent">
+
-
    <div class="section"><table><tr><td>Beyond iGEM</td></tr></table>
+
-
</div></a>
+
-
<a href="https://2011.igem.org/Team:MIT/nocontent">
+
-
    <div class="section-contain">
+
-
    <div class="section-links">
+
-
    <table><tr><td>Outreach; partners and sponsor information</td></tr></table>
+
-
</div>
+
-
</div></a>
+
-
</li>
+
-
 
+
</ul>
</ul>
-
</div>
 
</body>
</body>
 +
</html>

Latest revision as of 02:28, 29 October 2011