Team:WHU-China/middleleftcss

From 2013.igem.org

(Difference between revisions)
 
(63 intermediate revisions not shown)
Line 1: Line 1:
-
/* Slider (thanks to flowplayer.org) */
+
/* Redesigning Table Of Content */
-
/*************************************/
+
/********************************/
-
.scrollable {
+
table.toc, #toctitle, .toc #toctitle, #toc .toctitle, .toc .toctitle {
-
/* required settinsg */
+
    text-align: left;}
-
position: relative;
+
.toc{
-
overflow :hidden;
+
  margin-top:44px;width:24%;height:261px;margin-left:-5px;
-
    margin-top: 14px;
+
  background:rgba(255,255,255, 0) none repeat scroll 0 0 !important;
-
    width: 963px;
+
  filter:Alpha(opacity=0); background:#fff;
-
    height: 370px;
+
}
-
    border: 1px solid #FFFFFF;
+
.toc img{
-
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+
  width:278px;height:280px;
-
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* for the Safari browser */
+
}
-
    background: #FFFFFF;}
+
.toc table {
-
.scrollable .items {
+
  margin-left:10px;
-
/* this cannot be too large */
+
  margin-top:-275px;
-
width: 50000px;
+
  width:100%;
-
position: absolute;}
+
  background:rgba(255, 255, 255, 0) none repeat scroll 0 0 !important;
-
.items div {
+
  filter:Alpha(opacity=0); background:#fff;
-
float: left;
+
}
-
width: 963px;
+
.toc table li span{
-
height: 370px;}
+
  position:relative;
-
.prev {
+
}
-
        background: url(https://static.igem.org/mediawiki/2011/8/81/DTU-Denmark2011-slider-prev.png) no-repeat;
+
#toctitle {
-
        height: 74px;
+
    margin: 5px 0;}
-
        width: 74px;
+
.toc, #toc {
-
        position: absolute;
+
    border:0;
-
            left: -518px; /* ceil(963/2) + 74/2 = 482 + 37 = 519 */
+
    margin-top:30px;
-
            top: 310px;
+
    float: left;
-
        margin-left: 50%;
+
    width: 25%;
-
        cursor: pointer;}
+
    padding: 0;}
-
.next {
+
#toc table ul, .toc table ul {
-
        background: url(https://static.igem.org/mediawiki/2011/5/56/DTU-Denmark2011-slider-next.png) no-repeat;
+
    margin: 0 5px 5px 5px;}
-
        height: 74px;
+
.toc table ul li {
-
        width: 74px;
+
    padding-left: 12px;
-
        margin-right: 50%;
+
    text-indent: -12px;
-
        position: absolute;
+
    /*width: 200px;*/}
-
            right: -519px; /* floor(963/2) + 74/2 = 481 + 37 = 518 */
+
.toc table ul li ul li {
-
            top: 310px;
+
    padding-left: 25px;
-
        cursor: pointer;}
+
    text-indent: -24px;
-
.disabled {
+
    /*width: 170px;*/}
-
        visibility: hidden;}
+
#toc table ul ul, .toc table ul ul {
-
/* position and dimensions of the navigator */
+
    margin: 0;}
-
.navi {
+
.stickBelowNavigation {
-
     left: -56px;
+
     position: fixed;
-
     margin-left: 50%;
+
      top: 60px;
-
     position: absolute;
+
     margin-left: -5px;}
-
     top: 505px;
+
.tochidden {
-
     width: 112px;}
+
     float:left;
-
.navi a {
+
     position: static;
-
width: 8px;
+
     left: -200px;
-
height: 8px;
+
    }
-
float: left;
+
.backtop{
-
margin: 3px;
+
    float:left;
-
background: url(https://static.igem.org/mediawiki/2011/7/7e/DTU-Denmark2011-slider-navigator-red.png) 0 0 no-repeat;
+
    position:absolute;
-
/*background: url(https://static.igem.org/mediawiki/2011/2/22/DTU-Denmark2011-slider-navigator-dark.png) 0 0 no-repeat;*/
+
    top:20px;
-
display: block;
+
    width:6%;
-
font-size: 1px;}
+
    height:auto;
-
.navi a:hover {
+
    margin-left:94%;
-
background-position: 0 -8px;}
+
  }
-
.navi a.active {
+
.backtop img, .mainiGEM img{
-
background-position: 0 -16px;}
+
  width:100%;
 +
}
-
/* Tooltips (thanks to flowplayer.org) */
+
 
-
/*********************************************/
+
.stickToBottom{
-
/*.tooltip {
+
    top:88%;
-
        z-index: 2;
+
    position: fixed;
-
display:none;
+
}
-
background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow.png);
+
 
-
font-size:14px;
+
.mainiGEM{
-
height:70px;
+
    z-index:1000;
-
width:160px;
+
    float:right;
-
padding:25px;
+
    position:fixed;
-
color:#fff;}
+
    top:20px;
-
*/
+
    width:5%;
 +
    height:auto;
 +
    margin-left:94%;
 +
  }
 +
.sticktotop{
 +
    float:left;
 +
    margin-left:95%;
 +
    width:5%;
 +
    height:auto;
 +
    margin-top:0;
 +
    position:absolute;
 +
}

Latest revision as of 10:13, 24 September 2013

/* Redesigning Table Of Content */ /********************************/ table.toc, #toctitle, .toc #toctitle, #toc .toctitle, .toc .toctitle { 

   text-align: left;}

.toc{ 

 margin-top:44px;width:24%;height:261px;margin-left:-5px;
 background:rgba(255,255,255, 0) none repeat scroll 0 0 !important;
 filter:Alpha(opacity=0); background:#fff;

} .toc img{ 

 width:278px;height:280px;

} .toc table { 

 margin-left:10px;
 margin-top:-275px;
 width:100%;
 background:rgba(255, 255, 255, 0) none repeat scroll 0 0 !important;
 filter:Alpha(opacity=0); background:#fff;

} .toc table li span{ 

 position:relative;

}

  1. toctitle { 
   margin: 5px 0;}

.toc, #toc { 

   border:0;
   margin-top:30px;
   float: left;
   width: 25%;
   padding: 0;}
  1. toc table ul, .toc table ul { 
   margin: 0 5px 5px 5px;}

.toc table ul li { 

   padding-left: 12px;
   text-indent: -12px;
   /*width: 200px;*/}

.toc table ul li ul li { 

   padding-left: 25px;
   text-indent: -24px;
   /*width: 170px;*/}
  1. toc table ul ul, .toc table ul ul { 
   margin: 0;}

.stickBelowNavigation { 

   position: fixed;
      top: 60px;
   margin-left: -5px;}

.tochidden { 

   float:left;
   position: static;
   left: -200px;
   }

.backtop{ 

   float:left;
   position:absolute;
   top:20px;
   width:6%;
   height:auto;
   margin-left:94%;
  }

.backtop img, .mainiGEM img{ 

 width:100%;

}


.stickToBottom{ 

   top:88%;
   position: fixed;

}

.mainiGEM{ 

   z-index:1000;
   float:right;
   position:fixed;
   top:20px;
   width:5%;
   height:auto;
   margin-left:94%;
  }

.sticktotop{ 

   float:left;
   margin-left:95%;
   width:5%;
   height:auto;
   margin-top:0;
   position:absolute;

}

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