есть уже практически готовое решение..
но в верстке есть одно но
у закладок язычок (который справа) всегда должен вылезать поверх следующей закладки
КРОМЕ случая когда дельше идет активная закладка
код выдает jQuery.. я записал вариант кода который получается как раз после обработки скриптом
в HTML файле желательно (но не обязательно) ничего не менять..
я там пробовал и z-index и вроде все значения верные ввожу.. но никак и все тут
помогите плиззз.. я уже всю голову себе сломал как это сделать
исходный код с картинками приложил архивом к письму
HTML
Код:
<div style="margin:5px; padding:5px; width:500px; border:1px solid #aaa">
<ul class="ui-tabs-nav">
<li style='float:left;list-style:none'><a href='#news'>Новости</a><span> </span></li>
<li style='float:left;list-style:none' class="ui-tabs-selected"><a href='#spletni'>Сплетни</a><span> </span></li>
<li style='float:left;list-style:none'><a href='#reviews'>Обзоры</a><span> </span></li>
<li style='float:left;list-style:none'><a href='#interviews'>Интервью</a><span> </span></li>
<li style='float:left;list-style:none'><a href='#polls'>Опросы</a><span class='last-tab-span'> </span></li>
</ul>
<div class="hr" style="margin: 0 6px 0 6px; padding: 0 0 5px 0; position:relative; z-index:1000; background:#fff"> </div>
</div>
CSS
Код:
/* Skin */
.ui-tabs-nav {
font-size: 12px;
list-style: none;
margin: 0; position:relative; z-index:1;
padding: 7px 0 0 18px;
}
/* for all tabs */
.ui-tabs-nav li {
position:relative; float:left; z-index:100;
margin:0; padding:0; padding-right:10px; margin-right:11px;
background:#fff url('tabs_bg.gif') top left repeat-x;
list-style:none; list-style-image: none;
margin-left:-11px;
}
.ui-tabs-nav li a {
float:left; padding:3px 2px 3px 7px; top:0; left:-2px; z-index:1;
text-decoration: none; display:block; position:relative;
background:url('tabs_l.gif') top left no-repeat;
}.ui-tabs-nav li a:link, .ui-tabs-nav li a:visited { color: #094d6d }
.ui-tabs-nav li span {
display:block; position:absolute; z-index:300;
right:-15px; top:0; height:25px; width:25px;
background:url('tabs_r.gif') top right no-repeat;
}
.ui-tabs-nav li span.last-tab-span { background:url('tabs_end.gif') top right no-repeat }
/* for selected tab */
.ui-tabs-nav li.ui-tabs-selected { background:#e6e8ed url('tabs_act_bg.gif') top left repeat-x; z-index:200; }
.ui-tabs-nav li.ui-tabs-selected a { z-index:400; background:url('tabs_act_l.gif') top left no-repeat; font-weight:bold; cursor:default }
.ui-tabs-nav li.ui-tabs-selected span { z-index:400; background:url('tabs_act_r.gif') top right no-repeat }
.ui-tabs-nav li.ui-tabs-selected span.last-tab-span { background:url('tabs_act_end.gif') top right no-repeat }
/* for IE hack */
* html .ui-tabs-nav { margin-left:12px }
* html .ui-tabs-nav li span { top:-1px; right:-16px }
* html .ui-tabs-nav a { left:-2px }
:first-child+html .ui-tabs-nav li span { top:-1px }
:first-child+html .ui-tabs-nav a { left:-2px }
html>body .ui-tabs-nav li span { top:-1px }
html>body .ui-tabs-nav a { left:-2px }
/* don't change */
div.hr{
border-top: 1px solid #c7c7c7;
border-bottom:none;
font-size:1px;
height:1px;
line-height:1px;
margin: 5px 0;
clear:both;
}