Team:Calgary/Sandbox

From 2010.igem.org

(Difference between revisions)
 
(68 intermediate revisions not shown)
Line 1: Line 1:
-
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+
<html>
-
<style>
+
<head>
-
#nav {
+
<title> iGEM Information Tabs </title>
-
width: 760px;
+
-
height: 230px ;
+
-
background: url(http://i242.photobucket.com/albums/ff10/somerndmguy/image2.png) no-repeat;
+
-
margin: 10px auto;
+
-
padding: 0;
+
-
position: relative;
+
-
}
+
 +
<script type="text/javascript" src="http://www.wikiwikiwebworks.ca/script1.js"></script>
 +
-
#nav li {
+
<style>
-
margin: 0;
+
-
padding: 0;
+
</style>
-
list-style: none;
+
-
position: relative;
+
-
top: 0;
+
-
float: left;
+
</head>
-
}
 
-
#nav li, #nav a {
+
<body>
-
height: 230px;
+
-
display: block;
+
-
}
+
-
#homepanel{left: 0; width: 78px;}
 
-
#teampanel{left: 0; width: 80px;}
 
-
#projectpanel{left: 0; width: 106px;}
 
-
#notebookpanel{left: 0; width: 212px;}
 
-
#communitypanel{left: 0; width: 125px;}
 
-
#sponsorspanel{left: 0; width:153px;}
 
-
#homesubpanel li a:hover, #homesubpanel li a{
+
<!-- text division -->
-
margin: 0;
+
-
margin-top: 230px;
+
<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; ">
-
width: 78px;
+
-
background: transparent;
+
<div id="0" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:block ">
-
height: 15px;
+
-
}
+
 +
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
 +
 +
<img id="boximage1" src="http://www.army.forces.gc.ca/cfb_suffield/Images/CFB_Suffield1.gif"></img>
 +
 +
</div>
-
#teamsubpanel li a:hover, #teamsubpanel li a{
 
-
margin: 0;
 
-
margin-top: 230px;
 
-
width: 80px;
 
-
background: transparent;
 
-
height: 15px;
 
-
}
 
 +
<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>
-
#projectsubpanel li a:hover, #projectsubpanel li a{
+
-
margin: 0;
+
-
margin-top: 230px;
+
-
width: 106px;
+
-
background: transparent;
+
-
height: 15px;
+
-
}
+
 +
<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>
-
#notebooksubpanel li a:hover, #notebooksubpanel li a{
+
-
margin: 0;
+
<div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;">
-
margin-top: 230px;
+
-
width: 212px;
+
<p style="padding-left:10px;"> I'm generic information about Lethbridge! </p>
-
background: transparent;
+
-
height: 15px;
+
</div>
-
}
+
 +
</div>
 +
-
#communitysubpanel li a:hover, #communitysubpanel li a{
+
<div id="2" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none ">
-
margin: 0;
+
-
margin-top: 230px;
+
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
-
width: 125px;
+
-
background: transparent;
+
-
height: 15px;
+
-
}
+
 +
<img id="boximage3" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/bhsgrnsmall.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;">
-
#homepanel a:hover {
+
<p style="padding-left:10px;"> I'm like burning man but better! </p>
-
background: transparent url(http://i242.photobucket.com/albums/ff10/somerndmguy/image2.png) 0 -230px no-repeat;
+
-
}
+
</div>
 +
 +
</div>
 +
-
#teampanel a:hover {
+
<div id="3" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none ">
-
background: transparent url(http://i242.photobucket.com/albums/ff10/somerndmguy/image2.png) -79px -230px no-repeat;
+
-
}
+
 +
<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>
-
#projectpanel a:hover {
+
-
background: transparent url(http://i242.photobucket.com/albums/ff10/somerndmguy/image2.png) -159px -230px no-repeat;
+
<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 a fan of cupcakes! </p>
 +
 +
</div>
 +
 +
</div>
-
#notebookpanel a:hover {
+
-
background: transparent url(http://i242.photobucket.com/albums/ff10/somerndmguy/image2.png) -266px -230px no-repeat;
+
-
}
+
 +
<div id="4" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none ">
-
#communitypanel a:hover {
+
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
-
background: transparent url(http://i242.photobucket.com/albums/ff10/somerndmguy/image2.png) -478px -230px no-repeat;
+
-
}
+
 +
<img id="boximage5" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Twitter.png"></img>
 +
 +
</div>
-
#sponsorspanel a:hover {
+
-
background: transparent url(http://i242.photobucket.com/albums/ff10/somerndmguy/image2.png) -603px -230px no-repeat;
+
<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 from Alberta and I'm awesome! </p>
 +
 +
</div>
 +
 +
</div>
-
#nav ul {
 
-
padding: 0;
 
-
margin: 0;
 
-
list-style: none;
 
-
}
 
-
#nav li ul {
+
</div>
-
display: none;
+
-
position: absolute;
+
-
top: 1em;
+
-
left: 0;
+
-
}
+
-
#nav li > ul {
 
-
top: auto;
 
-
left: auto;
 
-
}
 
 +
<!-- menu bar -->
 +
 +
<div style="width:524px; height:35px; margin-right:auto; margin-left:auto; margin-top:-10px; padding-left:10px; ">
-
#nav li:hover ul { display:block; }
+
 +
<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>
 +
 +
<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>
 +
 +
<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>
-
</style>
+
<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>
-
 
+
-
 
+
-
<body>
+
-
 
+
-
<ul id="nav">
+
-
<li id="homepanel"><a href="#">Home</a>
+
-
<div id="homesubpanel">
+
-
<ul>
+
-
<li><a href="#">News</a></li>
+
-
</ul>
+
-
</div>
+
-
</li>
+
-
 
+
-
<li id="teampanel"><a href="#">Team</a>
+
-
<div id="teamsubpanel">
+
-
<ul>
+
-
<li><a href="#">Undergraduates</a></li>
+
-
<li><a href="#">Advisors</a></li>
+
-
<li><a href="#">About the University</a></li>
+
-
</ul>
+
-
</div>
+
-
</li>
+
-
 
+
-
<li id="projectpanel"><a href="#">Project</a>
+
-
<div id="projectsubpanel">
+
-
<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>
+
-
</div>
+
-
</li>
+
-
+
-
 
+
-
<li id="notebookpanel"><a href="#">Notebook and Parts</a>
+
-
<div id="notebooksubpanel">
+
-
<ul>
+
-
<li><a href="#">Notebook</a></li>
+
-
<li><a href="#">Parts Submitted</a></li>
+
-
<li><a href="#">Characterization</a></li>
+
-
<li><a href="#">Protocols and Safety</a></li>
+
-
</ul>
+
-
</div>
+
-
</li>
+
-
 
+
-
<li id="communitypanel"><a href="#">Community</a>
+
-
<div id="communitysubpanel">
+
-
<ul>
+
-
<li><a href="#">Ethics</a></li>
+
-
<li><a href="#">Outreach</a></li>
+
-
<li><a href="#">Gallery</a></li>
+
-
</ul>
+
-
</div>
+
-
</li>
+
-
 
+
-
<li id="sponsorspanel"><a href="#">Sponsors</a></li>
+
-
</ul>
+
-
<br/><br/><br/><br/><br/><br/><br/>
+
 +
<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>
 +
 +
</div>
-
</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!