Team:UCC Ireland/slider.css

From 2014.igem.org

(Difference between revisions)

Revision as of 22:50, 12 October 2014

body {

   background-color:#222;
   margin:0 auto;
   font-family:Arial;
   min-height:400px;

}

slider_container {

   width:100%;
   margin:0 auto;
   height:100vh;
   height: -webkit-calc(100vh - 40px);
   height: -moz-calc(100vh - 40px);
   height: calc(100vh - 40px);
   min-height:400px;
   max-height:800px;
   max-width:1201px;

}

slider {

   height:100%;
   overflow:hidden;/*when all of the photos are loaded, we only want to see one photo, all the other ones are hidden*/
   margin:0 auto;

}

   #slider > img { /*> targets img in slider*/
       height:100%;
       /*display:none;*/ /*jquery to fade in and loop through*/            
       display:none;
       margin:auto;
   }

   #slider > div {
       height:100%;
       display:none;
       margin:auto;
       background-position:center;

background-size:cover;/*cover*/

       padding:0px;

padding-top:0px;

       background-origin:padding-box;
       background-color:#777;
   }

slider_container > a { /*you might want different classes but we are targetting all*/

   padding: 5px 10px;
   background-color:#F0F0F0;
   margin-top:30px;
   text-decoration:none;
   color:#666;

}

slider_container > a.left {

   float:left;

}

slider_container > a.right {

   float:right;

}

thumbnailfooter {

   position: fixed;
   bottom: 0;
   width: 100%;
   padding-bottom: 10px;

}

thumbnails {

   margin-left:auto; 
   margin-right:auto;
   width: 810px;

}

   #thumbnails ul {
       display:block;
       background-color:#000;
       margin-left:-30px;
   }

       #thumbnails ul li {
           display:block;
           font-family:Arial;
           float:left;
           margin:0px;
       }
           #thumbnails ul li a {
               opacity:0.8;
           }

           #thumbnails ul li img{
               height:120px;
               float:left;
               margin-left:5px;
           }

slider > div > div.right {

   color:#222;
   float:right;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   width:35%;
   padding-left:10%;
   padding-right:10%;

}

slider > div > div.left {

   color:#222;
   float:left;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   width:35%;
   padding-left:10%;
   padding-right:10%;

}