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 xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-
<style>
+
<!--Color Scheme Blue:4AC6F7, Yellow:F3F778, Green:9ECF3E, White:FFFFFF, Dark Brown:30251A-->
 +
 
 +
<style type="text/css">
#nav {
#nav {
-
width: 900px;
+
font-family:courier;
-
height: 250px ;
+
font-style:bold;
-
background: url(http://i242.photobucket.com/albums/ff10/somerndmguy/image1.png);
+
-
margin: 10px auto;
+
-
padding: 0;
+
-
position: relative;
+
}
}
-
 
#nav li {
#nav li {
 +
/*floats main list items*/
margin: 0;
margin: 0;
-
padding: 0;
+
float: left;
-
list-style: none;
+
display: block;
-
position: absolute;
+
margin-bottom: 50px;
-
top: 0;
+
-
}
+
-
 
+
border: 1px dashed black;
-
#nav li, #nav a {
+
-
height: 250px;
+
-
display: block;
+
}
}
-
#homepanel {
+
#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;
left: 0;
-
width: 180px;
+
padding-top: 10px;
}
}
-
#teampanel {
+
#nav li a {
-
left: 181px;
+
/*affects all links on the list*/
-
width: 180px;
+
color: #f90
 +
font-weight: bold;
 +
display: block;
 +
height: 15px;
 +
width: auto;
 +
padding: 5px;
 +
border: solid 1px #4AC6F7;
}
}
-
#projectpanel {
+
#nav li.on a {
-
left: 361px;
+
/*change border colour for active area*/
-
width: 180px;
+
border: 1px solid #9ECF3E;
}
}
-
#extraspanel {
+
#nav li.on ul a, #nav li.off ul a {
-
left: 541px;
+
float: left;
-
width: 180px;
+
/*cancel inheritance of border on subnav of active area*/
 +
border: 0;
 +
color: #FF0000;
 +
width: auto;
 +
padding-right: 15px;
}
}
-
#sponsorspanel {
+
#nav li.on ul {
-
left: 721px;
+
/*display active subnav list*/
-
width: 180px;
+
display: block;
}
}
-
#homepanel a:hover {
+
#nav li.off:hover ul {
-
background: transparent url(http://i242.photobucket.com/albums/ff10/somerndmguy/image1.png) 0 -250px no-repeat;
+
/*displays other topics when the main menu item is hovered over*/
 +
display: block;
 +
z-index: 10;
 +
}
}
-
#teampanel a:hover {
+
#nav li.off a:hover, #nav li.off:hover a {
-
background: transparent url(http://i242.photobucket.com/albums/ff10/somerndmguy/image1.png) -180px -250px no-repeat;
+
background: #4AC6F7;
 +
color: #30251A;
}
}
 +
-
#projectpanel a:hover {
+
</style>
-
background: transparent url(http://i242.photobucket.com/albums/ff10/somerndmguy/image1.png) -360px -250px no-repeat;
+
-
}
+
-
#extraspanel a:hover {
 
-
background: transparent url(http://i242.photobucket.com/albums/ff10/somerndmguy/image1.png) -540px -250px no-repeat;
 
-
}
 
 +
<body>
-
#sponsorspanel a:hover {
 
-
background: transparent url(http://i242.photobucket.com/albums/ff10/somerndmguy/image1.png) -720px -250px no-repeat;
 
-
}
 
 +
<ul id="nav">
 +
<li class="off"><a href="#">Home</a>
 +
<ul>
 +
<li><a href="#">News</a></li>
 +
</ul>
 +
</li>
-
</style>
+
<li class="off"><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"><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>
 +
-
<body>
+
<li class="off"><a href="#">Notebook and Parts</a>
 +
<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>
 +
</li>
-
<ul id="nav">
+
<li class="off"><a href="#">Community</a>
-
<li id="homepanel"><a href="#1"></a></li>
+
<ul>
-
<li id="teampanel"><a href="#2"></a></li>
+
<li><a href="#">Ethics</a></li>
-
<li id="projectpanel"><a href="#3"></a></li>
+
<li><a href="#">Outreach</a></li>
-
<li id="extraspanel"><a href="#4"></a></li>
+
<li><a href="#">Gallery</a></li>
-
<li id="sponsorspanel"><a href="#5"></a></li>
+
</ul>
 +
</li>
 +
 
 +
<li class="off"><a href="#">Sponsors</a></li>
</ul>
</ul>
-
 
-
<br/><br/><br/><br/><br/><br/>
 
-
 
</body>
</body>
-
 
</html>
</html>

Revision as of 23:16, 7 June 2010