Team:Calgary/Sandbox

From 2010.igem.org

(Difference between revisions)
 
(79 intermediate revisions not shown)
Line 1: Line 1:
-
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+
<html>
-
<!--Color Scheme Blue:4AC6F7, Yellow:F3F778, Green:9ECF3E, White:FFFFFF, Dark Brown:30251A-->
+
<head>
-
<style type="text/css">
+
<title> iGEM Information Tabs </title>
-
#nav {
+
<script type="text/javascript" src="http://www.wikiwikiwebworks.ca/script1.js"></script>
-
font-family:courier;
+
-
font-style:bold;
+
-
width: 750px; height: 230px;
+
<style>
-
background: url(http://i242.photobucket.com/albums/ff10/somerndmguy/image2.png);
+
-
margin: 10px auto; padding: 0;
+
</style>
-
position: relative;
+
-
}
+
-
#nav li {
+
</head>
-
/*floats main list items*/
+
-
margin: 0;
+
-
float: left;
+
-
display: block;
+
-
margin-bottom: 50px;
+
-
padding: 0; list-style: none;
 
-
position: absolute; top: 0;
 
-
border: 1px dashed black;
 
-
}
 
 +
<body>
-
#nav li.off, #nav li.on {
 
-
margin: 0; padding: 0; list-style: none;
 
-
position: absolute; top: 0;
 
-
height: 230px; display: block;
 
-
}
 
 +
<!-- text division -->
 +
 +
<div style="margin-left:auto; margin-right:auto; background:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Background.png'); width:556px; height:330px; padding-top:15px; ">
 +
 +
<div id="0" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:block ">
-
#nav a {
+
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
-
height: 230px;
+
-
display: block;
+
<img id="boximage1" src="http://www.army.forces.gc.ca/cfb_suffield/Images/CFB_Suffield1.gif"></img>
-
}
+
 +
</div>
 +
<div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;">
 +
 +
<p style="padding-left:10px;">On July 14th, 2010, iGEM Calgary visited the Defence Research and Development Canada (DRDC) facility in Suffield, Alberta.</p>
 +
 +
</div>
 +
 +
</div>
-
#homepanel{left: 0; width: 78px;}
+
-
#teampanel{left: 79px; width: 80px;}
+
-
#projectpanel{left: 159px; width: 106px;}
+
-
#notebookpanel{left: 266px; width: 212px;}
+
-
#communitypanel{left: 478px; width: 135px;}
+
-
#sponsorspanel{left: 613px; 153px;}
+
 +
<div id="1" style="background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none ">
 +
 +
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
 +
 +
<img id="boximage2" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/ImageTBA-1.png"></img>
 +
</div>
 +
 +
<div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;">
 +
 +
<p style="padding-left:10px;"> I'm generic information about Lethbridge! </p>
 +
 +
</div>
 +
 +
</div>
-
#nav li.off ul, #nav li.on ul {
+
-
/*put the subnavs underneath main navs and hide them*/
+
-
display: none;
+
-
position: absolute;
+
-
top: 69px;
+
-
height: 15px;
+
-
left: 0;
+
-
padding-top: 10px;
+
-
}
+
 +
<div id="2" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none ">
 +
 +
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
-
#nav li a {
+
<img id="boximage3" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/bhsgrnsmall.png"></img>
-
/*affects all links on the list*/
+
-
color: #f90
+
</div>
-
font-weight: bold;
+
-
display: block;
+
-
height: 15px;
+
-
width: auto;
+
-
padding: 5px;
+
-
border: solid 1px #4AC6F7;
+
-
}
+
 +
 +
<div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;">
-
#nav li.on a {
+
<p style="padding-left:10px;"> I'm like burning man but better! </p>
-
/*change border colour for active area*/
+
-
border: 1px solid #9ECF3E;
+
</div>
-
}
+
 +
</div>
 +
-
#nav li.on ul a, #nav li.off ul a {
+
<div id="3" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none ">
-
float: left;
+
-
/*cancel inheritance of border on subnav of active area*/
+
-
border: 0;
+
-
color: #FF0000;
+
-
width: auto;
+
-
padding-right: 15px;
+
-
}
+
 +
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
 +
 +
<img id="boximage4" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/ProtocolIcon.png"></img>
 +
 +
</div>
-
#nav li.on ul {
+
-
/*display active subnav list*/
+
<div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;">
-
display: block;
+
-
}
+
 +
<p style="padding-left:10px;"> I'm a fan of cupcakes! </p>
 +
 +
</div>
 +
 +
</div>
-
#nav li.off:hover ul {
+
-
/*displays other topics when the main menu item is hovered over*/
+
 
-
display: block;
+
<div id="4" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none ">
-
z-index: 10;
+
 
 +
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
 +
 
 +
<img id="boximage5" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Twitter.png"></img>
-
}
+
</div>
 +
 +
<div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;">
-
#nav li.off a:hover, #nav li.off:hover a {
+
<p style="padding-left:10px;"> I'm from Alberta and I'm awesome! </p>
-
background: #4AC6F7;
+
-
color: #30251A;
+
</div>
-
}
+
 +
</div>
-
</style>
+
</div>
-
<body>
+
<!-- menu bar -->
 +
 +
<div style="width:524px; height:35px; margin-right:auto; margin-left:auto; margin-top:-10px; padding-left:10px; ">
 +
 +
<div onmouseover="imgHover(1);" onmouseout="imgOff(1);" onclick="changeTab(0);" style="margin-left:2.4; margin-right:2.4; float:left; width:98px; height:35px; "> <img id="suffield" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/SuffieldWhite.png" title="suffield" /> </div>
-
<ul id="nav">
+
-
<li class="off" id="homepanel"><a href="#">Home</a>
+
<div onmouseover="imgHover(2);" onmouseout="imgOff(2);" onclick="changeTab(1);" style="margin-left:2.4; margin-right:2.4; float:left; width:98px; height:35px; "> <img id="lethbridge" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/LethbridgeGrey.png" title="lethbridge" /> </div>
-
<ul>
+
-
<li><a href="#">News</a></li>
+
-
</ul>
+
-
</li>
+
-
<li class="off" id="teampanel"><a href="#">Team</a>
+
-
<ul>
+
<div onmouseover="imgHover(3);" onmouseout="imgOff(3);" onclick="changeTab(2);" style="margin-left:2.4; margin-right:2.4; float:left; width:98px; height:35px; "> <img id="proteinman" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/ProteinManGrey.png" title="protein man" /> </div>
-
<li><a href="#">Undergraduates</a></li>
+
-
<li><a href="#">Advisors</a></li>
+
-
<li><a href="#">About the University</a></li>
+
-
</ul>
+
-
</li>
+
-
<li class="on" id="projectpanel"><a href="#">Project</a>
 
-
<ul>
 
-
<li><a href="#">Project Overview</a></li>
 
-
<li><a href="#">Gene Error Detection</a></li>
 
-
<li><a href="#">Yeast Assembler</a></li>
 
-
<li><a href="#">Modelling</a></li>
 
-
</ul>
 
-
</li>
 
-
 
-
<li class="off" id="notebookpanel"><a href="#">Notebook and Parts</a>
+
<div onmouseover="imgHover(4);" onmouseout="imgOff(4);" onclick="changeTab(3);" style="margin-left:2.4; margin-right:2.4; float:left; width:98px; height:35px; "> <img id="community" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/CommunityGrey.png" title="bake sale" /> </div>
-
<ul>
+
 
-
<li><a href="#">Notebook</a></li>
+
-
<li><a href="#">Parts Submitted</a></li>
+
<div onmouseover="imgHover(5);" onmouseout="imgOff(5);" onclick="changeTab(4);" style="margin-left:2.4; margin-right:2.4; float:left; width:98px; height:35px; "> <img id="agem" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/aGEMGrey.png" title="aGEM" /> </div>
-
<li><a href="#">Characterization</a></li>
+
-
<li><a href="#">Protocols and Safety</a></li>
+
</div>
-
</ul>
+
-
</li>
+
-
<li class="off" id="communitypanel"><a href="#">Community</a>
 
-
<ul>
 
-
<li><a href="#">Ethics</a></li>
 
-
<li><a href="#">Outreach</a></li>
 
-
<li><a href="#">Gallery</a></li>
 
-
</ul>
 
-
</li>
 
-
<li class="off" id="sponsorspanel"><a href="#">Sponsors</a></li>
 
-
</ul>
 
-
</body>
 
 +
</body>
</html>
</html>

Latest revision as of 06:48, 25 October 2010

iGEM Information Tabs

On July 14th, 2010, iGEM Calgary visited the Defence Research and Development Canada (DRDC) facility in Suffield, Alberta.

I'm generic information about Lethbridge!

I'm like burning man but better!

I'm a fan of cupcakes!

I'm from Alberta and I'm awesome!

Retrieved from "http://2010.igem.org/Team:Calgary/Sandbox"