"
Team:UPenn
From 2013.igem.org
(Difference between revisions)
m |
m |
||
| Line 11: | Line 11: | ||
$("#tabs li").mouseenter(function(){ | $("#tabs li").mouseenter(function(){ | ||
| - | $(this).css(" | + | |
| + | $(this).css("width","400px"); | ||
}); | }); | ||
$("#tabs li").mouseleave(function(){ | $("#tabs li").mouseleave(function(){ | ||
| - | $(this).css(" | + | $(this).css("width","250px"); }); |
| - | + | ||
}); | }); | ||
| Line 24: | Line 24: | ||
<style> | <style> | ||
| - | #slider-code { height: 300px; overflow:hidden; display: inline;} | + | #slider-code { height: 300px; overflow:hidden; display: inline; } |
| - | #slider-code .viewport { float: left; width: 400px; height: 300px; | + | #slider-code .viewport { float: left; width: 400px; height: 300px; margin-right: 50px; |
overflow: hidden;position:relative; margin-top: 100px; margin-left: 75px; } | overflow: hidden;position:relative; margin-top: 100px; margin-left: 75px; } | ||
| - | #slider-code .buttons { display: block; margin: 30px | + | #slider-code .buttons { display: block; margin: 30px -30px 0 0px; float: left; margin-top:200px; } |
| - | #slider-code .next { margin: | + | #slider-code .next { margin: 20px 0 0 10px; margin-top: 200px; } |
#slider-code .disable { visibility: hidden; } | #slider-code .disable { visibility: hidden; } | ||
#slider-code .overview { list-style: none; position: absolute; | #slider-code .overview { list-style: none; position: absolute; | ||
| Line 34: | Line 34: | ||
#slider-code .overview li{ float: left; margin: 0 20px 0 0; | #slider-code .overview li{ float: left; margin: 0 20px 0 0; | ||
padding: 1px; height: 296px; border: 1px solid #dcdcdc; width: 396px;} | padding: 1px; height: 296px; border: 1px solid #dcdcdc; width: 396px;} | ||
| + | #slider-code .prev { padding-left: 50px} | ||
.outer { | .outer { | ||
| Line 87: | Line 88: | ||
#navigation li { | #navigation li { | ||
height: 20px; | height: 20px; | ||
| - | margin: | + | margin: 30px; |
width: 20px; | width: 20px; | ||
background-color: white; | background-color: white; | ||
| - | -moz-border-radius: 100% | + | -moz-border-radius: 100%; |
-ms-border-radius: 100%; | -ms-border-radius: 100%; | ||
-webkit-border-radius: 100%; | -webkit-border-radius: 100%; | ||
| Line 131: | Line 132: | ||
list-style-type: none; | list-style-type: none; | ||
z-index: 99; | z-index: 99; | ||
| - | left: - | + | left: -330px; |
top: 100px; | top: 100px; | ||
} | } | ||
| + | |||
| + | #tabs li strong { | ||
| + | margin-left: 50px; | ||
| + | } | ||
| + | |||
| + | |||
#tabs li { | #tabs li { | ||
| + | padding: 10px 100px 40px 0px; | ||
| + | text-align: center; | ||
| + | text-align: right; | ||
| + | margin-left: 20px; | ||
background-color: gray; | background-color: gray; | ||
| - | height: | + | height: 30px; |
width: 250px; | width: 250px; | ||
margin: 5px; | margin: 5px; | ||
| - | -moz-border-radius: | + | -moz-border-radius: 6%; |
| - | -ms-border-radius: | + | -ms-border-radius: 6%; |
| - | -webkit-border-radius: | + | -webkit-border-radius: 6%; |
| - | -o-border-radius: | + | -o-border-radius: 6%; |
| - | border-radius: | + | border-radius: 6%; |
| - | + | -webkit-transition: width 0.4s ease; | |
| - | -webkit-transition: | + | -moz-transition: width 0.4s ease; |
| - | -moz-transition: | + | -o-transition: width 0.4s ease; |
| - | -o-transition: | + | transition: width 0.4s ease; |
| - | transition: | + | |
} | } | ||
| Line 164: | Line 174: | ||
<ul id="tabs"> | <ul id="tabs"> | ||
| - | <li>Link</li> | + | <li><h2>Link</h2></li> |
| - | <li> | + | <li><div class="link"><h2>Link</h2></div></li> |
</ul> | </ul> | ||
| Line 180: | Line 190: | ||
<div id="slider-code"> | <div id="slider-code"> | ||
| - | <a class="buttons prev" href="#"><img | + | <a class="buttons prev" href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/e/ef/Aiga_leftarrow_inv.gif" height="30px" width="30px"></a> |
<div class="viewport"> | <div class="viewport"> | ||
<ul class="overview"> | <ul class="overview"> | ||
| Line 188: | Line 198: | ||
</ul> | </ul> | ||
</div> | </div> | ||
| - | <a class="buttons next" href="#"><img | + | <a class="buttons next" href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/7/7d/Aiga_rightarrow_inv.gif" height="30px" width="30px"/></div></a> |
<div class="right"> | <div class="right"> | ||
| - | Put some info here | + | Put some info here |
</div> | </div> | ||
</div> | </div> | ||
Revision as of 13:16, 20 June 2013
Link
Link
Put some info here
