|
|
(10 intermediate revisions not shown) |
Line 24: |
Line 24: |
| | | |
| </script> | | </script> |
| + | <script type="text/javascript"> |
| + | new Control.Tabs('tabs_example_three',{ |
| + | hover: true |
| + | }); |
| + | </script> |
| + | |
| + | |
| + | |
| + | |
| <script type="text/javascript"> | | <script type="text/javascript"> |
| //Constants containing the menu cell positions (yeah, they're deffined as variables thx to IE) | | //Constants containing the menu cell positions (yeah, they're deffined as variables thx to IE) |
Line 224: |
Line 233: |
| ***********************************/ | | ***********************************/ |
| | | |
- | div#top-section{
| |
- | position: relative;
| |
- | width: 1000px;
| |
- | height: 21px;
| |
- | margin: 0 auto;
| |
- | border: none;
| |
- | z-index: 0;
| |
- | background-color: transparent;
| |
- | color: #FF0000;
| |
- | font-size:85%;
| |
- | font-family: "Maiandra GD", Garamond, "Tempus Sans ITC", Papyrus, "Kristen ITC",
| |
- | "Segoe Print", "Comic Sans MS", Verdana, sans-serif;
| |
- | }
| |
- | div#p-logo{
| |
- | display: none;
| |
- | width: 1000px;
| |
- | z-index: 1;
| |
- | }
| |
- | div#menubar{
| |
- | position: absolute;
| |
- | width: 400px;
| |
- | height: 21px;
| |
- | z-index: 5;
| |
- | top:22px;
| |
- | margin-top: -20px;
| |
- | }
| |
- | #menubar ul{
| |
- | margin: 0px 10px 0px 10px;
| |
- | padding: 0px 0px 0px 0px;
| |
- | }
| |
- | #menubar li{
| |
- | display: inline;
| |
- | }
| |
- | div.left-menu{
| |
- | text-align: left;
| |
- | }
| |
- | div.right-menu{
| |
- | text-align: right;
| |
- | right: 0px;
| |
- | }
| |
- | div#search-controls{
| |
- | display: none;
| |
- | }
| |
- | #menubar a{
| |
- | text-decoration:none;
| |
- | color:#C0C0C0;
| |
- | }
| |
- | #menubar a:visited {
| |
- | color:#9A8A5E;
| |
- | }
| |
- |
| |
- |
| |
- | /************************************
| |
- | Menu layout instructions
| |
- | ************************************/
| |
- |
| |
- | table#menuTable {
| |
- | width:1000px;
| |
- | margin: 0px 0px 0px 0px;
| |
- | border: none;
| |
- | border-collapse: collapse;
| |
- | color: black;
| |
- | }
| |
- | tr#menuCategories {
| |
- | height:30px;
| |
- | text-align: center;
| |
- | }
| |
- | tr#menuLinks {
| |
- | height:98px;
| |
- | text-align: left;
| |
- | }
| |
- | tr#menuMargin {
| |
- | heigth:3px;
| |
- | }
| |
- | td.alpha_cell, td.zeta_cell{
| |
- | width:16.66%; /* 1000px * 0.1666 = 166px */
| |
- | }
| |
- | td.beta_cell, td.gamma_cell, td.delta_cell, td.epsilon_cell{
| |
- | width:16.67%;
| |
- | }
| |
- | tr#menuCategories td.odd_cell{
| |
- | background-color:#6b6b6b;
| |
- | background-image: url("https://static.igem.org/mediawiki/2011/9/95/Darkgrey_cardboard_332x196_UGM.png");
| |
- | background-position:center;
| |
- | }
| |
- | tr#menuCategories td.even_cell{
| |
- | background-color:#7B6F48;
| |
- | background-image: url("https://static.igem.org/mediawiki/2011/a/ae/Burnt_cardboard_332x196_UGM.png");
| |
- | }
| |
- | tr#menuLinks td.odd_cell{
| |
- | background-color:#9f9f9f;
| |
- | background-image: url("https://static.igem.org/mediawiki/2011/e/e6/Stained_grey_cardboard_332x196_UGM.png");
| |
- | }
| |
- | tr#menuLinks td.even_cell{
| |
- | background-color:#AD9E72;
| |
- | background-image: url("https://static.igem.org/mediawiki/2011/6/66/Cardboard_332x196_UGM.png");
| |
- | }
| |
- | tr#menuMargin td.odd_cell{
| |
- | background-color:#6b6b6b;
| |
- | background-image: url("https://static.igem.org/mediawiki/2011/9/95/Darkgrey_cardboard_332x196_UGM.png");
| |
- | background-position: center;
| |
- | }
| |
- | tr#menuMargin td.even_cell{
| |
- | background-color:#7B6F48;
| |
- | background-image: url("https://static.igem.org/mediawiki/2011/a/ae/Burnt_cardboard_332x196_UGM.png");
| |
- | }
| |
- | table#menuTable tr#menuLinks td ul{
| |
- | line-height: 1.2em;
| |
- | list-style-position: outside;
| |
- | list-style-type: none;
| |
- | list-style-image: none;
| |
- | margin: 10px 0px 10px 0px;
| |
- | padding: 0px 0px 0px 20px;
| |
- | }
| |
- | table#menuTable td.odd_cell a{
| |
- | text-decoration: none;
| |
- | color: #343434; /*Dark grey*/
| |
- | }
| |
- | table#menuTable td.even_cell a{
| |
- | text-decoration: none;
| |
- | color: #322914; /*Dark brown*/
| |
- | }
| |
| | | |
| /******************************* | | /******************************* |
Line 415: |
Line 302: |
| color: white; | | color: white; |
| } | | } |
| + | .tabbed_images { |
| + | list-style:none; |
| + | margin:0; |
| + | padding:0; |
| + | clear:both; |
| + | } |
| + | |
| + | .tabbed_images li { |
| + | list-style:none; |
| + | float:left; |
| + | margin:0; |
| + | padding:0; |
| + | } |
| + | |
| + | .tabbed_images li a { |
| + | border:1px solid #ccc; |
| + | display:block; |
| + | float:left; |
| + | margin:0 10px 0 0; |
| + | } |
| + | |
| + | .tabbed_images li a.active, |
| + | .tabbed_images li a:hover { |
| + | border:1px solid #333; |
| + | } |
| + | |
| + | .tabbed_images li a img { |
| + | border:none; |
| + | padding:2px; |
| + | margin:0; |
| + | margin-bottom:-5px; |
| + | } |
| | | |
| + | #image_1, |
| + | #image_2, |
| + | #image_3, |
| + | #image_4, |
| + | #image_5 { |
| + | margin-top:10px; |
| + | padding:2px; |
| + | border:1px solid #ccc; |
| </style> | | </style> |
| </head> | | </head> |
| | | |
| <body> | | <body> |
- | <!--BEG Menu Table code-->
| + | <ul class="tabbed_images" id="tabs_example_three"> |
- | <table id="menuTable">
| + | <li><a href="#image_1"><img src="/stylesheets/sample_images/tabs_example_1_small.jpg"/></a></li> |
- | <tr id="menuCategories">
| + | <li><a href="#image_2"><img src="/stylesheets/sample_images/tabs_example_2_small.jpg"/></a></li> |
- | <td class="odd_cell alpha_cell" id="catalpha"
| + | <li><a href="#image_3"><img src="/stylesheets/sample_images/tabs_example_3_small.jpg"/></a></li> |
- | onMouseOver="LightenMenu(this);return true" onMouseOut="DarkenMenu(this);return true;">
| + | <li><a href="#image_4"><img src="/stylesheets/sample_images/tabs_example_4_small.jpg"/></a></li> |
- | Alfa
| + | </ul> |
- | </td>
| + | <img src="/stylesheets/sample_images/tabs_example_1_big.jpg" id="image_1"/> |
- | <td class="even_cell beta_cell" id="catbeta"
| + | <img src="/stylesheets/sample_images/tabs_example_2_big.jpg" id="image_2"/> |
- | onMouseOver="LightenMenu(this);return true;" onMouseOut="DarkenMenu(this);return true;">
| + | <img src="/stylesheets/sample_images/tabs_example_3_big.jpg" id="image_3"/> |
- | Beta
| + | <img src="/stylesheets/sample_images/tabs_example_4_big.jpg" id="image_4"/> <!--BEG Menu Table code--> |
- | </td>
| + | |
- | <td class="odd_cell gamma_cell" id="catgamma"
| + | |
- | onMouseOver="LightenMenu(this);return true;" onMouseOut="DarkenMenu(this);return true;">
| + | |
- | Gamma
| + | |
- | </td>
| + | |
- | <td class="even_cell delta_cell" id="catdelta"
| + | |
- | onMouseOver="LightenMenu(this);return true;" onMouseOut="DarkenMenu(this);return true;">
| + | |
- | Delta
| + | |
- | </td>
| + | |
- | <td class="odd_cell espsilon_cell" id="catepsilon"
| + | |
- | onMouseOver="LightenMenu(this);return true;" onMouseOut="DarkenMenu(this);return true;">
| + | |
- | Épsilon
| + | |
- | </td>
| + | |
- | <td class="even_cell zeta_cell" id="catzeta"
| + | |
- | onMouseOver="LightenMenu(this);return true;" onMouseOut="DarkenMenu(this);return true;">
| + | |
- | Zeta
| + | |
- | </td>
| + | |
- | </tr>
| + | |
- | <tr id="menuLinks">
| + | |
- | <td class="odd_cell alpha_cell" id="linkalpha"
| + | |
- | onMouseOver="LightenMenu(this);return true;" onMouseOut="DarkenMenu(this);return true;">
| + | |
- | <ul>
| + | |
- | <li><a class="menu_a" href="">Anélido</a></li>
| + | |
- | <li><a class="menu_a" href="">Acacia</a></li>
| + | |
- | <li><a class="menu_a" href="">Artrópodo</a></li>
| + | |
- | <li><a class="menu_a" href="">Astrocito</a></li>
| + | |
- | </ul>
| + | |
- | </td>
| + | |
- | <td class="even_cell beta_cell" id="linkbeta"
| + | |
- | onMouseOver="LightenMenu(this);return true;" onMouseOut="DarkenMenu(this);return true;">
| + | |
- | <ul>
| + | |
- | <li><a class="menu_a" href="">Bugambilia</a></li>
| + | |
- | <li><a class="menu_a" href="">Buey</a></li>
| + | |
- | <li><a class="menu_a" href="">Branquia</a></li>
| + | |
- | <li><a class="menu_a" href="">Boro</a></li>
| + | |
- | </ul>
| + | |
- | </td>
| + | |
- | <td class="odd_cell gamma_cell" id="linkgamma"
| + | |
- | onMouseOver="LightenMenu(this);return true;" onMouseOut="DarkenMenu(this);return true;">
| + | |
- | <ul>
| + | |
- | <li><a class="menu_a" href="">Ganso</a></li>
| + | |
- | <li><a class="menu_a" href="">Gato</a></li>
| + | |
- | <li><a class="menu_a" href="">Gusano</a></li>
| + | |
- | <li><a class="menu_a" href="">Grillo</a></li>
| + | |
- | </ul>
| + | |
- | </td>
| + | |
- | <td class="even_cell delta_cell" id="linkdelta"
| + | |
- | onMouseOver="LightenMenu(this);return true;" onMouseOut="DarkenMenu(this);return true;">
| + | |
- | <ul>
| + | |
- | <li><a class="menu_a" href="">Dinosaurio</a></li>
| + | |
- | <li><a class="menu_a" href="">Dendrita</a></li>
| + | |
- | <li><a class="menu_a" href="">Destino</a></li>
| + | |
- | <li><a class="menu_a" href="">Diurno</a></li>
| + | |
- | </ul>
| + | |
- | </td>
| + | |
- | <td class="odd_cell epsilon_cell" id="linkepsilon"
| + | |
- | onMouseOver="LightenMenu(this);return true;" onMouseOut="DarkenMenu(this);return true;">
| + | |
- | <ul>
| + | |
- | <li><a class="menu_a" href="">Esperanto</a></li>
| + | |
- | <li><a class="menu_a" href="">Español</a></li>
| + | |
- | <li><a class="menu_a" href="">Ermita</a></li>
| + | |
- | <li><a class="menu_a" href="">Einstein</a></li>
| + | |
- | </ul>
| + | |
- | </td>
| + | |
- | <td class="even_cell zeta_cell" id="linkzeta"
| + | |
- | onMouseOver="LightenMenu(this);return true;" onMouseOut="DarkenMenu(this);return true;">
| + | |
- | <ul>
| + | |
- | <li><a class="menu_a" href="">Zafiro</a></li>
| + | |
- | <li><a class="menu_a" href="">Zootecnista</a></li>
| + | |
- | <li><a class="menu_a" href="">Zinc</a></li>
| + | |
- | <li><a class="menu_a" href="">Z-score</a></li>
| + | |
- | </ul>
| + | |
- | </td>
| + | |
- | </tr>
| + | |
- | <tr id="menuMargin">
| + | |
- | <td class="odd_cell alpha_cell" id="maralpha" onMouseOver="LightenMenu(this);return true;" onMouseOut="DarkenMenu(this);return true;"></td>
| + | |
- | <td class="even_cell beta_cell" id="marbeta" onMouseOver="LightenMenu(this);return true;" onMouseOut="DarkenMenu(this);return true;"></td>
| + | |
- | <td class="odd_cell gamma_cell" id="margamma" onMouseOver="LightenMenu(this);return true;" onMouseOut="DarkenMenu(this);return true;"></td>
| + | |
- | <td class="even_cell delta_cell" id="mardelta" onMouseOver="LightenMenu(this);return true;" onMouseOut="DarkenMenu(this);return true;"></td>
| + | |
- | <td class="odd_cell espsilon_cell" id="marepsilon" onMouseOver="LightenMenu(this);return true;" onMouseOut="DarkenMenu(this);return true;"></td>
| + | |
- | <td class="even_cell zeta_cell" id="marzeta" onMouseOver="LightenMenu(this);return true;" onMouseOut="DarkenMenu(this);return true;"></td>
| + | |
- | </tr>
| + | |
- | </table> | + | |
| </body> | | </body> |
| </html> | | </html> |