Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > не работает background-position

Автор: hetfield 28.6.2009, 14:45

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

Есть у меня менюшка, сделанная вот так

Код


<table id="menu_table" border="0" cellspacing="0" cellpadding="0"><tbody>
        <tr>
            <td><a href="#"><div id="main1" class="menu_a">&nbsp;</div></a></td>
            <td><a href="#"><div id="main2" class="menu_a">&nbsp;</div></a></td>
            <td><a href="#"><div id="main3" class="menu_a">&nbsp;</div></a></td>
            <td><a href="#"><div id="main4" class="menu_a">&nbsp;</div></a></td>
            <td><a href="#"><div id="main5" class="menu_a">&nbsp;</div></a></td>
        </tr>
    </tbody>
    </table>

Стили

Код


div#main1 {width: 100px;  background: url('../images/menu/main1.jpg') no-repeat;}
div#main2 {width: 92px; background: url('../images/menu/main2.jpg')  no-repeat; }
div#main3 {width: 140px; background: url('../images/menu/main3.jpg')  no-repeat; }
div#main4 {width: 117px; background: url('../images/menu/main4.jpg')  no-repeat; }
div#main5 {width: 100px; background: url('../images/menu/main5.jpg')  no-repeat; }


div.menu_a { background-position: 0 2;  }
div.menu_a_hover {  background-position: 0 -21px; }

Проблема в том что классы не срабатывают. То есть если class="menu_a" поменять на class="menu_a_hover" ничего не происходит. Как так? Подскажите..

Автор: bars80080 28.6.2009, 16:31

...

Автор: Violator 30.6.2009, 17:13

hetfield,
у id больше приоритет чем у class
либо через !important указывайте

Код


div.menu_a_hover {  background-position: 0 -21px !important; }

либо в свойствах для id указывайте background-image и background-repeat

Код


div#main1 {width: 100px;  background-image: url('../images/menu/main1.jpg'); background-repeat: no-repeat;}

а лучше будет такой вариант

Код


a#main1 {display: block; width: 100px; height: 20px; background: url('hotel.jpg') no-repeat 0 2px; }
a#main1:hover { background-position: 0 -21px; }