Team:Michigan/Test Css

From 2012.igem.org

(Difference between revisions)
 
(76 intermediate revisions not shown)
Line 3: Line 3:
<script type="text/javascript">
<script type="text/javascript">
-
$("#slideshow > div:gt(0)").hide();
 
-
setInterval(function() {  
+
$(function(){
-
  $('#slideshow > div:first')
+
$('.slideshow img:gt(0)')
-
    .fadeOut(1000)
+
        .hide();
-
    .next()
+
setInterval(function(){
-
    .fadeIn(1000)
+
        $('.slideshow :first-child')
-
    .end()
+
        .fadeOut()
-
    .appendTo('#slideshow');
+
        .next('img')
-
}, 6000);
+
        .fadeIn()
 +
        .end()
 +
        .appendTo('.slideshow');}, 6000);
 +
});
Line 26: Line 28:
padding:90px 0 0 0;
padding:90px 0 0 0;
}
}
-
#navigation ul, #navigation li{ list-style:none; padding:0; margin:0 0 0 0; display:inline; }
+
#navigation ul, #navigation li{ list-style:none; padding:0; margin:0; display:inline; }
-
#navigation ul li{ float:left; position:relative; }
+
#navigation ul li{  
 +
        float:left;  
 +
        position:relative;  
 +
 
 +
}
 +
 
#navigation ul li a{  
#navigation ul li a{  
-
display:block;  
+
display:block;
padding:7px 12px;  
padding:7px 12px;  
-
margin:0px;  
+
margin-left:auto;
 +
        margin-right:auto;
font-size:18px;  
font-size:18px;  
white-space:nowrap;  
white-space:nowrap;  
Line 39: Line 47:
}
}
#navigation ul li a:hover{}
#navigation ul li a:hover{}
 +
#navigation ul li ul li a{
 +
width: 75px;
 +
}
 +
#navigation ul ul li a:hover{
 +
        background:#063257;
 +
background-repeat:repeat-x;
 +
        color:#fff080;
 +
background-size:200%;
 +
}
#navigation ul ul{
#navigation ul ul{
position:absolute;  
position:absolute;  
height:-99999px;  
height:-99999px;  
-
left:0px;
+
margin-left:auto;
 +
        margin-right:auto;
opacity: 0; /* Hide sub level */
opacity: 0; /* Hide sub level */
-webkit-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
Line 57: Line 75:
}
}
-
#navigation ul ul ul {  
+
#navigation ul ul ul {
-
position:absolute;  
+
margin-left:auto;
-
top:-99999px;
+
        margin-right:auto;  
-
left:100%;  
+
 
 +
 
opacity: 0;  
opacity: 0;  
-webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */
-webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */
Line 68: Line 87:
border:1px solid #444;
border:1px solid #444;
}
}
-
#navigation ul li:hover>ul{ opacity: 1; position:absolute; top:100%; left:0; }
+
#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;}
#navigation ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497;}
-
#slideshow {  
+
 
 +
.slideshow img { position:absolute; left:10; top:10; }
 +
 
 +
.slideshow {  
     margin: -375px 0px 0px 400px;  
     margin: -375px 0px 0px 400px;  
     position: absolute;  
     position: absolute;  
Line 80: Line 102:
}
}
-
#slideshow > div {
 
-
    position: absolute;
 
-
    top: 10px;
 
-
    left: 10px;
 
-
    right: 10px;
 
-
    bottom: 10px;
 
-
}
 
#footer-box {
#footer-box {
Line 275: Line 290:
<li><a href="blog.html">Team</a>
<li><a href="blog.html">Team</a>
                                             <ul>
                                             <ul>
-
                                               <li><a href="#">Option 1</a></li>
+
                                               <li><a href="#">Option 1 </a></li>
-
                                               <li><a href="#">Option 2</a></li>
+
                                               <li><a href="#">Option 2 </a></li>
                                             </ul>
                                             </ul>
                                         </li>
                                         </li>
Line 286: Line 301:
<li><a href="services.html">Sponsors</a>
<li><a href="services.html">Sponsors</a>
<ul>
<ul>
-
                                               <li><a href="#">Option 1</a></li>
+
                                               <li><a href="#"> Option 1 </a></li>
-
                                               <li><a href="#">Option 2</a></li>
+
                                               <li><a href="#"> Option 2 </a></li>
</ul></li>
</ul></li>
</ul>
</ul>
Line 299: Line 314:
</div>
</div>
-
                                 <div id="slideshow">
+
                                 <div class="slideshow">
-
                                       <div>
+
                                        
                                           <img src="https://static.igem.org/mediawiki/2012/0/0d/Michigan_%29Random_Team_1.png" alt=""></img>
                                           <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" alt=""></img>
                                           <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" alt=""></img>
                                           <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