|
|
| (135 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: 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 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> |
| | + | </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">
| |
| - | <span style="width:100%; height:100%; top:0; left:0; z-index:1;"></span><!-- ie -->
| |
| - | <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/nocontent">
| |
| - | <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>Day to day progress</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>TOOLS</td></tr></table>
| |
| - | </div></a>
| |
| - | <a href="https://2011.igem.org/Team:MIT/nocontent">
| |
| - | <div class="section-description">
| |
| - | <table><tr><td>The secrets of our trade</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 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> |
"
