I have created a simple tab system, using css, html and jquey. But I'm having a problem setting the% of the% of tabs.
To get easier to explain I'll post the code here:
function corrige_altura() {
$('.tabs-container').css({
height: $('.tabs:checked + label + div').height() + 80
});
}
$(function(){
corrige_altura();
});/* Container das ABAS */
.tabs-container {
position: relative;
top: 3px;
}
/* ABAS */
input.tabs {
display: none;
}
input.tabs + label + div {
width: 100%;
opacity: 0;
position: absolute;
border: 1px solid #d7d7d7;
top: 40px;
left: 0;
padding: 25px 10px 25px 10px;
}
input.tabs + label + div {
z-index: -1;
}
input.tabs:checked + label + div {
opacity: 1;
z-index: 1;
}
/* Labels */
input.tabs + label {
line-height: 40px;
padding: 0 20px;
float: left;
background: #484848;
color: #ffffff;
cursor: pointer;
margin-right: 1px;
}
input.tabs + label:hover {
color: #ffffff;
background: #fff;
}
input.tabs:checked + label {
color: #000;
background: #f1f1f1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><tablewidth="100%">
<td width="50px" bgcolor="#E6E6FA"> </td>
<td>
<div class="tabs-container">
<!-- ABA 1 -->
<input type="radio" name="tabs" class="tabs" id="tab1" checked>
<label for="tab1">aba1</label>
<div>
asdasdasd
</div>
<!-- ABA 2 -->
<input type="radio" name="tabs" class="tabs" id="tab2" >
<label for="tab2">aba2</label>
<div>
sadsad
</div>
</div>
</td>
<td width="50px" bgcolor="#E6E6FA"> </td>
</table>Well note that when setting:
input.tabs + label + div {width: 100%;}
The tabs overlap the table where it is, I want it to stay on 100% of the screen. But respecting the table where it is.
If anyone can help me, I'll be very grateful.