CSS/gifu/tab

From 2014.igem.org

(Difference between revisions)
 
(141 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%;   
-
text-decoration:none;
+
font-size:16px;
 +
font-family:Calibri;
 +
 
  }
  }
-
.tab-white
+
 
-
{background:url(https://static.igem.org/mediawiki/2014/a/ab/Tab_white.png) no-repeat;
+
 
-
color: #000000;
+
.tab-white:link
-
font-size: 15px;
+
{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;
text-align: center;
vertical-align:100%;
vertical-align:100%;
-
font-family:Century Gothic;
+
width:180px;
-
padding:20px;
+
height:50px;
-
width:100px;
+
padding:15px 15px 15px 15px;
-
height:60px;
+
display:inline;
-
margin:30px;
+
overflow:auto;
 +
}
 +
 
 +
 
 +
.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-decoration:none;
 +
text-align:center;
 +
vertical-align:100%;
 +
width:180px;
 +
height:50px;
 +
padding:15px 15px 15px 15px;
 +
display:inline;
 +
overflow:auto;
}
}
-
.tab-gray
+
.tab-gray:link
-
{background: url(https://static.igem.org/mediawiki/2014/a/ab/Tab_gray.png) no-repeat top;
+
{color:#ffffff;
-
color: #ffffff;
+
background-image:url(https://static.igem.org/mediawiki/2014/8/8a/Tab_gray1.png) ;
-
font-size: 15px;
+
background-repeat:no-repeat;
 +
background-position:center;
 +
text-decoration:none;
text-align: center;
text-align: center;
vertical-align:100%;
vertical-align:100%;
-
font-family:Century Gothic;
+
width:180px;
-
padding:20px;
+
height:50px;
-
width:100px;
+
padding:15px 15px 15px 15px;
-
height:60px;
+
display:inline;
-
margin:30px;
+
overflow:auto;
-
text-decoration:none;
+
}
}
.tab-gray:hover
.tab-gray:hover
-
{background: url(https://static.igem.org/mediawiki/2014/a/ab/Tab_gray.png) no-repeat bottom;
+
{color: #000000;
-
color: #000000;
+
background-image: url(https://static.igem.org/mediawiki/2014/3/3b/Tab_gray2.png);
-
font-size: 15px;
+
background-repeat:no-repeat;
-
text-align: center;
+
background-position:center;
 +
text-decoration:none;
 +
text-align:center;
vertical-align:100%;
vertical-align:100%;
-
font-family:Century Gothic;
+
width:180px;
-
padding:20px;
+
height:50px;
-
width:100px;
+
padding:15px 15px 15px 15px;
-
height:60px;
+
display:inline;
-
margin:30px;
+
overflow:auto;
-
text-decoration:none;
+
}
}
-
 
+
p.tab
-
.tabs {
+
{float:left;}
-
    position: relative;
+
-
    padding: 0;
+
-
margin-left:auto;   
+
-
    margin-right:auto; 
+
-
}
+
-
.tabs li {
+
-
    list-style: none;
+
-
    display: inline-block;
+
-
}
+
-
.tabs input[type=radio] {
+
-
    display: none;
+
-
}
+
-
.tabs label {
+
-
    display: block;
+
-
    cursor: pointer;
+
-
    padding: 5px;
+
-
    line-height: 20px;
+
-
    background-color: #999999;
+
-
    color: #ffffff;
+
-
}
+
-
.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;
+
-
}
+

Latest revision as of 09:55, 17 October 2014

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