Проблема с вертикалью в background-position

gart · June 26, 2011

Здравствуйте. Извелся уже)

вот листинг:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<style type="text/css">
 #images_carrier {
    height:270px;
    background: url(images_shadow.png) no-repeat center bottom;
    padding:35px 0;wp-content
    margin: 0 auto;
}
#images_carrier #images {
    background: url(menu2.jpg) no-repeat;
    width:804px;
    height: 272px;
    margin: 0 auto;
    font-size:0px;
}
#images_carrier #images .item {
    width:268px;
    height:20px;
    display: inline-block;
    text-align:center;
    font-size:12px;
    color:#fff;
    text-decoration:none;
    padding-top: 116px;
    background-image: url(menu2.jpg);
    background-repeat: no-repeat;
}
#images_carrier #images .item#expl:hover {
    background-position:268px -544px;}
#images_carrier #images .item#land {
    background: url(menu2.jpg) no-repeat 532px -272px;}
#images_carrier #images #bargrein:hover {
    background: url(menu2.jpg) no-repeat 0 bottom;}
#images_carrier #images #maf:hover {
    background: url(menu2.jpg) no-repeat 268px bottom;}
#images_carrier #images .item#outdoor:hover {
    background: url(menu2.jpg) no-repeat 532px bottom;}
</style>
</head>

<body>
<div id="images_carrier">
        <div id="images">
            <a href="#" class="item">Услуги БТИ</a>
            <a href="#" class="item" id="expl">Ввод в эксплуатацию</a>
            <a href="#" class="item" id="land">Земельные вопросы</a>
            <a href="#" class="item" id="bargrein">Юридическое сопровождение сделок</a>
            <a href="#" class="item" id="maf">Малые архитектурные формы (МАФ)</a>
            <a href="#" class="item" id="outdoor">Согласование наружной рекламы</a>
        </div>
    </div>
</body>
</html>

Феноменально не работает позиционирование фона по вертикали. При чем, как видите, в идентфикаторе bargrein - работает (полагаю, что из-за 0 по горизонтали) - в аналогичном maf - уже нет.

Гляньте, буду оч признателен. может туплю просто в чем-то, но уже 3 час не соображу.

Спасибо.

ах да, картинка - http://pravovest.kiev.ua/wp-content/themes/pravovest/images/menu2.jpg

Edited June 27, 2011 by gart

ctpz · June 26, 2011

Теги для кода специальные есть. Проявляйте уважение к людям.

gart · June 26, 2011

Теги для кода специальные есть. Проявляйте уважение к людям.

уже, сорри, первый раз

gart · June 27, 2011

могу дать ссылку на сайт - нужно?

Bonzash · June 27, 2011

давай

gart · June 27, 2011

давай

http://pravovest.kiev.ua/ - вот, там сейчас, как и в листинге - разные варианты - ни один не работает о_0

я никак не соображу, может, очепятка где.. хотя все уже перепробовал.

Edited June 27, 2011 by gart

Bonzash · June 27, 2011

#images_carrier #images .item#expl:hover {
    background-position:268px -544px;}
#images_carrier #images .item#land {
    background: url(menu2.jpg) no-repeat 532px -272px;}
#images_carrier #images #bargrein:hover {
    background: url(menu2.jpg) no-repeat 0 bottom;}
#images_carrier #images #maf:hover {
    background: url(menu2.jpg) no-repeat 268px bottom;}
#images_carrier #images .item#outdoor:hover {
    background: url(menu2.jpg) no-repeat 532px bottom;}

.item#expl

Немогу понять что это???


.item#land

И это

Edited June 27, 2011 by Bonzash

gart · June 27, 2011

#images_carrier #images .item#expl:hover {
    background-position:268px -544px;}
#images_carrier #images .item#land {
    background: url(menu2.jpg) no-repeat 532px -272px;}
#images_carrier #images #bargrein:hover {
    background: url(menu2.jpg) no-repeat 0 bottom;}
#images_carrier #images #maf:hover {
    background: url(menu2.jpg) no-repeat 268px bottom;}
#images_carrier #images .item#outdoor:hover {
    background: url(menu2.jpg) no-repeat 532px bottom;}

.item#expl

Немогу понять что это???


.item#land

И это


<a href="#" class="item" id="expl">Ввод в эксплуатацию</a>
<a href="#" class="item" id="land">Земельные вопросы</a>

вот эти - блок с классом и айди одновременно

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

Edited June 27, 2011 by gart

Bonzash · June 27, 2011

Ну как бе проблема решаема, только для начала надо пересмотреть верстку.

<a href="#" class="item" id="expl">Ввод в эксплуатацию</a>
<a href="#" class="item" id="land">Земельные вопросы</a>

Убираем id и добавляем класс:

<a href="#" class="item expl">Ввод в эксплуатацию</a>
<a href="#" class="item land">Земельные вопросы</a>

Меняем стили:

#images_carrier #images .expl {
    background-position: "сколькото цифр"px; !important}
#images_carrier #images .expl:hover {
    background-position:268px -544px; !important}

gart · June 27, 2011

Ну как бе проблема решаема, только для начала надо пересмотреть верстку.

<a href="#" class="item" id="expl">Ввод в эксплуатацию</a>
<a href="#" class="item" id="land">Земельные вопросы</a>

Убираем id и добавляем класс:

<a href="#" class="item expl">Ввод в эксплуатацию</a>
<a href="#" class="item land">Земельные вопросы</a>

Меняем стили:

#images_carrier #images .expl {
    background-position: "сколькото цифр"px; !important}
#images_carrier #images .expl:hover {
    background-position:268px -544px; !important}

сейчас буду пробовать)

upd: не работает. аналогичная ситуация, как и была. может листинг укороченный привести, дабы удобнее было?

Ну как бе проблема решаема, только для начала надо пересмотреть верстку./quote]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<style type="text/css">
 #images_carrier {
    height:270px;
    background: url(images_shadow.png) no-repeat center bottom;
    padding:35px 0;
    margin: 0 auto;
}
#images_carrier #images {
    background: url(menu2.jpg) no-repeat;
    width:804px;
    height: 272px;
    margin: 0 auto;
    font-size:0px;
}
#images_carrier #images .item {
    width:268px;
    height: 136px;
    display: inline-block;
    background-image: url(menu2.jpg);
    background-repeat: no-repeat;
}
#images_carrier #images .expl {
    background-position: 268px 0px; !important}
#images_carrier #images .expl:hover {
    background-position:268px -272px; !important}
#images_carrier #images .land {
    background-position: 268px 0px; !important
}
#images_carrier #images .land:hover {
    background-position:268px -272px; !important}


</style>
</head>

<body>
<div id="images_carrier">
        <div id="images">
            <a href="#" class="item">Услуги БТИ</a>
            <a href="#" class="item expl">Ввод в эксплуатацию</a>
            <a href="#" class="item land">Земельные вопросы</a>
            <a href="#" class="item" id="bargrein">Юридическое сопровождение сделок</a>
            <a href="#" class="item" id="maf">Малые архитектурные формы (МАФ)</a>
            <a href="#" class="item" id="outdoor">Согласование наружной рекламы</a>
        </div>
    </div>


</body>
</html>

Более того, у первого и второго блока, теперь разные картинки! о_0 я чет вообще запутался

Edited June 27, 2011 by gart

Bonzash · June 27, 2011

Поставьте background-position не в пикселях, а в процентах

gart · June 27, 2011

Ладно, проблему решил. Баг объяснить так и не получилось. Было бы очень интересно, если кто понял, в чем была загвоздка. Помогло использование одним из значений - center, top, left и т.д. Конечно, решение для спрайта несерьезное, но в данном случае лучше чем апельсин:

#images_carrier #images .item:hover {
    background-position: left -272px; !important}
#images_carrier #images .expl {
    background-position: center top; !important}
#images_carrier #images .expl:hover {
    background-position: center -272px; !important}
#images_carrier #images .land {
    background-position: right top; !important}
#images_carrier #images .land:hover {
    background-position: right -272px; !important}

Поставьте background-position не в пикселях, а в процентах

Да, спасибо за участие, решил уже. Все-таки суть проблемы так и не ясна. Весь нет обрыл, такое чувство, что у меня первого это вылезло

Кто здесь модер? Как отметить в заголовке, что тема решена? Может, кому поможет.

Sign In

Проблема с вертикалью в background-position

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information