Не удается решить проблему спрайтов CSS

0

Я понятия не имею, что я делаю неправильно, для меня код кажется правильным, но я думаю, что это не так, или это будет работать. Фактическая кнопка спрайта не отображается в браузере, я могу нажать на невидимую кнопку, но я не могу ее увидеть, и я понятия не имею, как ее исправить. Помощь нужна.

Здесь CSS

@charset "UTF-8";
/* CSS Document */
a.button
{
    height: 48px;
    background-image: url("images/Home.png");
    text-indent: -9999px;
    display: inline-block;
}

#home
{
    width: 186px;
    background-position: 0px 0px;
}

#home:hover
{
    background-position: 0px -40px;
}

#home:active
{
    background-position: 0px -80px;
}

Здесь HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/main.css" rel="stylesheet" type="text/css" media="screen">
</head>

<body>
<a href="#" class="button" id="home">Home</a>
</body>
</html>
  • 0
    У вас есть ссылка на это?
  • 0
    Нет у меня нет ссылки
Теги:
browser
sprite

1 ответ

0

В коде нет ничего плохого. Однако вам действительно не нужен text-indent: -9999px; Просто не помещайте в него текст.

Должно быть, ваше местоположение "images/Home.png" не должно быть правильным путем.

Посмотрите, что произойдет, когда я переключу изображение: http://jsfiddle.net/KAHwf/

Поделиться
  • 0
    Теперь вопрос: почему у меня проблемы с моим путем? этот путь работает в разметке HTML, но не является CSS
  • 0
    Ваш CSS находится в том же месте, что и ваша страница?
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню