Template:Kyoto Foreground
From 2011.igem.org
(Difference between revisions)
m |
|||
(96 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
+ | |||
+ | p { | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | #globalWrapper { | ||
+ | margin: 0px auto; | ||
+ | padding: 0px; | ||
+ | width: 975px; | ||
+ | } | ||
+ | |||
#content { | #content { | ||
color:#000000; | color:#000000; | ||
- | width: | + | min-height: 600px; |
- | + | width:773px; | |
+ | padding: 5px 25px; | ||
+ | margin: 0px; | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | #contentSub { | ||
+ | height: 0px; | ||
+ | margin: 0px; | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #footer-box { | ||
+ | width: 813px; | ||
+ | float: right; | ||
} | } | ||
+ | /******* FOREGROUND *******/ | ||
#foreground{ | #foreground{ | ||
position: fixed; | position: fixed; | ||
- | z-index: | + | z-index: 10; |
right: 50%; | right: 50%; | ||
top:0px; | top:0px; | ||
+ | height: 100%; | ||
} | } | ||
- | /************** | + | /******* header *******/ |
- | # | + | #top-section { |
- | + | height: 0px; | |
+ | width: 825px; | ||
top: 0px; | top: 0px; | ||
- | margin | + | margin: 0px; |
- | + | padding: 0px; | |
- | width: | + | border: 0px; |
+ | float: right; | ||
+ | } | ||
+ | |||
+ | #p-logo { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #header { | ||
+ | top: 0px; padding: 5px; | ||
+ | margin: -5px auto auto -26px; | ||
+ | height: 154px; width: 815px; | ||
border-bottom: 1px solid #000000; | border-bottom: 1px solid #000000; | ||
+ | background-color: #aaccaa; | ||
} | } | ||
- | |||
- | + | .top_panel { | |
- | + | background-color: #000000; | |
- | + | } | |
- | + | .top_panel * { | |
- | + | margin: 0px !important; | |
+ | } | ||
+ | .top_panel a img { | ||
+ | float: right; | ||
} | } | ||
- | # | + | .e_coli * { margin: 0px !important } |
- | + | .e_coli img { width: 100% } | |
+ | |||
+ | /******* GALLERY *******/ | ||
+ | #gallery { | ||
+ | position: absolute; | ||
+ | width: 815px !important; | ||
+ | height: 154px !important; | ||
+ | padding: 0px; | ||
+ | overflow : hidden; | ||
+ | background-color: #ffffff; | ||
} | } | ||
- | + | #gallery_base { | |
- | # | + | position: absolute; |
- | + | width: 100%; | |
- | + | height: 100%; | |
+ | padding:0px; | ||
+ | margin: 0px; | ||
} | } | ||
+ | .gallery_panel { | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | .gallery_panel * { | ||
+ | margin: 10px; | ||
+ | } | ||
+ | |||
+ | .red { | ||
+ | color: #00ffff; | ||
+ | background-color: #aa0000; | ||
+ | } | ||
+ | |||
+ | /******** MENU ********/ | ||
#menu { | #menu { | ||
position: absolute; | position: absolute; | ||
- | margin-left: - | + | margin-left: -488px; |
- | margin-top: | + | margin-top: 0px; |
- | height: | + | height: 100%; |
- | width: | + | width: 136px; |
+ | padding: 5px; | ||
font-family: 'Arial'; | font-family: 'Arial'; | ||
+ | background-color: #bbbbbb; | ||
+ | border: 2px solid #999999; | ||
} | } | ||
Line 56: | Line 130: | ||
} | } | ||
- | #menu li a{ | + | #menu li ul { |
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | #menu li a, .menu-header { | ||
display:block; | display:block; | ||
- | + | width:132px; | |
- | width: | + | |
color:#000000; | color:#000000; | ||
background-color: #ffffff; | background-color: #ffffff; | ||
Line 73: | Line 151: | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</style> | </style> | ||
- | |||
- | |||
- | |||
<div id="header"> | <div id="header"> | ||
- | <a href="/ | + | <div id="gallery"> |
- | + | <div id="gallery_base"> | |
- | + | <div class="gallery_panel top_panel"> | |
+ | <a href="https://2011.igem.org/Team:Kyoto" title="return to main page."> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/9/9f/Light_beiz.jp_M31367.jpg"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="gallery_panel e_coli"> | ||
+ | <a href="https://2011.igem.org/Team:Kyoto" title="return to main page."> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/b/bd/Head_gallery1.jpeg"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="gallery_panel e_coli"> | ||
+ | <a href="https://2011.igem.org/Team:Kyoto" title="return to main page."> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/8/88/Head_gallery2.jpeg"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="gallery_panel e_coli"> | ||
+ | <a href="https://2011.igem.org/Team:Kyoto" title="return to main page."> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/5/5e/Head_gallery3.jpeg"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="gallery_panel e_coli"> | ||
+ | <a href="https://2011.igem.org/Team:Kyoto" title="return to main page."> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/2/2d/Head_gallery4.jpeg"> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="gallery_panel e_coli"> | ||
+ | <a href="https://2011.igem.org/Team:Kyoto" title="return to main page."> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/0/0d/Head_gallery5.jpeg"> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
- | |||
<!-- end header --> | <!-- end header --> | ||
+ | |||
+ | <div id ="foreground"> | ||
<ul id ="menu"> | <ul id ="menu"> | ||
- | + | <li><img src="https://static.igem.org/mediawiki/2011/3/37/KyotoLogo.png" style="width:100%; padding-bottom: 10px;"></li> | |
- | + | <li><a class="menu-header home" href="https://2011.igem.org/Team:Kyoto">Home</a></li> | |
- | + | <li><span class="menu-header project">Project</span> | |
- | + | <ul> | |
- | + | <li><a href="https://2011.igem.org/Team:Kyoto/Hunger">Hunger</a></li> | |
- | + | <li><a href="https://2011.igem.org/Team:Kyoto/Hunger/Modeling">Hunger Modeling</a></li> | |
- | + | <li><a href="https://2011.igem.org/Team:Kyoto/Capture">Capture</a></li> | |
- | + | <li><a href="https://2011.igem.org/Team:Kyoto/Digestion">Digestion</a></li> | |
- | + | <li><a href="https://2011.igem.org/Team:Kyoto/Digestion/Modeling">Digestion Modeling</a></li> | |
- | + | </ul> | |
- | + | </li> | |
- | + | <li><span class="menu-header consideration">Consideration</span> | |
- | + | <ul> | |
- | + | <li><a href="https://2011.igem.org/Team:Kyoto/Safety">Safety</a></li> | |
- | + | <li><a href="https://2011.igem.org/Team:Kyoto/HumanPractice">Human Practice</a></li> | |
- | + | </ul> | |
- | + | </li> | |
- | + | <li><span class="menu-header method">Method</span> | |
- | + | <ul> | |
- | + | <li><a href="https://2011.igem.org/Team:Kyoto/Parts">Parts</a></li> | |
- | + | <li><a href="https://2011.igem.org/Team:Kyoto/Protocol">Protocol</a></li> | |
- | + | <li><a href="https://2011.igem.org/Team:Kyoto/Material">Material</a></li> | |
- | + | </ul> | |
- | + | </li> | |
- | + | <li><a class="menu-header team" href="https://2011.igem.org/Team:Kyoto/Team">Team</a></li> | |
+ | <li><span class="menu-header notebook">Notebook</span> | ||
+ | <ul> | ||
+ | <li><a href="https://2011.igem.org/Team:Kyoto/Lab Work">Lab Work</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:Kyoto/Diary">Diary</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a class="menu-header acknowledgement" href="https://2011.igem.org/Team:Kyoto/Acknowledgement">Acknowledgement</a></li> | ||
+ | <li><a class="menu-header criteria" href="https://2011.igem.org/Team:Kyoto/Criteria">Criteria</a></li> | ||
</ul> | </ul> | ||
<!-- end menu --> | <!-- end menu --> | ||
Line 129: | Line 235: | ||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> | <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
- | |||
$("#menu").accordion({ | $("#menu").accordion({ | ||
header: ".menu-header", | header: ".menu-header", | ||
- | autoHeight: false | + | autoHeight: false, |
+ | event: "mouseover", | ||
+ | active:$(".</html>{{{active_page|home}}}<html>") | ||
}); | }); | ||
+ | function init() { | ||
+ | var panels = $(".gallery_panel"); | ||
+ | var c = panels.first(); | ||
+ | var left = 0; | ||
+ | for (var i = 0; i < panels.length; i++) { | ||
+ | c.css("left",left+"px"); | ||
+ | left += c.outerWidth(); | ||
+ | c = c.next(); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function change(change_time, delay_time) { | ||
+ | var c = $(".gallery_panel").first(); | ||
+ | gallery_unit(c,0, change_time, delay_time); | ||
+ | } | ||
+ | |||
+ | function gallery_unit(c, left, change_time, delay_time) { | ||
+ | var b = $("#gallery_base"); | ||
+ | b.animate({ | ||
+ | left : left + "px" | ||
+ | },change_time,function() { | ||
+ | }).delay(delay_time); | ||
+ | left -= c.outerWidth(); | ||
+ | c = c.next(".gallery_panel"); | ||
+ | if (!c.is(".gallery_panel")) { | ||
+ | c = $(".gallery_panel").first(); | ||
+ | left = 0; | ||
+ | } | ||
+ | gallery_unit(c, left,change_time,delay_time); | ||
+ | } | ||
+ | $(document).ready(function() { | ||
+ | init(); | ||
+ | change(800,5000); | ||
}); | }); | ||
</script> | </script> | ||
</html> | </html> |
Latest revision as of 21:20, 5 October 2011