0

Верстаю сайт. Первый вопрос: при наведении мышки на пункт Главного меню почему оно не подсвечивается на всю ширину (от правого до левого border'a)? Какое CSS правило нужно прописать?

Второй вопрос: если прокрутить страницу вниз до пункта "TESTIMONIALS", там заголовок сделан как h5 с классом "h5". Я прописал такие CSS стили:

h5.h5:before{
    background-image: url(http://evolutionnailspanj.brandivo.com/wp-content/uploads/sites/30/2015/02/h5.png);
    background-position: 0% 0%;
    background-repeat: no-repeat;
    width: 101px;
    height: 79px;
}

Но картинка не отображается, почему так происходит?

1
  • если используете before - необходимо прописать content: '';
    – soledar10
    19 фев 2015 в 17:50

2 ответа 2

2

Список меню li через display-inline.

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

Для того чтобы этого небыло, варианты, как от этого избавиться:

1) родителю font-size: 0px; это свойство наследуется, и перебить его для самих потомков

shortcodes.css:4038

#top .av-submenu-pos-center { 
  font-size: 0px;
  text-align: center;
}

2) список в одну строку

<ul>
<li>Стороки.</li><li>Просто</li><li>строки</li>
</ul>

3) не закрывать тег li

 <ul>
        <li>Стороки.
        <li>Просто
        <li>строки
    </ul>
2

Чтобы отображалась картинка с кавычками, нужно сделать padding, а не margin. И никакого псевдокласса before не нужно

h5.h5 {
font-size: 18px;
text-transform: uppercase;
margin-top: 5px;
padding: 10px;
padding-left: 70px;
background-image: url("//evolutionnailspanj.brandivo.com/wp-content/uploads/sites/30/2015/02/h5.png");
background-size: 50px 40px;
background-repeat: no-repeat;
background-position: 0% 0%;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.