наш тестовый форум http://lotrrol2age.6bb.ru
выданный вами исходный код: тутачки
проблемы:
- Не надо выделять фоном активную вкладку вместе с содержимым. Только рамочкой. Можно более жирной чем остальное, но необязательно. Фон вкладок должен быть тот же что и вокруг (у нас работает пользовательский стиль оформления форума).
- /Цвет шрифтов вкладок тоже не надо специально обозначать; я ценю что вы постарались нам под дизайн, но не надо. Это я сама устранила/
- Если название вкладки включает два коротких слова (например "Разные разности"), то видно только первое слово. При изменении параметра height (отдельно в блоке или совместно на то же число рх по всей таблице) всё равно первое слово названия вкладки лепится к блоку с содержимым вкладки, остальное добавленное пространство гуляет сверху.
- При увеличении height у меня появилась какая-то полоса наверху, и вся таблица с вкладками уехала своим нижним краем за пределы чего-то там... Я где-то лишний height добавила?
спасите !
вот так я наисправляла ваш код.
( удалила цвет текста и его тень,
увеличила параметр height на 40 рх везде,
написала название Меню 1 = Разные разности )
<style>/* tabs */
.section {
margin: 0;
width: 100%;
height: 100%;
border: none!important;
}
ul.tabs {
height: 70px;
background: none;
border: none;
margin: 0 !important;
overflow: hidden;
z-index-5;
}
.tabs li {
line-height: 70px;
float: left;
margin: 0;
padding: 0;
font-weight: bold;
width: 99px;
cursor: pointer;
border: 1px solid #999;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.tabs li span {
float: left;
padding: 0;
padding-left: 5px;
height: 70px;
}
.tabs li.current {
background: #fff url("адрес картинки") no-repeat;
border-bottom: none!important;
}
.tabs li.current span {
background: url("адрес картинки") 100% 0 no-repeat;
color: #444;
}
.tabs li:hover {
background: url(адрес картинки) no-repeat;
}
.tabs li:hover span {
background: url(адрес картинки) 100% no-repeat;
}
div.box {
border: 1px solid #999;
background: #fff;
padding: 5px 5px;
display: none;
height: 324px;
margin-top: -1px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
div.box.visible {
display: block;
}
div.box:hover {
border: 1px solid #D4D4D4;
}
/* end tabs */
div.begunok {height:100%; width:100%; overflow:auto; overflow-x:hidden;}
</style>
<table border="0" cellspacing="0" cellpadding="0" style="width: 930px; height: 355px;">
<tr>
<td style="width: 606px; height: 355px;">
<!-- Вкладки и их содержимое -->
<div class="section">
<ul class="tabs">
<li class="current"><span>Разные разности</span></li>
<li><span>Меню 2</span></li>
<li><span>Меню 3</span></li>
<li><span>Меню 4</span></li>
<li><span>Меню 5</span></li>
<li><span>Меню 6</span></li>
</ul>
<div class="box visible">
<div class="begunok">
содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками)
</div>
</div>
<div class="box">
<div class="begunok">содержание меню 2
</div>
</div>
<div class="box">
<div class="begunok">содержание меню 3
</div>
</div>
<div class="box">
<div class="begunok">содержание меню 4
</div>
</div>
<div class="box">
<div class="begunok">содержание меню 5
</div>
</div>
<div class="box">
<div class="begunok">содержание меню 6
</div>
</div>
</div>
</td>
<td style="width: 324px; height: 355px;" valign="top">
<div style="padding: 5px;">
тут будут всякие тексты <br>
......<br>
тут будут всякие тексты <br>
......<br>
тут будут всякие тексты <br>
......<br>
</div>
</td>
</tr>
</table>
