VPF::Вёрстка табов с параметром z-index

UniBomb

Дата 26.7.2010, 17:49 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 1754
Регистрация: 24.10.2006
Где: Санкт-Петербург

Репутация: нет
Всего: 97

Добрый день. Имеем панельку с табами:

user posted image

Реализовано это с помощью следующего кода:

Код


<ul>
    <li id="first" class="stab"><span>tab   1</span></li>
    <li><span>tab 2 long</span></li>
    <li><span>tab 3</span></li>
    <li><span>tab 4 long long</span></li>
    <li><span>tab 5 :)</span></li>
</ul>

Код


li, span
{
    z-index: 0;
    background:url(btn.gif) no-repeat;
    display:-moz-inline-stack;
    display:inline-block; /* Эмуляция для FF2 */
    font-size:11px;
    margin-left:-13px;    
}

li
{
    margin-right:25px;
}

span
{
    border:0;
    margin:0;
    padding:0 25px 0 0px;
    position:relative;
    left:25px;
    height:25px;
    line-height:25px;
    background-position:top right;
    white-space:nowrap;    
}

.stab, .stab span
{
    z-index: 2;
    background:url(btn_act.gif) no-repeat;
}
.stab span
{
    background-position:top right;
} 
 

#first, #first span
{
    margin-left: 0px;    
}

Но вся проблема в том, что если выбрать другой таб (отличный от первого), то результат не будет соответствовать моим ожиданиям:

user posted image

Как видно текущая вкладка не меняет своего уровня и по прежнему частично перекрывается предыдущей вкладкой. А очень бы хотелось вот такого:

user posted image

В чём я неправ и как это исправить?

Спасибо за внимание. smile

--------------------

Маэстро пошлости и непотребства

blah

Дата 26.7.2010, 18:24 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

Видимо проблема в отсутствии position:relative; для li, но тогда, исходя из рисунков появится проблема с дефолтным состоянием.

ksnk

Дата 26.7.2010, 18:51 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Цитата(blah @ 26.7.2010, 18:24

)

проблема с дефолтным состоянием.

Что за проблема? Табы будут причесаны на другую сторону?

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

blah

Дата 26.7.2010, 19:21 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

Да. Тут уже либо ручками каждому задать z-index по убыванию либо сделать более гибко, но c js.

ksnk

Дата 26.7.2010, 19:36 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

blah, это не проблема, достаточно ставить relative только для stab-нутого li. Вот заставить все это выглядеть разумно в IE-6+7 будет немного сложнее ;)

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

blah

Дата 26.7.2010, 20:15 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

Брр, да, все верно, сейчас-то все нормально выглядит. Сразу и не заметил.

А для IE-6+7, да и всех остальных просто заменить

Код


display:-moz-inline-stack;
display:inline-block; /* Эмуляция для FF2 */

на float:left со всеми вытекающими.

UniBomb

Дата 27.7.2010, 08:06 (ссылка)

(нет голосов)

Загрузка ...

Новичок

blah, ksnk, спасибо, помогло))

--------------------

Маэстро пошлости и непотребства

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »