CSS/gifu/tab

From 2014.igem.org

(Difference between revisions)
 
(171 intermediate revisions not shown)
Line 11: Line 11:
#tab{
#tab{
clear:both;
clear:both;
-
margin-left:auto;     
+
margin-left:auto;     
-
    margin-right:auto;   
+
margin-right:auto;   
-
    text-align:left;     
+
text-align:left;     
 +
 
     width:70%;   
     width:70%;   
 +
font-size:16px;
 +
font-family:Calibri;
 +
  }
  }
-
.tab-protocol-white
 
-
{background:#000000 url(https://static.igem.org/mediawiki/2014/5/53/Tab_white_protocol.png) no-repeat;
 
-
width:100px;
 
-
height;60px;
 
-
margin-right:5px;
 
-
margin-top:30px;
 
-
text-decolation:none;
 
-
z-index:2;}
+
.tab-white:link
-
 
+
{color:#000000;
-
.tab-calender-gray
+
background-image:url(https://static.igem.org/mediawiki/2014/a/ab/Tab_white.png);
-
{background:#000000 url(https://static.igem.org/mediawiki/2014/2/23/Tab_gray_calender.png) no-repeat center top;
+
background-repeat:no-repeat ;
-
width:100px;
+
background-position:center;
-
height:60px;
+
text-decoration:none;
-
margin-top:30px;
+
text-align: center;
-
z-index:2;
+
vertical-align:100%;
 +
width:180px;
 +
height:50px;
 +
padding:15px 15px 15px 15px;
 +
display:inline;
 +
overflow:auto;
}
}
-
.tab-calender-gray:hover
 
-
{background:#000000 url(https://static.igem.org/mediawiki/2014/2/23/Tab_gray_calender.png) no-repeat center bottom;
 
-
width:100px;
 
-
height:60px;
 
-
z-index:2;}
 
 +
.tab-white:hover
 +
{color:#000000;
 +
background-image:url(https://static.igem.org/mediawiki/2014/a/ab/Tab_white.png);
 +
background-repeat:no-repeat;
 +
background-position:center;
 +
text-decoration:none;
 +
text-align:center;
 +
vertical-align:100%;
 +
width:180px;
 +
height:50px;
 +
padding:15px 15px 15px 15px;
 +
display:inline;
 +
overflow:auto;
 +
}
-
.tabs {
+
.tab-gray:link
-
    position: relative;
+
{color:#ffffff;
-
    padding: 0;
+
background-image:url(https://static.igem.org/mediawiki/2014/8/8a/Tab_gray1.png) ;
-
margin-left:auto;  
+
background-repeat:no-repeat;
-
    margin-right:auto;  
+
background-position:center;
 +
text-decoration:none;
 +
text-align: center;
 +
vertical-align:100%;
 +
width:180px;
 +
height:50px;
 +
padding:15px 15px 15px 15px;
 +
display:inline;
 +
overflow:auto;
}
}
-
.tabs li {
+
 
-
    list-style: none;
+
.tab-gray:hover
-
    display: inline-block;
+
{color: #000000;
-
}
+
background-image: url(https://static.igem.org/mediawiki/2014/3/3b/Tab_gray2.png);  
-
.tabs input[type=radio] {
+
background-repeat:no-repeat;
-
    display: none;
+
background-position:center;
-
}
+
text-decoration:none;
-
.tabs label {
+
text-align:center;
-
    display: block;
+
vertical-align:100%;
-
    cursor: pointer;
+
width:180px;
-
    padding: 5px;
+
height:50px;
-
    line-height: 20px;
+
padding:15px 15px 15px 15px;
-
    background-color: #999999;
+
display:inline;
-
    color: #ffffff;
+
overflow:auto;
-
}
+
-
.tabs label:hover {
+
-
    background-color: #cccccc;
+
-
    color: #000000;
+
-
}
+
-
.tabs input[type=radio]:checked + label {
+
-
    background-color: #ffffff;
+
-
    color: #000000;
+
-
}
+
-
.tabs .contents {
+
-
    display: none;
+
-
    position: absolute;
+
-
    top:30px;
+
-
    left: 0;
+
-
    padding: 10px;
+
-
    background: #f0f8ff;
+
-
}
+
-
.tabs input[type=radio]:checked + label + .contents{
+
-
    display: block;
+
}
}
 +
 +
p.tab
 +
{float:left;}

Latest revision as of 09:55, 17 October 2014

Retrieved from "http://2014.igem.org/CSS/gifu/tab"