Template:MIT-header

From 2011.igem.org

(Difference between revisions)
Line 41: Line 41:
     background-color: white;  
     background-color: white;  
}
}
-
#menubar ul{
+
#menubar ul li a {  
-
     float:center;
+
     color: #999999; }
-
     width:100%;
+
    .right-menu li a {
-
     padding:0;
+
    color: black;
 +
    background-color: white;
 +
}
 +
</style>
 +
 
 +
<!-- kwicks style sheet -->
 +
<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: 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: 118px;
 +
    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;
     margin:0;
-
     list-style-type:none;
+
     font-family:'century gothic','lucida sans unicode', sans-serif;
}
}
-
a {
+
.kwicks.horizontal li {
-
     width:6em;
+
    /* 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 {
 +
}
 +
#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 {
 +
}
 +
#kwick_8.active {
 +
}
 +
 
 +
.kwicks.horizontal #kwick_7 {
 +
}
 +
.kwicks.vertical #kwick_7 {
 +
    margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */
 +
}
 +
 
 +
/*!--custom css for kwicks*/
 +
.section {
 +
    border:solid 1px #999;
 +
     width:130px;/*5px less than kwicks li width*/
 +
    float:left;
 +
    font-size: 14px;
 +
    letter-spacing:.15em;
 +
    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-description a, a:hover{
 +
    color: #333;
     text-decoration:none;
     text-decoration:none;
-
    color:black;
 
-
    background-color:white;
 
-
    padding:0.8em 1.5em;
 
-
    border-right:1px solid white;
 
}
}
-
a:hover {background-color:#ff3300;}
 
-
li {display:inline;}
 
 +
.section td, .section-description td {
 +
    vertical-align: middle;
 +
}
 +
.section-description {
 +
    margin-left:135px;
 +
}
 +
#navigation {
 +
    padding-left:5px;
 +
    padding-bottom:0px;
 +
    border-bottom:1px solid #999;
 +
}
</style>
</style>
 +
 +
<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>
</head>
<body>
<body>
-
<ul>
+
 
-
<li><a href="#">Link one</a></li>
+
<!-- I know the layout is stupid, but it was the easiest way to vertically center the description.-->
-
<li><a href="#">Link two</a></li>
+
<!-- You need the links nested in itself because IE sucks -->
-
<li><a href="#">Link three</a></li>
+
<!-- omg IE has a lot of quirks. Please don't question the links formatting. -->
-
<li><a href="#">Link four</a></li>
+
<div id="navigation">
 +
<ul class="kwicks horizontal" >
 +
<li id="kwick_1">
 +
<a href="https://2011.igem.org/Team:MIT">
 +
  <div class="section">
 +
    <table><a href="https://2011.igem.org/Team:MIT"><tr><td>HOME</td></tr></a></table>
 +
  </div>
 +
</a>
 +
<a href="https://2011.igem.org/Team:MIT">
 +
  <div class="section-description">
 +
    <table>
 +
      <tr>     
 +
        <td><a href="https://2011.igem.org/Team:MIT">Tissues by Design</a></td>
 +
      </tr>
 +
    </table>
 +
  </div>
 +
</a>
 +
</li>
 +
 +
<li id="kwick_2">
 +
<a href="https://2011.igem.org/Team:MIT/Team/Undergraduates">
 +
  <div class="section">
 +
    <table>
 +
      <a href="https://2011.igem.org/Team:MIT/Team/Undergraduates">
 +
        <tr><td>TEAM</td></tr>
 +
      </a>
 +
    </table>
 +
  </div>
 +
</a>
 +
<a href="https://2011.igem.org/Team:MIT/Team/Undergraduates">
 +
  <div class="section-description">
 +
    <table>
 +
      <tr>
 +
        <td><a href="https://2011.igem.org/Team:MIT/Team/Undergraduates">The people behind it all</a></td>
 +
      </tr>
 +
    </table>
 +
  </div>
 +
</a>
 +
</li>
 +
 
 +
<li id="kwick_3">
 +
<a href="https://2011.igem.org/Team:MIT/Project/">
 +
  <div class="section">
 +
    <table>
 +
      <a href="https://2011.igem.org/Team:MIT/Project/">
 +
        <tr><td>PROJECT</td></tr>
 +
      </a>
 +
    </table>
 +
  </div>
 +
</a>
 +
<a href="https://2011.igem.org/Team:MIT/Project/">
 +
  <div class="section-description">
 +
    <table>
 +
      <tr>
 +
        <td><a href="https://2011.igem.org/Team:MIT/Project/">Overview of project ideas</a></td>
 +
      </tr>
 +
    </table>
 +
  </div>
 +
</a>
 +
</li>
 +
 
 +
<li id="kwick_4">
 +
<a href="https://2011.igem.org/Team:MIT/Results/">
 +
  <div class="section">
 +
    <table>
 +
      <a href="https://2011.igem.org/Team:MIT/Results/">
 +
        <tr><td>RESULTS</td></tr>
 +
      </a>
 +
    </table>
 +
  </div>
 +
</a>
 +
<a href="https://2011.igem.org/Team:MIT/Results/">
 +
  <div class="section-description">
 +
    <table>
 +
      <tr>
 +
        <td><a href="https://2011.igem.org/Team:MIT/Results/">Overall results</a></td>
 +
      </tr>
 +
    </table>
 +
  </div>
 +
</a>
 +
</li>
 +
 
 +
 
 +
<li id="kwick_5">
 +
<a href="https://2011.igem.org/Team:MIT/Notebook/">
 +
  <div class="section">
 +
    <table>
 +
      <a href="https://2011.igem.org/Team:MIT/Notebook/">
 +
        <tr><td>NOTEBOOK</td></tr>
 +
      </a>
 +
    </table>
 +
  </div>
 +
</a>
 +
<a href="https://2011.igem.org/Team:MIT/Notebook/">
 +
  <div class="section-description">
 +
    <table>
 +
      <tr>
 +
        <td><a href="https://2011.igem.org/Team:MIT/Notebook/">Daily Progress</a></td>
 +
      </tr>
 +
    </table>
 +
  </div>
 +
</a>
 +
</li>
 +
 
 +
<li id="kwick_6">
 +
<a href="https://2011.igem.org/Team:MIT/Tools/">
 +
  <div class="section">
 +
    <table>
 +
      <a href="https://2011.igem.org/Team:MIT/Tools/">
 +
        <tr><td>TOOLS</td></tr>
 +
      </a>
 +
    </table>
 +
  </div>
 +
</a>
 +
<a href="https://2011.igem.org/Team:MIT/Tools/">
 +
  <div class="section-description">
 +
    <table>
 +
      <tr>
 +
        <td><a href="https://2011.igem.org/Team:MIT/Tools/">Modeling and Assembly</a></td>
 +
      </tr>
 +
    </table>
 +
  </div>
 +
</a>
 +
</li>
 +
 
 +
<li id="kwick_7">
 +
<a href="https://2011.igem.org/Team:MIT/Partners/">
 +
  <div class="section">
 +
    <table>
 +
      <a href="https://2011.igem.org/Team:MIT/Partners/">
 +
        <tr><td>PARTNERS</td></tr>
 +
      </a>
 +
    </table>
 +
  </div>
 +
</a>
 +
<a href="https://2011.igem.org/Team:MIT/Partners/">
 +
  <div class="section-description">
 +
    <table>
 +
      <tr>
 +
        <td><a href="https://2011.igem.org/Team:MIT/Partners/">Outreach and sponsor information</a></td>
 +
      </tr>
 +
    </table>
 +
  </div>
 +
</a>
 +
</li>
 +
 
 +
<li id="kwick_8">
 +
<a href="https://2011.igem.org/Team:MIT/HumanPractices/">
 +
  <div class="section">
 +
    <table>
 +
      <a href="https://2011.igem.org/Team:MIT/HumanPractices/">
 +
        <tr><td>HUMAN PRACTICES</td></tr>
 +
      </a>
 +
    </table>
 +
  </div>
 +
</a>
 +
<a href="https://2011.igem.org/Team:MIT/HumanPractices/">
 +
  <div class="section-description">
 +
    <table>
 +
      <tr>
 +
        <td><a href="https://2011.igem.org/Team:MIT/HumanPractices/">Social considerations</a></td>
 +
      </tr>
 +
    </table>
 +
  </div>
 +
</a>
 +
</li>
 +
 
 +
 
</ul>
</ul>
 +
</div>
 +
</body>
</body>

Revision as of 22:08, 24 October 2011

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