Team:Calgary/Sandbox

From 2010.igem.org

(Difference between revisions)
 
(78 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
 +
<head>
<head>
-
<style type="text/css" media="all">
 
-
#divNav {
+
<title> iGEM Information Tabs </title>
-
background: transparent url(bk-nav.jpg) no-repeat top left;
+
-
margin: 0;
+
-
padding: 0;
+
-
height: 80px;
+
-
width: 800px;
+
-
}
+
-
#nav {
+
<script type="text/javascript" src="http://www.wikiwikiwebworks.ca/script1.js"></script>
-
position: relative;
+
-
top: 55px;
+
-
height: 80px;
+
-
width: 800px;
+
-
}
+
-
#nav li ul, #nav li ul {
+
<style>
-
margin: 0;
+
-
padding: 0;
+
</style>
-
}
+
-
#nav a {
+
</head>
-
text-decoration: none;
+
-
}
+
-
#nav li { /*float the main list items*/
 
-
margin: 0;
 
-
float: left;
 
-
display: block;
 
-
padding-right: 15px;
 
-
}
 
-
#nav li ul {
 
-
display: none;
 
-
}
 
-
#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
+
<body>
-
position: absolute;
+
-
top: 25px;
+
-
left: 0;
+
-
padding-top: 15px;
+
-
background: #224d6f;
+
-
height: 28px;
+
-
width: 740px;
+
-
padding-left: 60px;
+
-
}
+
-
#nav li.on ul {
 
-
background: #f90;
 
-
}
 
-
#nav li.on:hover ul, #nav li.over ul { /*for ie*/
 
-
background: #224d6f;
 
-
}
 
-
#nav li a {
+
<!-- text division -->
-
color: #224d6f;
+
-
font-weight: bold;
+
<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; ">
-
display: block;
+
-
width: 93px;
+
<div id="0" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:block ">
-
padding: 0;
+
-
}
+
-
#nav li.on a {
+
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
-
color: #f90;
+
-
}
+
<img id="boximage1" src="http://www.army.forces.gc.ca/cfb_suffield/Images/CFB_Suffield1.gif"></img>
 +
 +
</div>
-
#nav li.on ul a, #nav li.off ul a {
 
-
border: 0;
 
-
float: left; /*ie doesn't inherit the float*/
 
-
color: #f90;
 
-
width: auto;
 
-
margin-right: 15px;
 
-
}
 
-
#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
+
<div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;">
-
background: #224d6f;
+
-
}
+
<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.on ul {
+
-
display: block;
+
-
}
+
-
#nav li.off:hover ul, #nav li.over ul {
+
<div id="1" style="background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none ">
-
display: block;
+
-
z-index: 6000;
+
<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>
-
#nav li.off a:hover, #nav li.on a:hover {
+
-
color: #f90;
+
<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>
-
/*do the image replacement*/
+
-
#nav li span {
+
<div id="2" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none ">
-
position: absolute;
+
-
left: -9384px;
+
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
-
}
+
-
#liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a {
+
<img id="boximage3" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/bhsgrnsmall.png"></img>
-
display: block;
+
-
position: relative;
+
</div>
-
height: 26px;
+
-
background: url(bk-dropdownMap.gif) no-repeat; /*contains all hover states*/
+
-
}
+
-
/*first, put the initial states in place*/
+
 +
<div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;">
-
#liRenaissance a {
+
<p style="padding-left:10px;"> I'm like burning man but better! </p>
-
background-position: 0 0;
+
-
}
+
</div>
 +
 +
</div>
-
#liArtNouveau a {
+
-
background-position: -102px 0;
+
-
}
+
-
#liModern a {
+
<div id="3" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none ">
-
background-position: -204px 0;
+
-
}
+
-
#liPostModern a {
+
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
-
background-position: -306px 0;
+
-
}
+
<img id="boximage4" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/ProtocolIcon.png"></img>
 +
 +
</div>
-
#liDigital a {
+
-
background-position: -408px 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;">
-
}
+
-
/*active area - for this demo - the code could be based on a body class, and probably work better.*/
+
<p style="padding-left:10px;"> I'm a fan of cupcakes! </p>
 +
 +
</div>
 +
 +
</div>
-
#liModern.on a {
+
-
background-position: -204px -37px;
+
-
} /*add selectors for the other li's and background-positions*/
+
-
/*hover states*/
+
<div id="4" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none ">
-
#liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a {
+
<div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;">
-
background-position: 0 -73px;
+
-
}
+
-
#liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a {
+
<img id="boximage5" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Twitter.png"></img>
-
background-position: -102px -73px;
+
-
}
+
</div>
-
#liModern a:hover, #liModern:hover a, #liModern.over a {
+
-
background-position: -204px -73px;
+
<div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;">
-
}
+
-
#liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a {
+
<p style="padding-left:10px;"> I'm from Alberta and I'm awesome! </p>
-
background-position: -306px -73px;
+
-
}
+
</div>
 +
 +
</div>
-
#liDigital a:hover, #liDigital:hover a, #liDigital.over a {
 
-
background-position: -408px -73px;
 
-
}
 
-
/*subnav formatting*/
+
</div>
-
#nav li.off ul a, #nav li.on ul a {
 
-
display: block;
 
-
background: #224d6f;
 
-
color: #fff;
 
-
font-family: arial, verdana, sans-serif;
 
-
font-size: small;
 
-
}
 
-
#nav li.on ul a {
+
 
-
background: #f90;
+
<!-- menu bar -->
-
}
+
 +
<div style="width:524px; height:35px; margin-right:auto; margin-left:auto; margin-top:-10px; padding-left:10px; ">
-
</style>
+
-
</head>
+
<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>
-
<body>
+
-
<div id="divNav">
+
<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>
-
<ul id="nav">
+
 +
</div>
-
<li id="liRenaissance" class="off"><a href="#"><span>Renaissance</span></a>
 
-
<ul>
 
-
<li><a href="#">Brunelleschi</a></li>
 
-
<li><a href="#">Alberti</a></li>
 
-
<li><a href="#">Palladio</a></li>
 
-
<li><a href="#">Michelangelo</a></li>
 
-
<li><a href="#">Bramante</a></li>
 
-
</ul></li>
 
-
<li id="liArtNouveau" class="off"><a href="#"><span>Art Nouveau</span></a>
 
-
<ul>
 
-
<li><a href="#">Mackintosh</a></li>
 
-
<li><a href="#">Guimard</a></li>
 
-
<li><a href="#">Horta</a></li>
 
-
<li><a href="#">van de Velde</a></li>
 
-
</ul></li>
 
-
<li id="liModern" class="on"><a href="#"><span>Modern</span></a>
 
-
<ul>
 
-
<li><a href="#">Sullivan</a></li>
 
-
<li><a href="#">Le Corbusier</a></li>
 
-
<li><a href="#">Mies</a></li>
 
-
<li><a href="#">Gropius</a></li>
+
</body>
-
<li><a href="#">Yamasaki</a></li>
+
-
</ul></li>
+
-
<li id="liPostModern" class="off"><a href="#"><span>Postmodern</span></a>
+
-
<ul>
+
-
<li><a href="#">Venturi</a></li>
+
-
<li><a href="#">Eisenman</a></li>
+
-
<li><a href="#">Stern</a></li>
 
-
<li><a href="#">Graves</a></li>
 
-
<li><a href="#">Gehry</a></li>
 
-
</ul></li>
 
-
<li id="liDigital" class="off"><a href="#"><span>Digital</span></a>
 
-
<ul>
 
-
<li><a href="#">Xenakis</a></li>
 
-
 
-
<li><a href="#">Lynn</a></li>
 
-
<li><a href="#">Diller+Scofidio</a></li>
 
-
<li><a href="#">Zellner</a></li>
 
-
<li><a href="#">Hadid</a></li>
 
-
</ul></li>
 
-
</ul></div>
 
-
</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"