Zgodnie z tutorialem na stronie domowej projektu stworzyłem nasępujący kod generujący zakładki
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="style.css" />
.tab {
cursor: pointer;
float: left;
clear: none;
width: 126px;
height: 24px;
line-height: 24px;
color: White;
text-align: center;
margin: 0px 4px;
background-image: url(img/tab.gif);
}
.hover, .active {
background-image: url(img/tab_hover.gif);
}
.tabsContentOuter {
width: 450px;
height: 200px;
border: 1px solid #68660B;
float: left;
clear: none;
}
#tabsContent {
padding: 2px 4px;
}
<script type="text/javascript" src="../js/mintajax.js"></script>
<script type="text/javascript">
function OnLoad() {
var img = new Image();
img.src = "img/tab_hover.gif";
var tabs = mint.gui.CreateTabWidget("tabsContent");
tabs.fading = true;
tabs.activeClass = "active";
tabs.hoverClass = "hover";
tabs.AddItem("tab1", "tab1", "text", "tab1.html");
tabs.AddItem("tab2", "tab2", "text", "tab2.html");
tabs.AddItem("tab3", "tab3", "text", "tab3.html");
mint.fx.Round("tabsContentOuter", "all", "small", true);
}
<div id="tab1" class="tab">Tab #1
</div> <div id="tab2" class="tab">Tab #2
</div> <div id="tab3" class="tab">Tab #3
</div>
<div id="tabsContentOuter" class="tabsContentOuter">
Czy ktoś orientuje się jak pozmieniać style, żeby obramowanie dostosowywało się do wielkości tekstu. Zmainay wysokości na auto nie przynoszą rezultatu. Może ktoś już coś takiego zrobił ? Proszę o pomoc