|
|
(127 intermediate revisions not shown) |
Line 25: |
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 31: |
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 47: |
Line 51: |
| background-color: white; | | 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;
| + | #navbar |
- | margin-right:auto;
| + | ul.navbar { |
| + | float:left; |
| + | width:100%; |
| + | padding:0; |
| + | margin:0; |
| + | list-style-type:none; |
| } | | } |
- | .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 {
| |
- | 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 { | + | .navbar { |
- | color: #333;
| + | padding:0 20px; |
- | 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> | | </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.-->
| |
- | <!-- 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">A brief introduction to iGEM</a></td>
| |
- | </tr>
| |
- | </table>
| |
- | </div>
| |
- | </a>
| |
- | </li>
| |
- |
| |
- | <li id="kwick_2">
| |
- | <a href="https://2011.igem.org/Team:MIT/nocontent">
| |
- | <div class="section">
| |
- | <table>
| |
- | <a href="https://2011.igem.org/Team:MIT/nocontent">
| |
- | <tr><td>RESULTS</td></tr>
| |
- | </a>
| |
- | </table>
| |
- | </div>
| |
- | </a>
| |
- | <a href="https://2011.igem.org/Team:MIT/nocontent">
| |
- | <div class="section-description">
| |
- | <table>
| |
- | <tr>
| |
- | <td><a href="https://2011.igem.org/Team:MIT/nocontent">Overall results</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/nocontent">
| |
- | <div class="section">
| |
- | <table>
| |
- | <a href="https://2011.igem.org/Team:MIT/nocontent">
| |
- | <tr><td>NOTEBOOK</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/nocontent">Day to day progress</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_6">
| |
- | <a href="https://2011.igem.org/Team:MIT/nocontent">
| |
- | <div class="section">
| |
- | <table>
| |
- | <a href="https://2011.igem.org/Team:MIT/nocontent">
| |
- | <tr><td>TOOLS</td></tr>
| |
- | </a>
| |
- | </table>
| |
- | </div>
| |
- | </a>
| |
- | <a href="https://2011.igem.org/Team:MIT/nocontent">
| |
- | <div class="section-description">
| |
- | <table>
| |
- | <tr>
| |
- | <td><a href="https://2011.igem.org/Team:MIT/nocontent">The secrets of our trade</a></td>
| |
- | </tr>
| |
- | </table>
| |
- | </div>
| |
- | </a>
| |
- | </li>
| |
- |
| |
- | <li id="kwick_7">
| |
- | <a href="https://2011.igem.org/Team:MIT/nocontent">
| |
- | <div class="section">
| |
- | <table>
| |
- | <a href="https://2011.igem.org/Team:MIT/nocontent">
| |
- | <tr><td>PARTNERS</td></tr>
| |
- | </a>
| |
- | </table>
| |
- | </div>
| |
- | </a>
| |
- | <a href="https://2011.igem.org/Team:MIT/nocontent">
| |
- | <div class="section-description">
| |
- | <table>
| |
- | <tr>
| |
- | <td><a href="https://2011.igem.org/Team:MIT/nocontent">Outreach and sponsor information</a></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> |