Team:WHU-China/middleleftcss

From 2013.igem.org

(Difference between revisions)
(Created page with "m;l,./")
Line 1: Line 1:
-
m;l,./
+
/* Slider (thanks to flowplayer.org) */
 +
/*************************************/
 +
.scrollable {
 +
/* required settinsg */
 +
position: relative;
 +
overflow :hidden;
 +
    margin-top: 14px;
 +
    width: 963px;
 +
    height: 370px;
 +
    border: 1px solid #FFFFFF;
 +
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 +
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* for the Safari browser */
 +
    background: #FFFFFF;}
 +
.scrollable .items {
 +
/* this cannot be too large */
 +
width: 50000px;
 +
position: absolute;}
 +
.items div {
 +
float: left;
 +
width: 963px;
 +
height: 370px;}
 +
.prev {
 +
        background: url(https://static.igem.org/mediawiki/2011/8/81/DTU-Denmark2011-slider-prev.png) no-repeat;
 +
        height: 74px;
 +
        width: 74px;
 +
        position: absolute;
 +
            left: -518px; /* ceil(963/2) + 74/2 = 482 + 37 = 519 */
 +
            top: 310px;
 +
        margin-left: 50%;
 +
        cursor: pointer;}
 +
.next {
 +
        background: url(https://static.igem.org/mediawiki/2011/5/56/DTU-Denmark2011-slider-next.png) no-repeat;
 +
        height: 74px;
 +
        width: 74px;
 +
        margin-right: 50%;
 +
        position: absolute;
 +
            right: -519px; /* floor(963/2) + 74/2 = 481 + 37 = 518 */
 +
            top: 310px;
 +
        cursor: pointer;}
 +
.disabled {
 +
        visibility: hidden;}
 +
/* position and dimensions of the navigator */
 +
.navi {
 +
    left: -56px;
 +
    margin-left: 50%;
 +
    position: absolute;
 +
    top: 505px;
 +
    width: 112px;}
 +
.navi a {
 +
width: 8px;
 +
height: 8px;
 +
float: left;
 +
margin: 3px;
 +
background: url(https://static.igem.org/mediawiki/2011/7/7e/DTU-Denmark2011-slider-navigator-red.png) 0 0 no-repeat;
 +
/*background: url(https://static.igem.org/mediawiki/2011/2/22/DTU-Denmark2011-slider-navigator-dark.png) 0 0 no-repeat;*/
 +
display: block;
 +
font-size: 1px;}
 +
.navi a:hover {
 +
background-position: 0 -8px;}
 +
.navi a.active {
 +
background-position: 0 -16px;}
 +
 
 +
/* Tooltips (thanks to flowplayer.org) */
 +
/*********************************************/
 +
/*.tooltip {
 +
        z-index: 2;
 +
display:none;
 +
background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow.png);
 +
font-size:14px;
 +
height:70px;
 +
width:160px;
 +
padding:25px;
 +
color:#fff;}
 +
*/

Revision as of 02:31, 11 September 2013

/* Slider (thanks to flowplayer.org) */ /*************************************/ .scrollable { /* required settinsg */ position: relative; overflow :hidden; 

   margin-top: 14px;
   width: 963px;
   height: 370px;
   border: 1px solid #FFFFFF;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* for the Safari browser */
   background: #FFFFFF;}

.scrollable .items { /* this cannot be too large */ width: 50000px; position: absolute;} .items div { float: left; width: 963px; height: 370px;} .prev { 

       background: url(DTU-Denmark2011-slider-prev.png) no-repeat;
       height: 74px;
       width: 74px;
       position: absolute;
           left: -518px; /* ceil(963/2) + 74/2 = 482 + 37 = 519 */
           top: 310px;
       margin-left: 50%;
       cursor: pointer;}

.next { 

       background: url(DTU-Denmark2011-slider-next.png) no-repeat;
       height: 74px;
       width: 74px;
       margin-right: 50%;
       position: absolute;
           right: -519px; /* floor(963/2) + 74/2 = 481 + 37 = 518 */
           top: 310px;
       cursor: pointer;}

.disabled { 

       visibility: hidden;}

/* position and dimensions of the navigator */ .navi { 

   left: -56px;
   margin-left: 50%;
   position: absolute;
   top: 505px;
   width: 112px;}

.navi a { width: 8px; height: 8px; float: left; margin: 3px; background: url(DTU-Denmark2011-slider-navigator-red.png) 0 0 no-repeat; /*background: url(DTU-Denmark2011-slider-navigator-dark.png) 0 0 no-repeat;*/ display: block; font-size: 1px;} .navi a:hover { background-position: 0 -8px;} .navi a.active { background-position: 0 -16px;}

/* Tooltips (thanks to flowplayer.org) */ /*********************************************/ /*.tooltip { 

       z-index: 2;

display:none; background:transparent url(black_arrow.png); font-size:14px; height:70px; width:160px; padding:25px; color:#fff;}

  • /
Retrieved from "http://2013.igem.org/Team:WHU-China/middleleftcss"