"

From 2014.igem.org

Revision as of 20:36, 12 October 2014 (view source) PXie (Talk | contribs) ← Older edit		Latest revision as of 18:45, 16 October 2014 (view source) PXie (Talk | contribs)
(8 intermediate revisions not shown)
Line 7:		Line 7:
	#slider_container {		#slider_container {
		+	background-color:#222;
	width:100%;		width:100%;
	margin:0 auto;		margin:0 auto;
		+	height:100vh;
	height: -webkit-calc(100vh - 30px);		height: -webkit-calc(100vh - 30px);
	height: -moz-calc(100vh - 30px);		height: -moz-calc(100vh - 30px);
	height: calc(100vh - 30px);		height: calc(100vh - 30px);
-	height:100vh;
	min-height:400px;		min-height:400px;
	max-height:800px;		max-height:800px;
Line 73:		Line 74:
	margin-left:auto;		margin-left:auto;
	margin-right:auto;		margin-right:auto;
-	width: 810px;	+	width: 766px;
	}		}
Line 80:		Line 81:
	display:block;		display:block;
	background-color:#000;		background-color:#000;
-	margin-left:-30px;	+	margin-left:-5px;
	}		}

---

Latest revision as of 18:45, 16 October 2014

body {

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

}

1. slider_container {

background-color:#222;

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

}

1. 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;
   }

1. 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;

}

1. slider_container > a.left {

   float:left;

}

1. slider_container > a.right {

   float:right;

}

1. thumbnailfooter {

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

}

1. thumbnails {

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

}

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

       #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;
           }

1. slider > div > div.right {

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

}

1. slider > div > div.left {

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

}