CSS/gifu/tab

From 2014.igem.org

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

Latest revision as of 09:55, 17 October 2014

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