|
|
| Line 48: |
Line 48: |
| | } | | } |
| | </style> | | </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;
| |
| - | 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 {
| |
| - | }
| |
| - | #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;
| |
| - | }
| |
| - |
| |
| - | .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>
| |
| - |
| |
| - | <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> |
| - |
| |
| - | <!-- I know the layout is stupid, but it was the easiest way to vertically center the description.-->
| |
| - | <!-- You need the links nested in itself because IE sucks -->
| |
| - | <!-- omg IE has a lot of quirks. Please don't question the links formatting. -->
| |
| - | <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>
| |
| - | </div>
| |
| | | | |
| | </body> | | </body> |
"
