CSS/gifu/tab

From 2014.igem.org

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