• 0
vladimirte

Проблемы с вставкой изображения

Вопрос

у меня есть список:

<nav>
        <ul class="navigation">
            <li><a id="link" href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li class="cb"><a href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li><a href="">текст</a></li>
        </ul>
    </nav>

и есть стили которые меняют список:

nav .navigation li a{
    background: url(../img/home.png);
    color:#4CB0D4;
    text-decoration: none;
    text-align:center;
    display: block;
    background: #ffffff;
    height: 30px;
    width: 170px;
    padding-top: 70px;
    font-size: 20px;
    font-family: "BebasRegular";
    border-radius: 4px;
}

Проблема в том, что у меня не вставляется изображение в блок, правило background есть а изображение нету.

Когда делаю id элементу <a>, и делаю ему правило #id {background:url...} тогда у меня изображение ложится на левый верхний угол, и белый фон блока превращается в синий как фон.

Я подазреваю что проблема в том, что я неправильно задал правила для навигации, вот код:
 

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>@import url(css/style.css)</style>
</head>
<body>
<div id="wrap">
    <header>
        <div class="header_top">
            
        </div>
    </header>

    <nav>
        <ul class="navigation">
            <li><a id="link" href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li class="cb"><a href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li><a href="">текст</a></li>
            <li><a href="">текст</a></li>
        </ul>
    </nav>

</div>

</body>
</html>

и css
 

head,body{
    margin:auto 0;
}
body{
    background: url(../img/white-severance.png);
}
#wrap{
    height: 600px;
    margin: auto 0;
}
header{
    min-height: 300px;
    max-height: 300px;
    background: #FFFFFF;
}

nav{
    min-height: 350px;
    max-height: 350px;
    background: #4CB0D4;
    overflow: hidden;
}

nav .navigation{

    margin-left: 15px;
}
ul{
    list-style: none;

}
nav .navigation li{
    display: block;
    float: left;
    padding: 30px;
}
nav .navigation li a{
    background: url(../img/home.png);
    color:#4CB0D4;
    text-decoration: none;
    text-align:center;
    display: block;
    background: #ffffff;
    height: 30px;
    width: 170px;
    padding-top: 70px;
    font-size: 20px;
    font-family: "BebasRegular";
    border-radius: 4px;
}
.navigation .cb{
    clear: both;
}
ul .sell a{
    background: url(../img/home.png) no-repeat;
}
#link{
}

@font-face {
    font-family: 'BebasRegular';
    src: url('../fonts/BebasRegular/BebasNeueRegular.eot');
    src: url('../fonts/BebasRegular/BebasNeueRegular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/    BebasRegular/BebasNeueRegular.woff') format('woff'),
         url('../fonts/BebasRegular/BebasNeueRegular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

 

img.png

Изменено пользователем vladimirte

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

1 ответ на этот вопрос

Рекомендуемые сообщения

  • 0

 

5 часов назад, vladimirte сказал:

Проблема в том, что у меня не вставляется изображение в блок, правило background есть а изображение нету.

У вас второй background перекрывает первый:

nav .navigation li a {
  background: url(../img/home.png);
  /* ... */
  background: #ffffff;
}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас


  • Похожие публикации

    • Автор: Super_Saimon
      Добрый день! Хотелось бы получить пояснение о принципе работы механизма с "вращающимися блоками". А именно-к примеру, есть страница-приветствия, а в ней блок с аватаркой и кнопкой входа, нажав на которую весь блок визуально прокручивается вокруг своей оси. И появляется на месте блока с приветствием блок с формой входа. Надеюсь, что пример доступный и я буду понят... хотелось бы понять о принципе работы: как происходит подмена одного блока на другой, это реализовывается только на css с помощью преобразований и переходов/анимации или тут уже нужен JavaScript?
    • Автор: VjikZel
      Здравствуйте, в верстке я новичок, поэтому не судите строго за вопрос.
      Сейчас я работаю над сайтом на WP. Мне нужно задать размер шрифта для всех элементов UL на страницах сайта. Как это лучше сделать?
    • Автор: incub
      Как выровнить картинки с разной высотой?