Смещение фона в <li>

[SLameN]

1. Как сделать чтобы у Заголовка - class="nav_active" был фон смещенный влево?

 

<div id="nav_home" style="margin: 0;">        <ul>            <li class="nav_active">Заголовок</li></li>            <li><a href="#">Тест1</a></li>        </ul>        </div> <div id="nav_home" style="margin: 0;">        <ul>            <li class="nav_active">Заголовок</li></li>            <li><a href="#">Тест1</a></li>        </ul>        </div>

#nav_home {        border: 0px solid #ccc;        float: left;        list-style: none;        font-family: Trebuchet MS;        font-size: 13px;        width: 229px;        margin: 0 17px 20px 0px;        height: 300px;}        .nav_active {        background-repeat: no-repeat;        color: #fff;        padding: 5px 20px;    }        #nav_home ul {        display: inline-block;    }        #nav_home li {        float: left;        position: relative;        display: block;        text-align: left;        margin: 0 0 1px -40px;        width: 229px;    }        #nav_home li a {        display: block;        color: #333;        background-repeat: no-repeat;        background-position: right;        background-color: #eee;        text-decoration: none;        padding: 10px 20px;

#nav_home li a:hover, a:active, a:focus {

        background: url("../img/hover.png") left center no-repeat,url("../img/hover2.png") right center no-repeat;

        background-color: #31b8da;

        color: #fff;

}

 

2. Теперь при нажатии на другие ссылки применяется стиль #nav_home li a:hover, a:active, a:focus. Как отменить этот стиль на другие ссылки?

Edited June 26, 2015 by SLameN

[wwt]

Чтобы у заголовка фон как бы загибался под лист?

С помощью псевдоэлемента. разбейте фон на 2 части

.nav_active {position: relative;}.nav_active:before {display: block;position: absolute;content: '';background: url(адрес до вашей картинки);width: 30px;height: 30px;top: 0;left: -30px;}

И я бы на вашем месте заголовок не делал элементом списка, с делал бы div + ul где div заголовок.

[SLameN]

Спасибо, а как прописать стили для текста? Если здесь прописать - nav_active и nav_active:before, не работает... И помогите, пжлст еще с вопросом №2

[wwt]

что-то типо ? http://jsfiddle.net/uyj3cLpy/

У вас

#nav_home li a:hover, a:active, a:focus

тут перечисление через запятую, и два последних правила для всех ссылок =)) А нужно так:

#nav_home li a:hover, #nav_home li a:active, #nav_home li a:focus

[SLameN]

Что-то я торможу... картинка же на фоне, а я хочу текст поверх ее выводить Z-index низя никак разрулить? Больше нет вариантов?

[wwt]

Что-то я торможу... картинка же на фоне, а я хочу текст поверх ее выводить Z-index низя никак разрулить? Больше нет вариантов?

я в примере вам прописал цвет фона в nav_active и nav_active:before заместо цвета пропишите фоновые картинки для основной части заголовка и той что вылазит за блок . Текст в заголовке полюбому будет поверх фона и так.

[SLameN]

Проблема в том, что у меня картинка на фоне, а не заливка цветом. Если я пишу размеры, то текст пропадает, а если размеров нет, то картинка есть, но текста нет

.nav_active {        background-repeat: no-repeat;        color: #333;        position: relative;    padding: 10px 20px;}.nav_active:before {    display: block;    position: absolute;    content: '';    left: -10px;    top: 6px;     background: url('http://s014.radikal.ru/i329/1506/34/3659c0f8b5a9.png');    width: 241px;        height: 48px;}

Edited June 26, 2015 by SLameN

[wwt]

http://jsfiddle.net/uyj3cLpy/1/