Hi =)
i write this message cuz i need help with some code of TABs that i found here:
http://css3pie.com/demos/tabs/, i'm using this tabs, and i do some changes in the HTML markup only, this change:
i'm trying to show the first tag, and the first content, but all the content appear in the first content, well can see here:
http://animevip.net/america-tv-online/ , i integrate the pie in wordpress, well thanks in advance =)
maybe i'm doing wrong something
Code:
<div class="tabBox">
<ul class="tabs">
<li class="selected"><a href="#tab1">Tab One</a></li>
<li><a href="#tab2">Tab Two</a></li>
<li><a href="#tab3">Tab Three</a></li>
</ul>
<div class="content">
<div id="tab1" class="content">This is tab 1.</div>
<div id="tab2" class="content">More content in tab 2.</div>
<div id="tab3" class="content">tab 2 here. </div>
</div>
</div>
i don't touch yet CSS:
Code:
.tabBox .tabs {
margin: 0;
padding: 0 10px;
overflow: hidden;
margin-bottom: -1px;
height: 2.25em;
}
.tabBox .tabs li {
float: left;
list-style: none;
margin: 0;
padding: .25em .25em 0;
height: 2em;
overflow: hidden;
position: relative;
z-index: 1;
border-bottom: 1px solid #FFF;
}
.tabBox .tabs li.selected {
z-index: 3;
}
.tabBox .tabs a {
float: left;
height: 2em;
line-height: 2em;
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
background: #EEE;
border: 1px solid #CCC;
border-bottom: 0;
padding: 0 10px;
color: #000;
text-decoration: none;
behavior: url(PIE.htc);
}
.tabBox .tabs .selected a {
background: #FFF;
-webkit-box-shadow: #CCC 0 0 .25em;
-moz-box-shadow: #CCC 0 0 .25em;
box-shadow: #CCC 0 0 .25em;
}
.tabBox .tabs a:hover {
background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
background: -webkit-linear-gradient(#EEF, #FFF 70%);
background: -moz-linear-gradient(#EEF, #FFF 70%);
background: -ms-linear-gradient(#EEF, #FFF 70%);
background: -o-linear-gradient(#EEF, #FFF 70%);
background: linear-gradient(#EEF, #FFF 70%);
-pie-background: linear-gradient(#EEF, #FFF 70%);
}
.tabBox .content {
clear: left;
position: relative;
z-index: 2;
padding: 2em 1em;
border: 1px solid #CCC;
background: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: #CCC 0 0 .25em;
-moz-box-shadow: #CCC 0 0 .25em;
box-shadow: #CCC 0 0 .25em;
behavior: url(PIE.htc);
}
Forums
