Team:Calgary/Sandbox

From 2010.igem.org

(Difference between revisions)
 
(89 intermediate revisions not shown)
Line 1: Line 1:
-
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+
<html>
-
<!--Colors 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;
+
-
}
+
-
#nav li {
+
<style>
-
/*floats main list items*/
+
-
margin: 0;
+
</style>
-
float: left;
+
-
display: block;
+
-
padding-right: 15px;
+
-
margin-bottom: 50px;
+
-
}
+
 +
</head>
-
#nav li.off ul, #nav li.on ul {
 
-
/*put the subnavs underneath main navs and hide them*/
 
-
display: none;
 
-
position: absolute;
 
-
top: 80px;
 
-
height: 15px;
 
-
left: 0;
 
-
padding-top: 10px;
 
-
}
 
-
#nav li a {
+
<body>
-
/*affects all links on the list*/
+
-
color: #f90
+
-
font-weight: bold;
+
-
display: block;
+
-
height: 15px;
+
-
width: 100px;
+
-
padding: 5px;
+
-
border: solid 1px #4AC6F7;
+
-
}
+
-
#nav li.on a {
 
-
/*change border colour for active area*/
 
-
border: 1px solid #9ECF3E;
 
-
}
 
 +
<!-- 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 li.on ul a, #nav li.off ul a {
+
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
-
float: left;
+
-
/*cancel inheritance of border on subnav of active area*/
+
<img id="boximage1" src="http://www.army.forces.gc.ca/cfb_suffield/Images/CFB_Suffield1.gif"></img>
-
border: 0;
+
-
color: #FF0000;
+
</div>
-
width: auto;
+
-
margin-right: 15px;
+
-
}
+
-
#nav li.on ul {
+
<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 active subnav list*/
+
-
display: block;
+
<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>
 +
-
#nav li.off:hover ul {
+
<div id="1" style="background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none ">
-
/*displays other topics when the main menu item is hovered over*/
+
-
display: block;
+
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
-
z-index: 10;
+
-
}
+
<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 a:hover, #nav li.off:hover a {
 
-
background: #4AC6F7;
 
-
color: #30251A;
 
-
}
 
 +
<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;">
-
</style>
+
<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;">
 +
<p style="padding-left:10px;"> I'm like burning man but better! </p>
 +
 +
</div>
 +
 +
</div>
-
<body>
+
-
<ul id="nav">
+
<div id="3" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none ">
-
<li class="off"><a href="#">Menu 1</a>
+
-
<ul>
+
-
<li><a href="#">Submenu A</a></li>
+
-
<li><a href="#">Submenu B</a></li>
+
-
</ul>
+
-
</li>
+
-
<li class="off"><a href="#">Menu 2</a>
+
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
-
<ul>
+
-
<li><a href="#">Submenu C</a></li>
+
<img id="boximage4" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/ProtocolIcon.png"></img>
-
<li><a href="#">Submenu D</a></li>
+
-
<li><a href="#">Submenu E</a></li>
+
</div>
-
<li><a href="#">Submenu F</a></li>
+
-
</ul>
+
-
</li>
+
-
<li class="on"><a href="#">Menu 3</a>
 
-
<ul>
 
-
<li><a href="#">Submenu G</a></li>
 
-
<li><a href="#">Submenu H</a></li>
 
-
<li><a href="#">Submenu I</a></li>
 
-
<li><a href="#">Submenu J</a></li>
 
-
<li><a href="#">Submenu K</a></li>
 
-
</ul>
 
-
</li>
 
 +
<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>
 +
 +
 +
 +
<div id="4" 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="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;">
 +
 +
<p style="padding-left:10px;"> I'm from Alberta and I'm awesome! </p>
 +
 +
</div>
 +
 +
</div>
 +
 +
 +
</div>
 +
 +
 +
 +
<!-- 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>
 +
 +
 +
<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>
 +
 +
 +
<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>
 +
 +
 +
<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>
 +
-
<li class="off"><a href="#">Menu 4</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"