проблема расположения картинок в навигации.

[karolinka3110]

Сделана навигация. на примере http://www.vw.com/specialoffers/en/us/#eos, центральная навигация. Подскажите как сделать чтобы разделитель не выглядывал,когда кнопка переключателя активна.

код CSS. И как сделать,чтобы на активной кнопке цвет текста был активный и не менялся. Подскажите кто может, делаю первый раз и зависла.

  Quote

.activ1{background-image:url(../images/pc2_31.gif);

background-repeat:no-repeat;

width: 125px;

height: 25px;

right:5px;

z-index:5px;

font-family: Arial, Helvetica, sans-serif;

font-size:11px;

font-weight:bold;

color: #5E5E5E;

padding-top:5px;

cursor:default;

}

.passiv1 {background-image: url(../images/pc2_11.gif);

background-repeat:no-repeat;

width: 120px;

height: 25px;

left:5px;

font-family: Arial, Helvetica, sans-serif;

font-size:11px;

font-weight:bold;

color: #403F44;

padding-top:5px;

cursor:pointer;

}

.passiv1_1 {background-image:url(../images/pc2_Eos.gif);

background-repeat:no-repeat;

width: 120px;

height: 25px;

font-family: FranklinGothicHeavyC, FranklinGothicDemiC, FranklinGothicBookC;

font-size:11px;

color: #707070;

padding-top:5px;

cursor:pointer;}

A.menuTabl { font-family: Arial, Helvetica, sans-serif;

font-size:11px;

font-weight:bold;

letter-spacing: 0px;

COLOR: #707070;

cursor:default;}

A.menuTabl:hover { font-family: Arial, Helvetica, sans-serif;

font-size:11px;

font-weight:bold;

color: #010101;

cursor:pointer;}

A.menuTabl:active{ font-family: Arial, Helvetica, sans-serif;

font-size:11px;

font-weight:bold;

color: #5E5E5E;

cursor: default;}

A.menuTabl{ font-family: Arial, Helvetica, sans-serif;

font-size:11px;

font-weight:bold;

color: #5E5E5E;

cursor: default;}

Сам код:

<div id="object1">
 <h1></h1>
 <table class="table1" cellspacing="0" cellpadding="0">
 <tr>
 <td id="td1" onClick="Div_Act(div1, td1);" class="activ1" align="center">
 <a href="#" class="menuTabl">'08 lease special</a> </td> 
 <td id="td2" onClick="Div_Act(div2, td2);" class="passiv1" align="center">
 <a href="#" class="menuTabl">'08 APR special</a></td>
 <td id="td3" onClick="Div_Act(div3, td3);" class="passiv1" align="center">
 <a href="#" class="menuTabl">'07 special</a></td>
 <td id="td4" class="passiv1_1"></td>
 <td width="20px"></td>
 </tr> 
 <tr>
 <td colspan="5"></td> 
 </tr>
 <tr><td colspan="5"></td></tr>
 <tr><td></td>
 <td></td></tr>
 </table>


 <div id="div1" style="display: block; width: 485px; height: 200px;"></div>
 <div id="div2" style="display: none; width: 485px; height: 200px;"></div>
 <div id="div3" style="display: none; width: 485px; height: 200px;"></div>
</div>

[klierik]

попробуйте более конкретизировать вопрос, а то не очень понятно что вы имеете ввиду

[Dimitry Wolotko]

Автор, локализуйте вопрос.

Мне лениво копать _весь_ код.

Хочу проблемный участок - да и уверен, раскапывая проблему вы е? сами решите.

[karolinka3110]

есть 2 класса. активный и неактивный.картинки для меню вырезаны из скриншотов:

  Quote

.activ1{background-image:url(../images/pc2_31.gif);

background-repeat:no-repeat;

width: 125px;

height: 25px;}

.passiv1 {background-image: url(../images/pc2_11.gif);

background-repeat:no-repeat;

width: 120px;

height: 25px;}

и при переключении с активного блока на неактивный нижняя картинка немного вылезает сбоку.а как сделать чтобы накладывалось один на один.?

[YETI]

Ниче не понятно. Картинки разного размера чтоли у вас, и вы хотите чтоб одна кнопка на другую налезала, или что?

[maddogrts]

сделайте одну картинку . И просто меняйте позицию

background: url(../images/pc2_11.gif) no-repeat left top;

background: url(../images/pc2_11.gif) no-repeat right top;

А чтобы было ровно для начала, надо бы их сделать одинаковыми .

А у вас ширина разная, может поэтому и вылазит.

[karolinka3110]

В том то и дело,что вылезает картинка,что меньше размером.как бы вбок уходит.А z-index здесь может помочь как то.?

[YETI]

  karolinka3110 said:

В том то и дело,что вылезает картинка,что меньше размером.как бы вбок уходит.

Это изза того наверно что блок больще чем картинка размером. Попробуйте уменьшать.

  karolinka3110 said:

А z-index здесь может помочь как то.?

Это помоему совсем из другой оперы.

[klierik]

попробуйте сделать что б Обе картинки были одинакового размера (просто в меньшей картинке добавте прозрачные поля.)

[karolinka3110]

Извиняюсь,а как это сделать?про прозрачные поля

[YETI]

в какомнибудь графическом редакторе canvas size или чтонить такое должно быть, увеличьте на сколько надо.