Team:Michigan/Test Css

From 2012.igem.org

(Difference between revisions)
 
(153 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<script>
 
-
$("#slideshow > div:gt(0)").hide();
 
-
setInterval(function() {
 
-
  $('#slideshow > div:first')
 
-
    .fadeOut(1000)
 
-
    .next()
 
-
    .fadeIn(1000)
 
-
    .end()
 
-
    .appendTo('#slideshow');
 
-
},  6000);
 
-
$(function () {
+
<script type="text/javascript">
-
$(‘.dropdown’).each(function () {
+
$(function(){
-
$(this).parent().eq(0).hoverIntent({
+
$('.slideshow img:gt(0)')
-
timeout: 100,
+
        .hide();
-
over: function () {
+
setInterval(function(){
-
var current = $(‘.dropdown:eq(0)’, this);
+
        $('.slideshow :first-child')
-
current.slideDown(100);
+
        .fadeOut()
-
},
+
        .next('img')
-
out: function () {
+
        .fadeIn()
-
var current = $(‘.dropdown:eq(0)’, this);
+
        .end()
-
current.fadeOut(200);
+
        .appendTo('.slideshow');}, 6000);
-
}
+
-
});
+
});
});
-
$(‘.dropdown a’).hover(function () {
 
-
$(this).stop(true).animate({paddingLeft: ’35px’}, {speed: 100, easing: ‘easeOutBack’});
 
-
}, function () {
 
-
$(this).stop(true).animate({paddingLeft: ’0′}, {speed: 100, easing: ‘easeOutBounce’});
 
-
});
 
-
pic1 = new Image(310, 672);
 
-
pic1.src = “images/dropdown.png”;
 
-
 
-
pic2 = new Image(4, 40);
 
-
pic2.src = “images/dropselectionleft.png”;
 
-
 
-
pic3 = new Image(394, 40);
 
-
pic3.src = “images/dropselectionright.png”;
 
-
 
-
});
 
</script>
</script>
 +
<head>
<style type="text/css">
<style type="text/css">
-
#menu
+
div#navigation{
-
{
+
/* Old browsers */
-
position: fixed;
+
border-radius: 0px;
-
z-index: 5;
+
padding:90px 0 0 0;
-
top: 0;
+
-
left: 0;
+
-
width: 100%;
+
-
height: 40px;
+
-
line-height: 40px;
+
-
background: #ffb35a url(images/topbg.gif) repeat-x;
+
-
border-bottom: 1px solid #000;
+
}
}
 +
#navigation ul, #navigation li{ list-style:none; padding:0; margin:0; display:inline; }
 +
#navigation ul li{
 +
        float:left;
 +
        position:relative;
-
#menu ul
 
-
{
 
-
margin: 0 auto;
 
}
}
-
#menu ul li.hasmore
+
#navigation ul li a{  
-
{
+
-
background: url(images/drophighlight.png) no-repeat center 27px;
+
-
}
+
-
#menu ul li h4
+
display:block;
-
{
+
padding:7px 12px;
-
margin: 0;
+
margin-left:auto;
-
}
+
        margin-right:auto;
 +
font-size:18px;
 +
white-space:nowrap;
 +
border-radius:1px;
-
#menu ul li h4 a
 
-
{
 
-
font-size: 14px;
 
-
color: #000;
 
-
font-weight: bold;
 
-
padding: 0 15px;
 
}
}
-
 
+
#navigation ul li a:hover{}
-
#menu ul li a
+
#navigation ul li ul li a{
-
{
+
width: 75px;
-
color: #9b2021;
+
-
padding-left: 4px;
+
}
}
-
 
+
#navigation ul ul li a:hover{
-
#menu ul li a img
+
        background:#063257;
-
{
+
background-repeat:repeat-x;
-
vertical-align: middle;
+
        color:#fff080;
 +
background-size:200%;
}
}
 +
#navigation ul ul{
 +
position:absolute;
 +
height:-99999px;
 +
margin-left:auto;
 +
        margin-right:auto;
 +
opacity: 0; /* Hide sub level */
 +
-webkit-transition: opacity .5s ease-in-out;
 +
-moz-transition: opacity .5s ease-in-out;
 +
-o-transition: opacity .5s ease-in-out;
 +
z-index:497;
 +
background:#fff080;
 +
padding: 0px;
 +
border:1px solid #063257;
 +
border-top:1px solid #063257;
 +
box-shadow:#111 0 3px 4px;
 +
border-bottom-left-radius:2px;
 +
border-bottom-right-radius:2px;
-
#menu ul li a:hover
 
-
{
 
-
background: url(images/topselectionleft.png) top left no-repeat;
 
}
}
 +
#navigation ul ul ul {
 +
margin-left:auto;
 +
        margin-right:auto;
-
#menu ul li a span
 
-
{
 
-
display: block;
 
-
padding: 0 15px 0 11px;
 
-
}
 
-
#menu ul li a:hover span
+
opacity: 0;
-
{
+
-webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */
-
background: url(images/topselectionright.png) top right;
+
-moz-transition: opacity .5s ease-in-out;
 +
-o-transition: opacity .5s ease-in-out;
 +
border-radius:6px;
 +
border:1px solid #444;
}
}
 +
#navigation ul li:hover>ul{ opacity: 1; position:absolute; top:100%; left:0; }
 +
#navigation ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497;}
-
#menu ul.dropdown
 
-
{
 
-
padding: 10px;
 
-
background-image: url(images/dropdown.png);
 
-
overflow:hidden;
 
-
border-bottom: 1px solid #dc902f;
 
-
width: 290px;
 
-
}
 
-
#menu ul.dropdown li a
+
.slideshow img { position:absolute; left:10; top:10; }
-
{
+
-
border-bottom: 1px solid #e5cd8e;
+
-
line-height: 30px;
+
-
overflow: hidden;
+
-
height: 30px;
+
-
}
+
-
 
+
-
#menu ul.dropdown li.last a
+
-
{
+
-
border-bottom-width: 0;
+
-
}
+
-
 
+
-
#menu ul.dropdown li a:hover
+
-
{
+
-
background: url(images/menuarrow.png) no-repeat left center;
+
-
}
+
-
 
+
-
#menu ul li h4 a:hover
+
-
{
+
-
background-image: none;
+
-
}
+
-
#slideshow {  
+
.slideshow {  
     margin: -375px 0px 0px 400px;  
     margin: -375px 0px 0px 400px;  
     position: absolute;  
     position: absolute;  
Line 153: Line 102:
}
}
-
#slideshow > div {
 
-
    position: absolute;
 
-
    top: 5px;
 
-
    left: 5px;
 
-
    right: 5px;
 
-
    bottom: 5px;
 
-
}
 
#footer-box {
#footer-box {
Line 236: Line 178:
width:962px;
width:962px;
margin:0 auto ;
margin:0 auto ;
-
height:126px;
+
height:124px;
padding:0px 0px 0;
padding:0px 0px 0;
}
}
Line 313: Line 255:
         padding: 0px 16px 50px;
         padding: 0px 16px 50px;
}
}
-
/*------------------------- Footer ------------------------*/
+
 
Line 320: Line 262:
-
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Xayona Website Template</title>
<title>Xayona Website Template</title>
Line 331: Line 272:
<div class="page">
<div class="page">
<div class="header">
<div class="header">
-
<a href="https://2012.igem.org" alt="iGEM home page"><img src="https://static.igem.org/mediawiki/2012/8/83/Igem_icon.png" style="position:absolute;right:0;top:0;"></a>
+
<a href="https://2012.igem.org"><img src="https://static.igem.org/mediawiki/2012/8/83/Igem_icon.png" style="position:absolute;right:0;top:0;" alt=""></img></a>
<a href="index.html" id="logo"><img src="https://static.igem.org/mediawiki/2012/c/c2/Michigan_2012_Logo_ani.gif" alt=""/></a>
<a href="index.html" id="logo"><img src="https://static.igem.org/mediawiki/2012/c/c2/Michigan_2012_Logo_ani.gif" alt=""/></a>
                                 <a href="index.html" id="name"><img src="https://static.igem.org/mediawiki/2012/5/5f/Michigan_2012_Site_name.png" alt=""/></a>
                                 <a href="index.html" id="name"><img src="https://static.igem.org/mediawiki/2012/5/5f/Michigan_2012_Site_name.png" alt=""/></a>
 +
                        <div id="navigation">
<ul>
<ul>
-
<li class="selected"><a href="index.html">Project</a></li>
+
<li class="selected"><a href="index.html">Project</a>
-
<li><a href="about.html">Notebook</a></li>
+
<ul>
-
<li><a href="blog.html">Team</a></li>
+
                                              <li><a href="#">Option 1</a></li>
-
<li><a href="services.html">Safety</a></li>
+
                                              <li><a href="#">Option 2</a></li>
-
<li><a href="services.html">Sponsors</a></li>
+
</ul></li>
 +
<li><a href="about.html">Notebook</a>
 +
                                            <ul>
 +
                                              <li><a href="#">Option 1</a></li>
 +
                                              <li><a href="#">Option 2</a></li>
 +
                                            </ul>
 +
                                        </li>
 +
<li><a href="blog.html">Team</a>
 +
                                            <ul>
 +
                                              <li><a href="#">Option 1 </a></li>
 +
                                              <li><a href="#">Option 2 </a></li>
 +
                                            </ul>
 +
                                        </li>
 +
<li><a href="services.html">Safety</a>
 +
<ul>
 +
                                              <li><a href="#">Option 1</a></li>
 +
                                              <li><a href="#">Option 2</a></li>
 +
</ul></li>
 +
<li><a href="services.html">Sponsors</a>
 +
<ul>
 +
                                              <li><a href="#"> Option 1 </a></li>
 +
                                              <li><a href="#"> Option 2 </a></li>
 +
</ul></li>
</ul>
</ul>
-
+
-
                        <div id=”menu”>
+
-
                                <ul class=”tabs”>
+
-
                                    <li class=”hasmore”><a href=”#”><span>Project</span></a>
+
-
                                    <ul class=”dropdown”>
+
-
                                    <li><a href=”#”>Menu item 1</a></li>
+
-
                                    <li><a href=”#”>Menu item 2</a></li>
+
-
                                    <li><a href=”#”>Menu item 3</a></li>
+
-
                                    <li><a href=”#”>Menu item 4</a></li>
+
-
                                    <li><a href=”#”>Menu item 5</a></li>
+
-
                                    <li class=”last”><a href=”#”>Menu item 6</a></li>
+
-
                                    </ul>
+
-
                                    </li>
+
-
                                    <li class=”hasmore”><a href=”#”><span>Notebook</span></a>
+
-
                                    <ul class=”dropdown”>
+
-
                                    <li><a href=”#”>Menu item 1</a></li>
+
-
                                    <li><a href=”#”>Menu item 2</a></li>
+
-
                                    <li><a href=”#”>Menu item 3</a></li>
+
-
                                    <li><a href=”#”>Menu item 4</a></li>
+
-
                                    <li><a href=”#”>Menu item 5</a></li>
+
-
                                    <li class=”last”><a href=”#”>Menu item 6</a></li>
+
-
                                    </ul>
+
-
                                    </li>
+
-
                                    <li class=”hasmore”><a href=”#”><span>Team</span></a>
+
-
                                    <ul class=”dropdown”>
+
-
                                    <li><a href=”#”>Menu item 1</a></li>
+
-
                                    <li><a href=”#”>Menu item 2</a></li>
+
-
                                    <li><a href=”#”>Menu item 3</a></li>
+
-
                                    <li><a href=”#”>Menu item 4</a></li>
+
-
                                    <li><a href=”#”>Menu item 5</a></li>
+
-
                                    <li class=”last”><a href=”#”>Menu item 6</a></li>
+
-
                                    </ul>
+
-
                                    </li>
+
-
                                    <li class=”hasmore”><a href=”#”><span>Safety</span></a>
+
-
                                    <ul class=”dropdown”>
+
-
                                    <li><a href=”#”>Menu item 1</a></li>
+
-
                                    <li><a href=”#”>Menu item 2</a></li>
+
-
                                    <li><a href=”#”>Menu item 3</a></li>
+
-
                                    <li><a href=”#”>Menu item 4</a></li>
+
-
                                    <li><a href=”#”>Menu item 5</a></li>
+
-
                                    <li class=”last”><a href=”#”>Menu item 6</a></li>
+
-
                                    </ul>
+
-
                                    </li>
+
-
                                    <li class=”hasmore”><a href=”#”><span>Sponsors</span></a>
+
-
                                    <ul class=”dropdown”>
+
-
                                    <li><a href=”#”>Menu item 1</a></li>
+
-
                                    <li><a href=”#”>Menu item 2</a></li>
+
-
                                    <li><a href=”#”>Menu item 3</a></li>
+
-
                                    <li><a href=”#”>Menu item 4</a></li>
+
-
                                    <li><a href=”#”>Menu item 5</a></li>
+
-
                                    <li class=”last”><a href=”#”>Menu item 6</a></li>
+
-
                                    </ul>
+
-
                                    </li>                                 
+
</div>
</div>
</div>
</div>
Line 399: Line 311:
<div id="featured">
<div id="featured">
<h3>Sometimes changes need to be made and with that comes a switch; and a terrible pun.</h3>
<h3>Sometimes changes need to be made and with that comes a switch; and a terrible pun.</h3>
-
<p>Team Michigan is engineering a novel, tightly controlled and inducible protein expression system in Escherichia coli in order to demonstrate that we can create robust boolean genetic control circuits that do not continuously rely on the presence of signaling compounds. We are using two unidirectional recombinases found in pathogenic Escherichia coli, Hbif, and FimE, to manipuulate promoter orientation.</p>
+
<p>Team Michigan is engineering a novel, tightly controlled and inducible protein expression system in Escherichia coli in order to demonstrate that we can create robust boolean genetic control circuits that do not continuously rely on the presence of signaling compounds. We are using two unidirectional recombinases found in pathogenic Escherichia coli, Hbif, and FimE, to manipulate promoter orientation.</p>
</div>
</div>
-
                                 <div id="slideshow">
+
                                 <div class="slideshow">
-
                                       <div>
+
                                        
-
                                           <img src="https://static.igem.org/mediawiki/2012/0/0d/Michigan_%29Random_Team_1.png">
+
                                           <img src="https://static.igem.org/mediawiki/2012/0/0d/Michigan_%29Random_Team_1.png" alt=""></img>
-
                                      </div>
+
                                     
-
                                       <div>
+
                                        
-
                                           <img src="https://static.igem.org/mediawiki/2012/a/a0/Michigan_Random_Team_2.png">
+
                                           <img src="https://static.igem.org/mediawiki/2012/a/a0/Michigan_Random_Team_2.png" alt=""></img>
-
                                      </div>
+
                                        
-
                                       <div>
+
                                     
-
                                           <img src="https://static.igem.org/mediawiki/2012/b/bc/Michigan_Random_Team_3.png">
+
                                           <img src="https://static.igem.org/mediawiki/2012/b/bc/Michigan_Random_Team_3.png" alt=""></img>
-
                                      </div>
+
                                     
                                 </div>
                                 </div>
        </div>
        </div>

Latest revision as of 00:35, 7 August 2012

Xayona Website Template

Retrieved from "http://2012.igem.org/Team:Michigan/Test_Css"