Template:Kyoto Foreground

From 2011.igem.org

(Difference between revisions)
m
 
(71 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:965px;
+
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: 100;
+
  z-index: 10;
  right: 50%;
  right: 50%;
  top:0px;
  top:0px;
 +
height: 100%;
}
}
-
#header {
+
/******* header *******/
-
  position: absolute;
+
#top-section {
 +
  height: 0px;
 +
width: 825px;
  top: 0px;
  top: 0px;
-
  margin-left: -488px;
+
  margin: 0px;
-
  height: 155px;
+
padding: 0px;
-
  width: 975px;
+
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: #000000;
+
  background-color: #aaccaa;
}
}
-
#header a {
+
.top_panel {
-
width: 100%;
+
    background-color: #000000;
 +
}
 +
.top_panel * {
 +
    margin: 0px !important;
 +
}
 +
.top_panel a img {
 +
    float: right;
}
}
-
#header a img {
+
.e_coli * { margin: 0px !important }
-
float: right;
+
.e_coli img { width: 100% }
 +
 
 +
/******* GALLERY *******/
 +
#gallery {
 +
    position: absolute;
 +
    width: 815px !important;
 +
    height: 154px !important;
 +
    padding: 0px;
 +
    overflow : hidden;
 +
    background-color: #ffffff;
}
}
-
#top-section {
+
#gallery_base {
-
height:0px;
+
    position: absolute;
 +
    width: 100%;
 +
    height: 100%;
 +
    padding:0px;
 +
    margin: 0px;
}
}
-
#p-logo {
+
.gallery_panel {
-
display: none;
+
    position: absolute;
 +
    width: 100%;
 +
    height: 100%;
 +
    margin: 0px;
 +
    padding: 0px;
}
}
-
/******** menu ********/
+
.gallery_panel * {
-
#menu li ul {
+
    margin: 10px;
-
margin: 0px;
+
-
padding: 0px;
+
}
}
 +
.red {
 +
    color: #00ffff;
 +
    background-color: #aa0000;
 +
}
 +
 +
/******** MENU ********/
#menu {
#menu {
  position: absolute;
  position: absolute;
  margin-left: -488px;
  margin-left: -488px;
-
  margin-top: 155px;
+
  margin-top: 0px;
-
  height: 400px !important;
+
  height: 100%;
-
  width: 150px;
+
  width: 136px;
 +
padding: 5px;
  font-family: 'Arial';
  font-family: 'Arial';
  background-color: #bbbbbb;
  background-color: #bbbbbb;
-
  border: 2px solid #999999;}
+
  border: 2px solid #999999;
 +
}
#menu li {
#menu li {
Line 60: Line 130:
}
}
-
#menu li a{
+
#menu li ul {
 +
margin: 0px;
 +
padding: 0px;
 +
}
 +
 
 +
#menu li a, .menu-header {
  display:block;
  display:block;
-
margin: 1px 5px 1px 5px;
+
  width:132px;
-
  width:130px;
+
  color:#000000;
  color:#000000;
  background-color: #ffffff;
  background-color: #ffffff;
Line 77: Line 151:
}
}
-
/******** main ********/
 
-
 
-
#main {
 
-
height: auto;
 
-
min-height: 600px;
 
-
width: 750px;
 
-
padding: 0px 25px 0px 25px;
 
-
float: right;
 
-
font-family: 'Arial';
 
-
}
 
</style>
</style>
-
 
-
<div id ="foreground">
 
<div id="header">
<div id="header">
-
<a href="https://2011.igem.org/Team:Kyoto" title="return to main page.">
+
    <div id="gallery">
-
  <img src="https://static.igem.org/mediawiki/2011/2/27/%E4%BA%AC%E5%A4%A7%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E5%85%89.jpg">
+
        <div id="gallery_base">
-
</a>
+
            <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><a class="menu-header" href="https://2011.igem.org/Team:Kyoto">Home</a></li>
+
    <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">Introduction</a>
+
    <li><a class="menu-header home" href="https://2011.igem.org/Team:Kyoto">Home</a></li>
-
  <ul>
+
    <li><span class="menu-header project">Project</span>
-
  <li><a href="https://2011.igem.org/Team:Kyoto/Team">Team</a></li>
+
        <ul>
-
  </ul>
+
            <li><a href="https://2011.igem.org/Team:Kyoto/Hunger">Hunger</a></li>
-
</li>
+
            <li><a href="https://2011.igem.org/Team:Kyoto/Hunger/Modeling">Hunger Modeling</a></li>
-
<li><a class="menu-header" href="https://2011.igem.org/Team:Kyoto/Project">Project</a>
+
            <li><a href="https://2011.igem.org/Team:Kyoto/Capture">Capture</a></li>
-
  <ul>
+
            <li><a href="https://2011.igem.org/Team:Kyoto/Digestion">Digestion</a></li>
-
  <li><a href="https://2011.igem.org/Team:Kyoto/Hunger">Hunger</a></li>
+
            <li><a href="https://2011.igem.org/Team:Kyoto/Digestion/Modeling">Digestion Modeling</a></li>
-
  <li><a href="https://2011.igem.org/Team:Kyoto/Luminescence">Luminescence</a></li>
+
        </ul>
-
  <li><a href="https://2011.igem.org/Team:Kyoto/Predation">Predation</a></li>
+
    </li>
-
  <li><a href="https://2011.igem.org/Team:Kyoto/Digestion">Digestion</a></li>
+
    <li><span class="menu-header consideration">Consideration</span>
-
  </ul>
+
        <ul>
-
</li>
+
            <li><a href="https://2011.igem.org/Team:Kyoto/Safety">Safety</a></li>
-
<li><a class="menu-header" href="https://2011.igem.org/Team:Kyoto/Parts">Parts</a></li>
+
            <li><a href="https://2011.igem.org/Team:Kyoto/HumanPractice">Human Practice</a></li>
-
<li><a class="menu-header" href="https://2011.igem.org/Team:Kyoto/Notebook">Notebook</a>
+
        </ul>
-
  <ul>
+
    </li>
-
  <li><a href="https://2011.igem.org/Team:Kyoto/Lab Work">Lab Work</a></li>
+
    <li><span class="menu-header method">Method</span>
-
  <li><a href="https://2011.igem.org/Team:Kyoto/Diary">Diary</a></li>
+
        <ul>
-
  <li><a href="https://2011.igem.org/Team:Kyoto/Protocol">Protocol</a></li>
+
            <li><a href="https://2011.igem.org/Team:Kyoto/Parts">Parts</a></li>
-
  </ul>
+
            <li><a href="https://2011.igem.org/Team:Kyoto/Protocol">Protocol</a></li>
-
</li>
+
            <li><a href="https://2011.igem.org/Team:Kyoto/Material">Material</a></li>
-
<li><a class="menu-header" href="#">Consideration</a>
+
        </ul>
-
  <ul>
+
    </li>
-
  <li><a href="https://2011.igem.org/Team:Kyoto/Safety">Safety</a></li>
+
    <li><a class="menu-header team" href="https://2011.igem.org/Team:Kyoto/Team">Team</a></li>
-
  <li><a href="https://2011.igem.org/Team:Kyoto/HumanPractice">Human Practice</a></li>
+
    <li><span class="menu-header notebook">Notebook</span>
-
  </ul>
+
        <ul>
-
</li>
+
            <li><a href="https://2011.igem.org/Team:Kyoto/Lab Work">Lab Work</a></li>
-
<li><a class="menu-header" href="https://2011.igem.org/Team:Kyoto/Acknowledgement">Acknowledgement</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 136: 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">
-
$(document).ready(function() {
 
  $("#menu").accordion({
  $("#menu").accordion({
   header: ".menu-header",
   header: ".menu-header",
   autoHeight: false,
   autoHeight: false,
-
   event: "mouseover"
+
   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

Retrieved from "http://2011.igem.org/Template:Kyoto_Foreground"