Team:Calgary/Sandbox

From 2010.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+
<html>
 +
<head>
 +
<style type="text/css" media="all">
-
<!--Color Scheme Blue:4AC6F7, Yellow:F3F778, Green:9ECF3E, White:FFFFFF, Dark Brown:30251A-->
+
#divNav {
 +
background: transparent url(bk-nav.jpg) no-repeat top left;
 +
margin: 0;
 +
padding: 0;
 +
height: 80px;
 +
width: 800px;
 +
}
-
<style type="text/css">
+
#nav {
 +
position: relative;
 +
top: 55px;
 +
height: 80px;
 +
width: 800px;
 +
}
-
#nav {
+
#nav li ul, #nav li ul {
-
font-family:courier;
+
margin: 0;
-
font-style:bold;
+
padding: 0;
 +
}
-
width: 750px; height: 230px;
+
#nav a {
-
background: url(http://i242.photobucket.com/albums/ff10/somerndmguy/image2.png);
+
text-decoration: none;
-
margin: 10px auto; padding: 0;
+
}
-
position: relative;
+
-
}
+
-
#nav li {
+
#nav li { /*float the main list items*/
-
/*floats main list items*/
+
margin: 0;
-
margin: 0;
+
float: left;
-
float: left;
+
display: block;
-
display: block;
+
padding-right: 15px;
-
margin-bottom: 50px;
+
}
-
padding: 0; list-style: none;
+
#nav li ul {
-
position: absolute; top: 0;
+
display: none;
 +
}
-
border: 1px dashed black;
+
#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
-
}
+
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.off, #nav li.on {
+
#nav li.on:hover ul, #nav li.over ul { /*for ie*/
-
margin: 0; padding: 0; list-style: none;
+
background: #224d6f;
-
position: absolute; top: 0;
+
}
-
height: 230px; display: block;
+
#nav li a {
-
}
+
color: #224d6f;
 +
font-weight: bold;
 +
display: block;
 +
width: 93px;
 +
padding: 0;
 +
}
 +
#nav li.on a {
 +
color: #f90;
 +
}
-
#nav a {
+
#nav li.on ul a, #nav li.off ul a {
-
height: 230px;
+
border: 0;
-
display: block;
+
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*/
 +
background: #224d6f;
 +
}
 +
#nav li.on ul {
 +
display: block;
 +
}
-
#homepanel{left: 0; width: 78px;}
+
#nav li.off:hover ul, #nav li.over ul {
-
#teampanel{left: 79px; width: 80px;}
+
display: block;
-
#projectpanel{left: 159px; width: 106px;}
+
z-index: 6000;
-
#notebookpanel{left: 266px; width: 212px;}
+
}
-
#communitypanel{left: 478px; width: 135px;}
+
-
#sponsorspanel{left: 613px; 153px;}
+
 +
#nav li.off a:hover, #nav li.on a:hover {
 +
color: #f90;
 +
}
 +
/*do the image replacement*/
-
#nav li.off ul, #nav li.on ul {
+
#nav li span {
-
/*put the subnavs underneath main navs and hide them*/
+
position: absolute;
-
display: none;
+
left: -9384px;
-
position: absolute;
+
}
-
top: 69px;
+
-
height: 15px;
+
-
left: 0;
+
-
padding-top: 10px;
+
-
}
+
 +
#liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a {
 +
display: block;
 +
position: relative;
 +
height: 26px;
 +
background: url(bk-dropdownMap.gif) no-repeat; /*contains all hover states*/
 +
}
-
#nav li a {
+
/*first, put the initial states in place*/
-
/*affects all links on the list*/
+
-
color: #f90
+
-
font-weight: bold;
+
-
display: block;
+
-
height: 15px;
+
-
width: auto;
+
-
padding: 5px;
+
-
border: solid 1px #4AC6F7;
+
-
}
+
 +
#liRenaissance a {
 +
background-position: 0 0;
 +
}
-
#nav li.on a {
+
#liArtNouveau a {
-
/*change border colour for active area*/
+
background-position: -102px 0;
-
border: 1px solid #9ECF3E;
+
}
-
}
+
 +
#liModern a {
 +
background-position: -204px 0;
 +
}
-
#nav li.on ul a, #nav li.off ul a {
+
#liPostModern a {
-
float: left;
+
background-position: -306px 0;
-
/*cancel inheritance of border on subnav of active area*/
+
}
-
border: 0;
+
-
color: #FF0000;
+
-
width: auto;
+
-
padding-right: 15px;
+
-
}
+
 +
#liDigital a {
 +
background-position: -408px 0;
 +
}
-
#nav li.on ul {
+
/*active area - for this demo - the code could be based on a body class, and probably work better.*/
-
/*display active subnav list*/
+
-
display: block;
+
-
}
+
 +
#liModern.on a {
 +
background-position: -204px -37px;
 +
} /*add selectors for the other li's and background-positions*/
-
#nav li.off:hover ul {
+
/*hover states*/
-
/*displays other topics when the main menu item is hovered over*/
+
-
display: block;
+
-
z-index: 10;
+
-
+
-
}
+
 +
#liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a {
 +
background-position: 0 -73px;
 +
}
-
#nav li.off a:hover, #nav li.off:hover a {
+
#liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a {
-
background: #4AC6F7;
+
background-position: -102px -73px;
-
color: #30251A;
+
}
-
}
+
-
+
 +
#liModern a:hover, #liModern:hover a, #liModern.over a {
 +
background-position: -204px -73px;
 +
}
-
</style>
+
#liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a {
 +
background-position: -306px -73px;
 +
}
 +
#liDigital a:hover, #liDigital:hover a, #liDigital.over a {
 +
background-position: -408px -73px;
 +
}
 +
/*subnav formatting*/
 +
 +
#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;
 +
}
 +
 +
 +
</style>
 +
</head>
-
<body>
 
-
<ul id="nav">
 
-
<li class="off" id="homepanel"><a href="#">Home</a>
 
-
<ul>
 
-
<li><a href="#">News</a></li>
 
-
</ul>
 
-
</li>
 
-
<li class="off" id="teampanel"><a href="#">Team</a>
 
-
<ul>
 
-
<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>
+
<body>
-
<ul>
+
<div id="divNav">
-
<li><a href="#">Project Overview</a></li>
+
<ul id="nav">
-
<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>
+
<li id="liRenaissance" class="off"><a href="#"><span>Renaissance</span></a>
-
<ul>
+
<ul>
-
<li><a href="#">Notebook</a></li>
+
<li><a href="#">Brunelleschi</a></li>
-
<li><a href="#">Parts Submitted</a></li>
+
<li><a href="#">Alberti</a></li>
-
<li><a href="#">Characterization</a></li>
+
<li><a href="#">Palladio</a></li>
-
<li><a href="#">Protocols and Safety</a></li>
+
<li><a href="#">Michelangelo</a></li>
-
</ul>
+
-
</li>
+
-
<li class="off" id="communitypanel"><a href="#">Community</a>
+
<li><a href="#">Bramante</a></li>
-
<ul>
+
</ul></li>
-
<li><a href="#">Ethics</a></li>
+
<li id="liArtNouveau" class="off"><a href="#"><span>Art Nouveau</span></a>
-
<li><a href="#">Outreach</a></li>
+
<ul>
-
<li><a href="#">Gallery</a></li>
+
<li><a href="#">Mackintosh</a></li>
-
</ul>
+
<li><a href="#">Guimard</a></li>
-
</li>
+
<li><a href="#">Horta</a></li>
-
<li class="off" id="sponsorspanel"><a href="#">Sponsors</a></li>
+
<li><a href="#">van de Velde</a></li>
-
</ul>
+
</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>
-
</body>
+
<li><a href="#">Gropius</a></li>
 +
<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>

Revision as of 19:32, 9 June 2010

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